前端如何对图片进行标注

Question

前端如何实现将原图变成下面图片这样，使用AILabel.js插件，倒是可以实现，但是在使用多边形标注的时候，点与点之间会形成重叠，想请问各位大佬还有什么方法可以实现吗？

Answer 1

你可以使用fabric.js库来实现图片标注，使用fabric.js在图片上进行多边形标注：

首先，在HTML文件中引入fabric.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.6.0/fabric.min.js"></script>
创建一个画布元素，用于显示图片和标注：

<canvas id="canvas" width="800" height="600"></canvas>
使用JavaScript和fabric.js在图片上创建多边形标注：
javascript
Copy code
const canvas = new fabric.Canvas("canvas");

// 加载图片
fabric.Image.fromURL("your-image-url-here", (img) => {
  img.scaleToWidth(canvas.width);
  img.scaleToHeight(canvas.height);
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
    scaleX: canvas.width / img.width,
    scaleY: canvas.height / img.height,
  });
});

let polygonPoints = [];
let polygon;

canvas.on("mouse:down", (options) => {
  const pointer = canvas.getPointer(options.e);
  polygonPoints.push(new fabric.Point(pointer.x, pointer.y));

  if (!polygon) {
    polygon = new fabric.Polygon(polygonPoints, {
      stroke: "red",
      fill: "rgba(255, 0, 0, 0.3)",
      selectable: false,
    });
    canvas.add(polygon);
  } else {
    polygon.set({ points: polygonPoints });
    canvas.renderAll();
  }
});

// 双击完成多边形绘制
canvas.on("mouse:dblclick", (options) => {
  canvas.off("mouse:down");
});

可以看看fabric.js库提供了许多功能和选项，可以帮助你实现复杂的图形操作和交互。更多关于fabric.js的信息和文档，请访问官方网站：http://fabricjs.com/。