2

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

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

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

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

4

3 回答 3

2

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

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 坐标数组。

于 2012-07-06T13:41:12.710 回答
0

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

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

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

于 2012-07-06T08:38:52.110 回答
-1

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

于 2012-07-06T08:33:09.480 回答