canvas-select

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

What's New?

Added annotate functionality on right click of mouse. Now user can scroll top to bottom and left to right (Key: shift + mousewheel) and also zoom-in/out using key: ctrl + mousewheel. Improved zoom with panning. Added scrollbar to scroll page after zoom. Allow re-size rectangle. You can also pass shortcut key to delete annotate data. User can also make connectivity between ractangles. Connected line will automatically adjust. User can show/hide annotation labels Allow custom line width.

demo

!(https://cdn.jsdelivr.net/npm/@heylight/cdn@%5E1/img/demo.png)

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

npm install canvas-select --save

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

interface CanvasSelectProps {
  el: string | HTMLCanvasElement; // css选择器或者HTMLCanvasElement
  src: string; // 图片链接
}
const instance = new CanvasSelect(".container", "/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);

instance.createType = 1;
instance.on("select", (info) => {
  console.log("select", info);
});

Update

Call update methodinstance.update()for updating annotation list

Delete Annotate Data

For deleting annotate data with shortcut you need to pass key code in instance.RemoveSelectionOnKey="Backspace".

Right Click Annotation

Set setRightClickMoveEvent to false to enable annotation on right click. By default it's set to true. this.instance.setRightClickMoveEvent = false