canvas-select v2.21.0

canvas-select

一个用于图片标注的 javascript 库，基于 canvas，简单轻量，支持矩形、多边形、点、折线、圆形标注。

A lightweight image annotation javascript library that supports rectangles, polygons, points, polylines, circles, and re-editing, making image annotation easier.

查看示例 👉 demo

简介

• 支持矩形标注、多边形标注、点标注、折线标注、圆形标注。

• 支持拖拽、缩放。

• 支持控制点编辑。

• 支持全局样式设置，单个形状样式设置。

• 支持添加、编辑标签。

• 支持桌面端和移动端。

• 每个形状有唯一 uuid，没有则自动生成。

使用

• 设置 instance.createType 指定需要创建形状类型，不创建时需要设置为 0。

• 创建矩形时，按住鼠标左键拖动完成创建。

• 创建多边形或折线时，鼠标左键单击添加点，闭合或者双击完成创建，Escape退出创建，Backspace退一步删除选择点。

• 创建点时，鼠标左键点击完成创建。

• 创建圆时，按住鼠标左键拖动完成创建。

• 按住鼠标右键拖动画布。

• 按住Control键拖动形状。

• 鼠标滚轮缩放画布。

• 选中形状，Backspace删除。

• 通过 instance.dataset或者监听updated事件回调参数查看标注结果。

支持 UMD 模块规范

<script src="https://unpkg.com/canvas-select@^2/lib/canvas-select.min.js"></script>

npm install canvas-select --save

<canvas class="container"></canvas>

// 创建实例（重要：一定要等到挂载节点就绪）
// 第一个参数为挂载节点 可以是css选择器或者HTMLCanvasElement
// 第二个参数为图片链接
const instance = new CanvasSelect(".container", "/one.jpg");
// or
// const instance = new CanvasSelect('.container');
// instance.setImage('/one.jpg');

let option = [
  {
    label: "rectangle",
    labelFillStyle: "#f00",
    textFillStyle: "#fff",
    coor: [
      [184, 183],
      [275, 238],
    ], // required
    type: 1, // required
  },
  {
    label: "polygon",
    coor: [
      [135, 291],
      [129, 319],
      [146, 346],
      [174, 365],
      [214, 362],
      [196, 337],
      [161, 288],
    ], // required
    type: 2, // required
  },
  {
    label: "dot",
    coor: [345, 406], // required
    type: 3, // required
  },
  {
    label: "line",
    coor: [
      [470, 155],
      [490, 230],
      [493, 298],
    ], // required
    type: 4, // required
  },
  {
    label: "circle",
    coor: [369, 197], // required
    radius: 38, // required
    type: 5, // required
  },
];
// 加载数据
instance.setData(option);
// 0 不创建(默认)，1创建矩形，2创建多边形，3点标注，4折线标注，5圆形标注
instance.createType = 1;
instance.on("select", (info) => {
  console.log("select", info);
  // 可对选中对参数info进行修改
  // 修改标签：info.label="hello"
  // 单个形状修改填充颜色：info.fillStyle="#0f0"
  // 然后调用instance.update()更新视图
});

实例属性

对任意属性的修改都需要调用instance.update()更新视图

实例方法

事件

注意事项

1. 不要在 canvas 标签上设置 style，推荐使用 css。

2. 如果使用框架，请在生命周期加载完成之后创建实例。