Become an AceSign inSign up
UniversalDataTool/ react-image-annotate (v1.8.0) 9 months ago
JavaScript CSS HTML Shell bounding-boxes
View on GitHub
Need help with react-image-annotate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

UniversalDataTool
232 Stars 81 Forks MIT License 403 Commits 73 Opened issues

Description

Create image annotations. Classify, tag images with polygons, bounding boxes or points.

Services available

!
?

Need anything else?

Contributors list

React Image Annotate

npm version

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

Sponsors

wao.ai sponsorship image

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
import React from "react";
import ReactImageAnnotate from "react-image-annotate";


const App = () => (
  
);


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
| 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
) | | | 
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.

  1. yarn install
  2. yarn storybook

A browser tab will automatically open with the project components.

See more details in the contributing guidelines.

Icons

Consult these icon repositories:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.