PHP/JS实现手绘Canvas示意图相似度比对方法

pHash 属于全局感知哈希算法，天生不适合你的业务场景：它对元素位置偏移、手绘线条抖动、图形大小缩放、线条粗细差异的容忍度极低，会把这些不影响语义正确性的差异判定为低相似，评分达不到预期是正常的。
你的场景核心是匹配图形元素的空间语义关系，不是全局像素相似，以下是可直接落地的JS/PHP实现方案，按推荐优先级排序：

一、Javascript 实现（优先推荐，适配Canvas原生场景） #

你本身就在Canvas上承接用户绘制，完全不需要等画布转成图片再做比对，直接基于Canvas数据做校验，准确率远高于纯图像比对：

• 最优方案：结构化语义规则匹配
  在绘制层维护所有图形的结构化数据：每个图形的语义类型（比如方块代表桌面、圆形代表小球、箭头代表方向）、边界框坐标，直接和标准示意图的空间规则做匹配即可，完全不受手绘抖动、线条样式干扰。
  比如对应介词 "on" 的示意图，核心规则是「承载物图形的顶部与放置物图形的底部邻接、二者水平范围存在重叠」，只要用户绘制的元素满足规则就算正确。如果是用Fabric、Konva这类Canvas开发库，可以直接拿到元素的边界数据，核心判断逻辑示例：

  // 判断图形A是否在图形B上方且邻接（匹配介词on的语义）
  function checkOnRelation(A, B) {
    const aBounds = A.getBoundingRect();
    const bBounds = B.getBoundingRect();
    // 允许8像素以内的位置误差，容忍手绘抖动
    const verticalAdjacent = Math.abs(aBounds.bottom - bBounds.top) < 8;
    // 两个图形水平方向存在重叠
    const horizontalOverlap = Math.min(aBounds.right, bBounds.right) > Math.max(aBounds.left, bBounds.left);
    return verticalAdjacent && horizontalOverlap;
  }
  

  如果没有用Canvas库，也可以通过原生getImageData()提取轮廓、识别不同图形的边界，再计算空间关系。
• 备选方案：局部特征图像比对
  如果必须基于转存后的图片做比对，放弃全局哈希，改用局部特征点匹配：先把两张图统一缩放到200*200尺寸、转灰度、做边缘提取二值化，再通过jsfeat这类轻量CV库提取角点、边缘特征，统计匹配特征点的占比，占比超过70%即可判定为正确，对偏移、缩放、轻微变形的容忍度远高于pHash。

二、PHP 实现（后端校验场景） #

PHP环境下没有原生的成熟CV库，推荐两个低改造成本的落地方案：

• 基于Imagick扩展的轮廓比对
  先对两张图做统一预处理过滤无关干扰，再比对轮廓差异，比直接像素比对、pHash的准确率高很多，示例代码：

  <?php
  // 加载用户绘制图和标准示意图
  $userDraw = new Imagick('./user_drawing.png');
  $standardDraw = new Imagick('./standard_schematic.png');
  // 统一预处理，过滤线条颜色、粗细、尺寸差异的干扰
  foreach ([$userDraw, $standardDraw] as $img) {
      $img->resizeImage(200, 200, Imagick::FILTER_LANCZOS, 1);
      $img->transformImageColorspace(Imagick::COLORSPACE_GRAY);
      $img->edgeImage(1); // 提取图形轮廓
      $img->thresholdImage(0.5); // 二值化处理
  }
  // 计算轮廓差异，返回值越小相似度越高
  $similarityMetric = $userDraw->compareImages($standardDraw, Imagick::METRIC_MEANSQUAREERROR)[1];
  // 阈值可根据业务调整，一般小于0.2即可判定为语义匹配
  $isCorrect = $similarityMetric < 0.2;
  

• 高准确率方案：本地部署轻量OpenCV服务，PHP侧通过本地接口调用ORB特征匹配能力，准确率比Imagick轮廓比对高30%左右，适合对校验精度要求高的场景。

优化提示：不要试图通过调整pHash阈值达到预期效果，这类全局哈希的设计目标是检索复制、裁剪、轻微压缩后的同源图片，和手绘示意图的校验需求完全不匹配。优先选择结构化语义匹配方案，开发量小、准确率最高，也不会出现误判。

本次比对的示例示意图如下：

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