React Image Annotate Save
Create image annotations. Classify, tag images with polygons, bounding boxes or points.
Project README
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
Usage
npm install react-image-annotate
import React from "react";
import ReactImageAnnotate from "react-image-annotate";
const App = () => (
<ReactImageAnnotate
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.
@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<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. | |
RegionEditLabel |
Node |
React Node overriding the form to update the region (see RegionLabel) |
|
allowComments |
boolean |
Show a textarea to add comments on each annotation. | false |
hidePrev |
boolean |
Hide Previous Image button from the header bar. |
false |
hideNext |
boolean |
Hide Next Image button from the header bar. |
false |
hideClone |
boolean |
Hide Clone button from the header bar. |
false |
hideSettings |
boolean |
Hide Settings button from the header bar. |
false |
hideFullScreen |
boolean |
Hide FullScreen/Window button from the header bar. |
false |
hideSave |
boolean |
Hide Save button from the header bar. |
false |
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.
See more details in the contributing guidelines.
Icons
Consult these icon repositories:
Open Source Agenda is not affiliated with "React Image Annotate" Project. README Source: UniversalDataTool/react-image-annotate
Stars
374
Open Issues
83
Last Commit
1 month ago
Repository
License
Open Source Agenda Badge
