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

时间:2011-12-01 12:59:47

标签: javascript html5-canvas

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

1 个答案:

答案 0 :(得分:7)

好吧,这不是一个完整的问题解决方案,但它可以帮助你找到比较两个画布元素的好方法。

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]
}

这是如何遍历画布上所有像素的基本示例。根据您的目的,您可以将像素相互比较,或者您可能希望将两个imageData变量相互比较