JSPM

A comprehensive component for tagging images. Check out demo 1 and demo 2 for some examples.

Features

• Bounding Box (Rectangle, Square, Circle, and Ellipse), and Polygon Annotations
• Add, Edit, Drag, Rotate, and Delete Annotations
• Zoom and Pan
• Changing image on the fly
• Colorful annotations
• Raw or typed input/output

Usage

Install react-image-label using npm.

npm install react-image-label

Then you can just import the component and its hook:

import { ImageAnnotator, useImageAnnotator } from 'react-image-label';

and use it as below:

const { setHandles, annotator } = useImageAnnotator();

<ImageAnnotator
  setHandles={setHandles}
  naturalSize={true}
  imageUrl={'your-image-url'}  
  shortcut={{del: true, bksp: true }}
  onReady={annotator => { annotator.drawRectangle() }} />

Now you can draw rectangles on the image by dragging the left mouse button.

Mouse and Keyboard events

• click: Edit/Stop Edit Annotations
• Ctrl + mouse wheel: Zoom
• Ctrl + mouse drag: Pan
• mouse drag: Drag/Edit/Rotate Annotations

when using shortcut={{del: true, bksp: true }} in props (see Shortcut Settings):

• Delete/Backspace key: Delete Annotations

Props

The following props can be defined on ImageAnnotator:

(*) required props

Handles

You can access the handles using the annotator object as follows:

<button onClick={() => { annotator.drawCircle() }}>Draw Circle</button>

Below is a list of all handles:

Annotations with Categories

To attach one or more categories to an annotation, utilize onAdded and onContextMenu props being called when an annotation is drawn and right-clicked, respectively. Use shape.categories to get the previous categories as string[]:

const showCategoriesDialog = (shape) => {
  console.log(shape.id) // 1
  console.log(shape.getCenterWithOffset()) // { X: 247.5, Y: 193 }
  console.log(shape.categories) // string []
  // Show a category selection component
}

return (
  <ImageAnnotator
    onAdded={showCategoriesDialog}
    onContextMenu={showCategoriesDialog}
    ...
);

Finally, call annotator.updateCategories to update the categories of the annotation.

Shapes

The data models for all shapes are listed below:

Shortcut Settings

Below is a list of shortcuts that are configured through shortcut prop:

Contributing

• Fork the project.
• Make changes.
• Run the project in development mode: npm run ladle.
• Write your own tests and/or update existing ones in src/test dir.
• Check the new features and changes using annotator.stories.tsx or your own Stories (*.stories.tsx).
• Update README with appropriate docs.
• Commit and PR

Dependencies

The package is dependent on SVG.js through react-svgdotjs package. The following peer dependencies must be specified by your project in order to avoid version conflicts: react, react-dom. NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.