判断两张图片是否相等

怎样判断两个图片相等

可以使用图片指纹（Image Fingerprint）的方式来比对是否是同一张图片。图片指纹是通过对图片进行特征提取，生成一个唯一的字符串来表示图片，如果两张图片的指纹字符串相同，则表示它们是同一张图片。

以下是一种计算图片指纹的方式：

1.将图片转化为灰度图像。

2.对图像进行缩小，比如将图片缩小到8x8的大小。

3.计算每个缩小后的像素点的灰度值，并将这些值组合成一个64位的字符串（8x8=64）。

4.通过计算64位字符串中1的个数来判断两张图片的相似度，如果1的个数较少，则说明这两张图片较为相似。

因为返回结果为异步，两种处理方案

1.callback 处理

2.promise 处理

function getImageFingerprint(image, callback) {
    return new Promise((resolve) => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = image;
        img.crossOrigin = '';
        img.onload = function () {
            canvas.width = img.width; 
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            const imageData = ctx.getImageData(0, 0, img.width, img.height);                   const pixels = imageData.data;
            const greyPixels = [];
            for (let i = 0; i < pixels.length; i += 4) {
                const r = pixels[i];
                const g = pixels[i + 1];
                const b = pixels[i + 2];
                const grey = Math.floor(0.2989 * r + 0.587 * g + 0.114 * b);                       greyPixels.push(grey);             
           }
           let fingerprint = '';
           for (let i = 0; i < 64; i++) {
              let sum = 0;
              const baseIndex = i * 8;
              const threshold = greyPixels[baseIndex + 4];
              for (let j = 0; j < 8; j++) {
                if (greyPixels[baseIndex + j] >= threshold) {
                  sum |= 1 << (7 - j);
                }
              }
              fingerprint += String.fromCharCode(sum ^ 0xff);
           }
           const md5 = window.CryptoJS.MD5(fingerprint);
           resolve(md5.toString());
           // callback(md5.toString())          
       }
   })
}