javascript - 如何比较两个 html5-canvas-elements 的内容？

Question

我想用 javascript 比较两个图像。一个绘制在 html5 Canvas 上，另一个可能绘制在另一个 html5 Canvas 上，或者它可能是 gif 或 png 图像文件。我需要比较自动化测试。感谢您的帮助!

Answer 1

好吧，这不是您问题的完整解决方案，但它可能会帮助您找到比较两个 Canvas 元素的好方法。

var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;

for(var i = 0, il = pixels.length; i < il; i++) {
    // pixels[i]
}

这是一个基本示例，说明如何遍历 Canvas 上的所有像素。根据您想要执行的操作，您可以将像素相互比较，或者您可能希望将两个 imageData 变量相互比较