如何解决OCR识别文本的bbox边界框标注偏移问题？

核心原因 #

OCR返回的坐标基于原始图片尺寸，但页面中渲染的图片可能因容器布局、CSS盒模型等因素，实际位置和缩放比例与原图存在差异，直接套用原图坐标就会出现偏移。

具体解决步骤 #

• 获取图片的实际渲染参数
  使用getBoundingClientRect()获取页面中图片元素的真实渲染尺寸和位置：

  const img = document.querySelector('img');
  const imgRect = img.getBoundingClientRect();
  // 原图尺寸（控制台已给出：513×277）
  const originalWidth = 513;
  const originalHeight = 277;
  // 计算缩放比例
  const scaleX = imgRect.width / originalWidth;
  const scaleY = imgRect.height / originalHeight;
  // 获取图片相对于父容器的偏移量（父容器需设为relative定位）
  const imgOffsetLeft = img.offsetLeft;
  const imgOffsetTop = img.offsetTop;
  

• 转换OCR坐标到页面渲染坐标
  将OCR返回的每个bbox坐标按比例缩放，并加上图片的偏移量：

  // 示例：OCR得到的数字25的bbox坐标[x1,y1,x2,y2]
  const ocrBbox = [178, 183, 193, 183];
  // 转换为页面坐标
  const rectX = ocrBbox[0] * scaleX + imgOffsetLeft;
  const rectY = ocrBbox[1] * scaleY + imgOffsetTop;
  const rectWidth = (ocrBbox[2] - ocrBbox[0]) * scaleX;
  // 高度以OCR返回的bbox实际高度为准，此处为示例
  const rectHeight = 20 * scaleY;
  

• 设置标注元素的定位规则
  确保图片的父容器设置为position: relative，标注的红色矩形设置为position: absolute，让矩形坐标相对于父容器定位：

  .img-container {
    position: relative;
    padding: 0;
    margin: 0;
  }
  .text-highlight {
    position: absolute;
    border: 2px solid red;
    pointer-events: none; /* 避免遮挡图片交互 */
  }
  

• 验证调试
  在控制台打印转换后的坐标和图片参数，对比实际渲染位置；也可以手动绘制一个原图左上角的测试矩形，验证转换逻辑是否正确。

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