javascript - 如何根据鼠标点击裁剪选定的矩形

Question

我在 Canvas 上绘制了图像。

我希望用户单击 Canvas 来裁剪图像的一部分。

我该怎么做？

Answer 1

以下是帮助您入门的大纲:

• 将图像绘制到 Canvas 上

  var canvas=document.getElementById('myCanvas');
  canvas.drawImage(yourImageObject,0,0);
  

• 监听 mousedown 事件。

  canvas.onmousedown=function(e){handleMouseDown(e);};
  

• 让用户单击要裁剪的左上角 [x0,y0] 和右下角 [x1,y1]记录这 2 个鼠标位置。

• 裁剪矩形的定义如下:

  var x=x0; 
  var y=y0;
  var width=x1-x0;
  var height=y1-y0;
  

• 创建第二个 Canvas 元素并将其调整为裁剪尺寸:

  var secondCanvas = document.createElement('canvas');
  secondCanvas.width = width;
  secondCanvas.height = height;
  document.body.appendChile(secondCanvas);
  

• 使用 drawImage 的裁剪版本将裁剪矩形从第一个 Canvas 绘制到第二个 Canvas 上

  secondCanvas.drawImage(canvas,
      x,y,width,height,  // clip just the cropping rectangle from the first canvas
      0,0,width,height   // draw just the cropped part onto the first canvas
  );
  

用户选择的图像部分现在位于第二个 Canvas 上。

如果要将第二个 Canvas 转换为图像对象，可以这样做:

var img=new Image();
img.onload=start;
img.src=secondCanvas.toDataURL();
function start(){
    // at this point, img contains the cropped portion of the original image 
}