Question

我要做一个用户检测到两个图像的不同区域的游戏。这两个图像有几个不同的区域，看起来都一样，所以用户应该找到。

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

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

我正在使用HTML5，javascript .......

制作这款游戏

Answer 1

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

var img1 = (your first image), 
    img2 = (your second image),
    ctx1 = document.createElement('canvas').getContext('2d'),
    ctx2 = document.createElement('cavnas').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无法检查图片中的像素。这就是为什么colorpickers只适用于div（它们读出背景颜色）

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

3 个答案: