Package Exports

@ap25/canvas-select
@ap25/canvas-select/lib/canvas-select.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ap25/canvas-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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