一、目标

在我们的学习平台中，识别图片的功能已经基本完成，现在要做的是把识别到的物体用识别框框起来展示，是提升交互体验的重要一环。本次任务目标是：

• 利用 豆包 模型返回的边界框（bbox）数据高亮图片中的目标；

• 实现前后端协同处理与渲染。

---

二、理解边界框（bbox）数据格式

AI 模型通常返回以下两种 bbox 格式：

类型	示例	描述
相对坐标	<bbox>399 326 621 990</bbox>	相对于图片宽高的级坐标
相对比例坐标	<bbox>0.46 0.49 0.63 0.996</bbox>	相对于图片宽高的归一化数值，范围在 0~1

📌 有时还会出现 伪归一化整数（如范围是 0~1000），这类数据需先除以 1000。

坐标含义：

x_min, y_min = 左上角
x_max, y_max = 右下角

实验过程中我一度认为bbox是绝对坐标，（在图片尺寸范围之下考虑的），一开始一直出现识别框展示不出来的问题，原因是bbox超出了原图片的尺寸大小，利用相关算法转化也没有实现目标。一直在这里进行考虑，想过图片格式问题，图片翻转问题等等，多次尝试都以失败告终。最后幡然醒悟，bbox是针对图片的宽高所在的位置，和具体像素无关。

---

三、后端实现：从解析到画框

3.1 提取并转换 bbox 坐标

后端首先解析 AI 返回的内容：

function extractBoxesFromBbox(content) {
  const regex = /<bbox>([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)<\/bbox>/g;
  const boxes = [];
  let match;
  while ((match = regex.exec(content)) !== null) {
    const [_, x_min, y_min, x_max, y_max] = match;
    boxes.push({
      x_min: Number(x_min) / 1000, // 统一按归一化处理
      y_min: Number(y_min) / 1000,
      x_max: Number(x_max) / 1000,
      y_max: Number(y_max) / 1000
    });
  }
  return boxes;
}

3.2 转为实际像素坐标

const absBoxes = relBoxes.map(box => {
  const x = box.x_min * imgWidth;
  const y = box.y_min * imgHeight;
  const width = (box.x_max - box.x_min) * imgWidth;
  const height = (box.y_max - box.y_min) * imgHeight;
  return {
    x: Math.round(x),
    y: Math.round(y),
    width: Math.round(width),
    height: Math.round(height)
  };
});

3.3 使用 sharp 与 SVG 合成高亮图片

const svgRects = absBoxes.map(
  box => `<rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" fill="none" stroke="yellow" stroke-width="4"/>`
).join("");

const svg = `<svg width="${imgWidth}" height="${imgHeight}" xmlns="http://www.w3.org/2000/svg">${svgRects}</svg>`;

const outBuffer = await sharp(originalImageBuffer)
  .composite([{ input: Buffer.from(svg), top: 0, left: 0 }])
  .png()
  .toBuffer();

四、调试技巧

• ✅ 后端打印 AI 返回的原始内容，确认 bbox 格式。

• ✅ 前端调试时可将处理结果 console 出来，便于对比。

• ✅ 服务器返回 500 错误时，重点检查 bbox 处理和正则表达式是否出错。

---

五、总结经验

维度	要点
数据处理	后端统一将所有坐标归一化为比例，并转像素
前端展示	内容过滤、行间分隔、保持格式
开发协作	明确职责，前端展示逻辑清晰，后端数据处理可靠

---

📌 结语

AI 图像识别与前端可视化展示的协作，不仅考验编码能力，更考验前后端对数据规范的统一理解。希望本文能帮你顺利完成图像标注类项目！

---