React Image Annotate
The best image/video annotation tool ever. Check out the demo here.
Sponsors
Features
- Simple input/output format
- Bounding Box, Point and Polygon Annotation
- Zooming, Scaling, Panning
- Multiple Images
- Cursor Crosshair
Usage
npm install react-image-annotate
const App = <ReactImageAnnotate selectedImage="https://example.com/image1.png" taskDescription="# Draw region around each face\n\nInclude chin and hair." images= src: "https://example.com/image1.png" name: "Image 1" regionClsList="Man Face" "Woman Face" />
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.
;
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<string> |
Allowed "tags" (mutually inclusive classifications) for regions. | |
regionClsList |
Array<string> |
Allowed "classes" (mutually exclusive classifications) for regions. | |
imageTagList |
Array<string> |
Allowed tags for entire image. | |
imageClsList |
Array<string> |
Allowed classes for entire image. | |
enabledTools |
Array<string> |
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<Image> |
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. | |
EditForm |
Node |
React Node overiding the form to update the region (see RegionLabel ) |
Developers
Development
This project uses react-storybook. To begin developing run the following commands in the cloned repo.
yarn install
yarn storybook
A browser tab will automatically open with the project components.
Icons
Consult these icon repositories: