javascript - 如何裁剪从getImageData()函数获得的图像？

我正在尝试获取源画布的内容，对其进行裁剪，然后将其绘制在另一个画布上。即使我的代码使用src PNG / new Image（）组合就像超级魅力一样，但当源内容来自另一个画布时却没有。

代码是：

var imgData = src_ctx.getImageData(x, y, w, h);
dest_ctx.putImageData(imgData, x, y+h);

ctx.beginPath(); // Filled triangle
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x2,0);
ctx.lineTo(x1,0);
ctx.clip();

最佳答案

定义裁剪区域后，请使用drawImage而不是设置imagedata来绘制源画布。

dest_ctx.beginPath(); // Filled triangle
dest_ctx.moveTo(x1,y1);
dest_ctx.lineTo(x2,y2);
dest_ctx.lineTo(x2,0);
dest_ctx.lineTo(x1,0);
dest_ctx.clip();

// You can control wich region to draw using all the arguments
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
dest_ctx.drawImage (srcCanvas, x, y);