Question

我在页面中有一些图像，我想在我点击的位置绘制一个矩形以留下标记。我试图用帆布来实现这一点，但我没有到达任何地方。我无法看到我在任何地方创建的画布，当然也不是矩形。

这是我到目前为止的代码：

<style type="text/css">
canvas { 
    position: absolute;
    z-index: 100;
    border:1px solid #000000;
    background-color: red;
}   
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
    $('img').click(function(e) {
        $('#output_'+this.id).html('X:'+event.offsetX+' Y:'+event.offsetY);

         if(!this.canvas) {
             this.canvas = $('<canvas />')[0];
         }
        var ctx = this.canvas.getContext('2d');
        ctx.drawImage(this, 0, 0, this.width, this.height);

        ctx.rect(event.offsetX, event.offsetY, 3, 3);
        ctx.fillStyle = "black";
        ctx.fill();
    });

});
</script>
<pre id="output_1"></pre>
<img id="1" src="Desert.jpg" width="200" height="200"></img>
<pre id="output_2"></pre>
<img id="2" src="Hydrangeas.jpg" width="200" height="200"></img>

Answer 1

将填充的画布附加到您需要附加的html。另一件事是如何在图像的顶部实现定位。如果你需要一个正方形，为什么不使用边框？使用canvas执行该任务是低性能，硬编码和突破性的。

帮助1

追加你的画布：当你这样做时：

     if(!this.canvas) {
         this.canvas = $('<canvas />')[0];
     }

你需要添加

     $(this.canvas).appendTo($('body'));

$('body')可以是您需要附加的元素的选择器。

帮助2

通过常规方法制作。

＆＃13;

$('img').on('click' , function(e) {
  e.preventDefault();
  $(this).toggleClass('with-border');
});

＆＃13;

.with-border {
  border: 2px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://dummyimage.com/120x100/000/fff&text=click+me">

＆＃13;

修改

将画布置于图像所在的绝对位置：

  var cnvas = $(this.canvas);
  cnvas.appendTo($('body'));
  cnvas.css({
       position: 'absolute',
       left: event.offsetX,
       top: event.offsetY,
       'z-index': 1
  });

Answer 2

你可以通过使画布背景透明来创建没有drowimage的画布，试试这个

$(function() {
    $('img').click(function(event) {
	    $('#output_'+this.id).html('X:'+event.offsetX+' Y:'+event.offsetY);
	     if(this.canvas) return
          var w=this.width
		  var h=this.height
		 
         if(!this.canvas) {
		
             this.canvas = $('<canvas  />').insertBefore($(this))[0];
         }
		 $(this.canvas ).height(h)
		  $(this.canvas ).width(w)
        var ctx = this.canvas.getContext('2d');
		
		//ctx.drawImage(this, 0, 0, w  ,h);

        ctx.rect(event.offsetX, event.offsetY, 3,3);
        ctx.fillStyle = "black";
        ctx.fill();
    });

});

canvas { 
    position: absolute;
    z-index: 100;
    border:1px solid blue;
    background-color: trnaparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<pre id="output_1"></pre>
<img id="1" src="http://dummyimage.com/120x100/000/fff&text=Img 1" width="200" height="200"></img>
<pre id="output_2"></pre>
<img id="2" src="http://dummyimage.com/120x100/000/fff&text=Img 2" width="200" height="100"></img>

在我单击的图像上绘制一个矩形

2 个答案:

帮助1

帮助2

修改