javascript - 是否有任何 JavaScript 库可以使用 HTML5 Canvas (或任何其他方式)对图像进行像素比较？

Question

想要测试 2 个图像像素是否匹配和/或较小尺寸的图像像素是否与较大图像的某些相同尺寸部分匹配。

Answer 1

第一部分，测试两张图片是否完美匹配，非常简单。

//assuming data1,data2 are canvas data of images of the same size
function isMatch(data1,data2){
    for(var i = 0; i<data1.length; i++){
        if(data1[i] != data2[i]) return false;
    }
    return true;
}

只要您不使用非常高分辨率的图像，我就不会担心速度，像这样的 Canvas 数据的一次迭代通常非常快，在配备现代浏览器的体面计算机上每百万像素大约 10 毫秒。请记住图像的宽度和高度必须相同。对于大多数实际用途，这种是或否匹配不是很有用，编码错误会导致图像发生难以察觉的变化，最好使用度量来衡量两个图像相距多远。一个简单但相当有效的指标是 RMS两张图片:

//assuming data1,data2 are canvas data of images of the same size
function rmsDiff(data1,data2){
    var squares = 0;
    for(var i = 0; i<data1.length; i++){
        squares += (data1[i]-data2[i])*(data1[i]-data2[i]);
    }
    var rms = Math.sqrt(squares/data1.length);
    return rms;
}

此处 rms 的范围为 [0,255]，如果图像完全匹配则为 0，如果一个图像全为 rgba(0,0,0,0) 而另一幅全为 rgba(255,255,255,255)，则为 255。如何确定可接受的 rms 差异的阈值由您自行调整(大约 1 到 2)。

对于你问题的第二部分，较小尺寸的图像像素是否与较大图像的相同尺寸部分匹配，我假设它们没有被翻译并且我们知道两者之间的比例差异，否则这会将其打开为一个非常复杂和有趣的问题，请参阅 Pattern Recognition .然后根据这个令人震惊的假设，我将使用 Canvas 将大图像缩小到与小图像完全相同的大小，并获得它们之间的均方根。不要测试完全匹配，因为缩放总是会产生轻微的错误并且永远不会完全匹配。