任何比较两个不同位图图像并在javascript中检测不同区域的方法

Any way to compare two different bitmap image and detect the different area in javascript?

本文关键字：javascript 检测 方法 区域 位图 比较 任何 两个 图像      更新时间：2023-09-26

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

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

有人能给我一个提示吗？我必须用画布吗？

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

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

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

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

或者你可以设计一个嵌入网页的小程序。Java将提供用于手动操作RGB值的类。

反转一个图像的颜色并与另一个图像叠加。取一个绝对差值，检查得到差值的像素。

JavaScript无法检查图片中的像素。这就是为什么颜色选择器只在div上工作（他们读取背景颜色）

相关文章：