Angular 14：上传图片内容重复检测方案咨询（忽略文件名）

一、可用的前端库 #

• pixelmatch：轻量级像素级对比工具，直接对比两张图片的像素差异，返回差异像素数量。适合对精度要求高的场景，比如小图检测。使用时需要将图片转为Canvas获取ImageData，再传入对比函数。
• blockhash-js：生成图片的感知哈希值，内容相同或高度相似的图片会生成一致或接近的哈希字符串。比像素对比更高效，适合批量检测——只需存储已上传图片的哈希值，新上传图片生成哈希后直接比对即可。
• image-hash：支持多种哈希算法（平均哈希、感知哈希等），可根据需求平衡检测速度和精度，用法和blockhash类似。

以blockhash-js为例，简单实现：

import blockhash from 'blockhash-js';

// 处理用户上传的File对象
async function getImageHash(file: File): Promise<string> {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      // 16为哈希长度，值越大精度越高，计算量也越大
      const hash = blockhash.bmvbHash(img, 16);
      resolve(hash);
      URL.revokeObjectURL(img.src); // 释放资源
    };
  });
}

二、自定义感知哈希实现（无依赖） #

如果不想引入第三方库，可以自己实现轻量版感知哈希：

1. 将图片缩小到固定小尺寸（比如8x8），减少计算量
2. 转换为灰度图
3. 计算所有像素的灰度平均值
4. 每个像素与平均值对比，生成由0/1组成的哈希字符串
5. 通过计算两个哈希的汉明距离，判断是否为重复图片（距离越小越相似）

代码示例：

// 生成图片哈希
async function generatePerceptualHash(file: File): Promise<string> {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const size = 8;
      canvas.width = size;
      canvas.height = size;
      const ctx = canvas.getContext('2d');
      
      // 缩小图片并绘制到画布
      ctx.drawImage(img, 0, 0, size, size);
      const imageData = ctx.getImageData(0, 0, size, size);
      const pixels = imageData.data;
      const grayscaleValues: number[] = [];
      let totalGray = 0;

      // 转换为灰度值并求和
      for (let i = 0; i < pixels.length; i += 4) {
        const gray = Math.round((pixels[i] + pixels[i+1] + pixels[i+2]) / 3);
        grayscaleValues.push(gray);
        totalGray += gray;
      }

      // 计算灰度平均值
      const avgGray = totalGray / grayscaleValues.length;
      // 生成哈希字符串
      const hash = grayscaleValues.map(val => val >= avgGray ? '1' : '0').join('');
      
      resolve(hash);
      URL.revokeObjectURL(img.src);
    };
  });
}

// 计算汉明距离，判断是否为重复图片
function checkDuplicate(hashA: string, hashB: string, threshold: number = 5): boolean {
  let distance = 0;
  for (let i = 0; i < hashA.length; i++) {
    if (hashA[i] !== hashB[i]) distance++;
  }
  // 距离小于等于阈值则判定为重复
  return distance <= threshold;
}

三、Angular项目中的实践建议 #

• 在上传组件中维护一个哈希集合，每次用户选择文件后，先生成哈希值与集合比对，重复则提示用户跳过该文件
• 批量上传时控制并发数，避免同时处理过多图片导致浏览器卡顿
• 大尺寸图片建议先通过Canvas压缩后再生成哈希，减少计算时间
• 前端检测仅作为用户体验优化，最终的重复校验建议在后端同步执行，防止前端绕过检测

内容的提问来源于stack exchange，提问作者user2436956