检测图像上的矩形形状并在其上添加div Jquery

Question

我想知道是否可以关注：

我在div中有一个图像（作为div的背景图像）。图像类似于Excel表格。现在，我想在用户点击图像的任何单元格时创建输入标记或contenteditable div。创建的div或输入的边框应该等于图像上的像元大小。

有人至少可以指向某个方向吗？

以下解决方案看起来很有希望：

http://www.travisberry.com/2011/05/write-text-anywhere-with-html5-canvas/

但是图像单元的对齐问题。

Answer 1

不确定你是多么有经验，所以如果这是迂腐的话请原谅我。 但是 - 我建议使用JQuery函数来获取维度变量，然后根据您发现的内容建立逻辑。

例如：

$( "img" ).click(function() {
     var height = $( this ).css( "height" );
     var width = $( this ).css( "width" );
     var ratio = height/width;

     if( min_rectangle_ratio < ratio < max_rectangle_ratio)
     {
          //set div dimensions to what you detected above
     }
 });