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

Question

我正在尝试获取源 Canvas 的内容，对其进行剪辑，然后将其绘制到另一个 Canvas 上。即使我的代码在使用 src PNG/new Image() 组合时工作得很好，但当源内容来自另一个 Canvas 时它不会。

代码是:

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

Answer 1

定义裁剪区域后，使用 drawImage 绘制源 Canvas ，而不是设置图像数据。

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