GetImageData和多个图像

Question

如果在js中使用getImageData（），当图像被绘制在画布之上时？ （我需要分别对每张图片的数据。）

Answer 1

这是一种方式：

// get the imageData for the second image

context.drawImage(secondImage,0,0);
var imageData2=context.getImageData(0,0,canvas.width,canvas.height);
context.clearRect(0,0,canvas.width,canvas.height);

// get the imageData for the first image

context.drawImage(firstImage,0,0);
var imageData1=context.getImageData(0,0,canvas.width,canvas.height);

// and now redraw the second image back on the canvas

context.drawImage(secondImage,0,0);

Answer 2

或者只是为每个图像创建一个画布对象。它们将在视觉上正确分层，但您可以独立处理图像。如果你没有弄乱z-index，它们将按照添加画布对象的顺序进行渲染。