React Image Annotate


The best image/video annotation tool ever. Check out the demo here. Or the code sandbox here.

Sponsors


Features

- Simple input/output format
- Bounding Box, Point and Polygon Annotation
- Zooming, Scaling, Panning
- Multiple Images
- Cursor Crosshair

!Screenshot of Annotator

Usage

npm install react-image-annotate

``javascript
import React from "react";
import ReactImageAnnotate from "react-image-annotate";

const App = () => (
labelImages
regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
regionTagList={["tag1", "tag2", "tag3"]}
images={[
{
src: "https://placekitten.com/408/287",
name: "Image 1",
regions: []
}
]}
/>
);

export default App;

`

To get the proper fonts, make sure to import the Inter UI or Roboto font, the
following line added to a css file should suffice.

`css
@import url("https://rsms.me/inter/inter.css");
`

Props

All of the following properties can be defined on the Annotator...

| Prop | Type (\* = required) | Description | Default |
| ------------------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------- |
| taskDescription | \*string | Markdown description for what to do in the image. | |
| allowedArea | { x: number, y: number, w: number, h: number } | Area that is available for annotation. | Entire image. |
| regionTagList | Array | Allowed "tags" (mutually inclusive classifications) for regions. | |
| regionClsList | Array | Allowed "classes" (mutually exclusive classifications) for regions. | |
| imageTagList | Array | Allowed tags for entire image. | |
| imageClsList | Array | Allowed classes for entire image. | |
| enabledTools | Array | Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" | Everything. |
| showTags | boolean | Show tags and allow tags on regions. | true |
| selectedImage | string | URL of initially selected image. | |
| images | Array | Array of images to load into annotator | |
| showPointDistances | boolean | Show distances between points. | false |
| pointDistancePrecision | number | Precision on displayed points (e.g. 3 => 0.123) | |
| onExit | MainLayoutState => any | Called when "Save" is called. | |
| RegionEditLabel | Node | React Node overriding the form to update the region (see RegionLabel) | |

Developers

$3

This project uses react-storybook. To begin developing run the following commands in the cloned repo.

1. yarn install
2. yarn storybook`

A browser tab will automatically open with the project components.

See more details in the contributing guidelines.

$3

Consult these icon repositories:

- Material Icons
- Font Awesome Icons