Question

我在画布上画了一个图像。

我希望用户点击画布来裁剪图像的一部分。

我该怎么做？

Answer 1

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

将图像绘制到画布上

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将裁剪矩形从第一个画布绘制到第二个画布上

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
);

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

如果要将第二个画布转换为图像对象，可以执行以下操作：

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 
}

如何使用基于鼠标单击来裁剪选定的矩形

1 个答案: