前端如何对图片进行标注

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

阅读 3.3k
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/

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题