是否有任何javascript库使用HTML5画布(或任何其他方法)像素比较图像？

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;
}

只要你不使用非常高分辨率的图像,我就不用担心速度了,像这样的一次迭代通常非常快,每台Mega Pixel在现代浏览器的一台不错的计算机上大约10ms.请记住,图像的宽度和高度必须相同.对于大多数实际用途,这种是或否匹配不是很有用,编码错误会导致图像中难以察觉的变化,最好使用度量来测量两幅图像之间的距离.一个天真但相当有效的指标是两个图像的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;
}

这里的均方根范围为[0,255],如果图像完全匹配则为0,如果一个图像全部为rgba(0,0,0,0)则为255,另一个为rgba(255,255,255,255).如何阈值可接受的均方根差异取决于您调整(可能约为1到2).

对于问题的第二部分,较小尺寸的图像像素是否与较大图像的相同大小的部分匹配,我假设它们没有被翻译,并且我们知道两者之间的比例差异,否则这将打开它进入一个非常复杂和有趣的问题,参见模式识别.然后,通过这种令人震惊的假设,我将使用画布将大图像缩小到与较小图像完全相同的大小,并获得它们之间的rms.不要测试完全匹配,因为缩放总是会产生轻微错误,永远不会完全匹配.