The best image/video annotation tool ever. Check out the demo here.
- Simple input/output format
- Bounding Box, Point and Polygon Annotation
- Zooming, Scaling, Panning
- Multiple Images
- Cursor Crosshair
npm install react-image-annotate
import ReactImageAnnotate from "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.
@import url("https://rsms.me/inter/inter.css");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. |
This project uses react-storybook. To begin developing run the following commands in the cloned repo.
yarn installyarn storybook
A browser tab will automatically open with the project components.
Consult these icon repositories:
