有什么方法可以比较两个不同的位图图像并检测javascript中的不同区域吗？

Question

我将制作一个游戏，让用户检测两个图像的不同区域。 这两张图片有一些不同的区域，而且看起来都一样，所以用户应该找出来。

所以我想比较两个不同的位图图像并检测不同的区域。

有人可以给我提示吗？ 我必须使用画布吗？

我正在用 HTML5、javascript 制作这个游戏......

Answer 1

首先，将每个图像绘制到画布上

var img1 = (your first image), 
    img2 = (your second image),
    ctx1 = document.createElement('canvas').getContext('2d'),
    ctx2 = document.createElement('canvas').getContext('2d');

ctx1.canvas.width = img1.width;
ctx2.canvas.width = img2.width;
ctx1.canvas.height = img1.height;
ctx2.canvas.height = img2.height;

ctx1.drawImage(img1, 0, 0);
ctx2.drawImage(img2, 0, 0);

然后，获取每个img的图像数据

var data1 = ctx1.getImageData(0, 0, img1.width, img1.height);
var data2 = ctx2.getImageData(0, 0, img2.width, img2.height);

最后，比较（假设 img1 和 img2 尺寸相同）

var different = [];

for (var y=0; y<img1.height; y++){
    for (var x=0; x<img1.width; i++){
        var pos = (x * 4) + (y * (img.width * 4));
        for (var i=0; i<4; i++){
            if (data1[pos + i] != data2[pos + i]){
               different.push({x: x, y: y});
            }
        }
    }
}

这将为您提供两个图像之间不同的所有像素的 x、y 坐标数组。

Answer 2

您需要以某种方式从图像中获取 RGB 值并进行比较。你可以参考openCV库来看看图像处理是如何完成的。

或者您可以设计一个嵌入网页的小程序。 Java 将提供类来操作 RGB 值。

反转一张图像的颜色并与其他图像叠加。取绝对差异并检查您得到差异的像素。

Answer 3

JavaScript 无法检查图片中的像素。 这就是为什么颜色选择器只适用于 div（它们读出背景颜色）