如何在HTML5 Canvas的扫描图像中检测指定图像/形状是否存在，支持相似度匹配

你需要做的是局部特征匹配类的相似性检测，而非像素级完全匹配，刚好适配扫描件存在倾斜、色差、轻微模糊的场景，核心执行步骤如下：

• 先对Canvas内容和参考图像做统一预处理：灰度化、二值化、高斯降噪，减少光照、色差、扫描噪点带来的干扰，针对表单场景可额外增加倾斜校正步骤
• 提取两张图的抗形变特征点：优先选择ORB、SIFT这类对缩放、旋转、模糊容忍度高的特征点，不要用普通像素哈希类算法，这类算法对形变的适配能力极低
• 特征点匹配校验：统计匹配成功的特征点占参考图总特征点的比例，超过你设定的准确率阈值即可判定对应内容存在

• tracking.js：轻量级前端计算机视觉库，自带特征点检测、对象识别接口，支持自定义阈值，体积小易接入，适合轻量检测场景
• OpenCV.js：OpenCV官方的WebAssembly编译版本，功能最全，支持ORB、SIFT特征匹配、带相似度阈值的模板匹配，完全覆盖logo、几何图形、矩形的检测需求
• jsfeat：轻量高性能计算机视觉库，特征检测和匹配的性能优于tracking.js，适合处理大尺寸Canvas的批量检测场景

以下是ORB特征匹配的可运行代码，支持自定义准确率阈值：

// 从Canvas/Img元素提取灰度图Mat对象
function getGrayMatFromDom(dom) {
  const src = cv.imread(dom);
  const grayMat = new cv.Mat();
  cv.cvtColor(src, grayMat, cv.COLOR_RGBA2GRAY);
  src.delete();
  return grayMat;
}

/**
 * 检测Canvas中是否存在参考图像
 * @param {cv.Mat} canvasMat 待检测Canvas的灰度Mat对象
 * @param {cv.Mat} refMat 参考图像的灰度Mat对象
 * @param {number} threshold 匹配度阈值，范围0-1，值越高匹配要求越严格
 * @returns {Object} 匹配结果：是否存在+匹配度
 */
function checkReferenceExist(canvasMat, refMat, threshold = 0.65) {
  const orb = new cv.ORB();
  const canvasKeypoints = new cv.KeyPointVector();
  const canvasDescriptors = new cv.Mat();
  const refKeypoints = new cv.KeyPointVector();
  const refDescriptors = new cv.Mat();

  // 提取两张图的特征点和描述子
  orb.detectAndCompute(canvasMat, new cv.Mat(), canvasKeypoints, canvasDescriptors);
  orb.detectAndCompute(refMat, new cv.Mat(), refKeypoints, refDescriptors);

  // 暴力匹配特征点
  const matcher = new cv.BFMatcher(cv.NORM_HAMMING, true);
  const matches = new cv.DMatchVector();
  matcher.match(canvasDescriptors, refDescriptors, matches);

  // 计算匹配度
  const matchRate = refKeypoints.size() === 0 ? 0 : matches.size() / refKeypoints.size();

  // 释放内存避免泄漏
  orb.delete(); canvasKeypoints.delete(); canvasDescriptors.delete();
  refKeypoints.delete(); refDescriptors.delete(); matcher.delete(); matches.delete();

  return {
    exist: matchRate >= threshold,
    similarity: matchRate
  }
}

// 调用示例
const targetCanvas = document.getElementById('your-form-canvas');
const referenceImg = document.getElementById('reference-logo');
const canvasMat = getGrayMatFromDom(targetCanvas);
const refMat = getGrayMatFromDom(referenceImg);

// 自定义阈值设为0.6，可根据实际场景调整
const detectResult = checkReferenceExist(canvasMat, refMat, 0.6);
console.log('是否存在参考内容：', detectResult.exist, '匹配度：', detectResult.similarity);

// 用完释放Mat
canvasMat.delete();
refMat.delete();

如果只需要检测矩形、圆形这类规则几何图形，不需要复杂特征匹配，可以直接用tracking.js的边缘检测+轮廓提取能力，统计轮廓的形状参数和参考参数的差值，阈值判断即可，代码量更小，处理性能更高，适合批量表单检测场景。

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