Js 如何判断两张图片是否相同

Question

如题
需要做图片上传
要求不能传相同的图片

还要支持修改的时候和网络链接做对比

头大

Answer 1

你获取md5值都相同应该是没走readFile函数导致的
普通获取文件 md5 的方法：

import SparkMD5 from 'spark-md5';
let hashMd5 = SparkMD5.ArrayBuffer.hash;

let asyncFile = await this.readFile(file);
let md5 = hashMd5(asyncFile);
readFile(file) {
    const reader = new FileReader();
    return new Promise((resolve, reject) => {
        reader.onerror = error => {
            reader.abort();
            reject(error);
        };
        reader.onloadend = () => {
            resolve(reader.result);
        };
        reader.readAsArrayBuffer(file);
    });
}

Answer 2

普通做法
前端：算图片的md5，上传之前先查一下这个md5，有的话不让传
后端：拿到图片之后算一下md5，有的话就不存

奇葩做法
后端：用深度学习之类的库判断图片是否有相似的，如果有相似的认为是同一张图片，不让传

Answer 3

两个思路吧。

1. md5。服务器端保存所有图片的 md5，上传前计算本地文件的 md5，并且发送到服务器对比。
2. 本地抽取图片特征码。方案比较多，性价比不高。

Answer 4

计算MD5对比

Answer 5

简单来说应该不可以。
但是非要实现的话，需要先明确 “相同图片” 的判断方式，
如果是完全相同，一个像素都不能差，我的想法是：

1. 可以通过FileReader计算图片的MD5, 通过MD5比对，MD5一样就认为是同一张。（同一个文件的MD5才一样）
2. 可以通过Canvas像素比对，像素完全一样认为是同一张图片。