React Image Annotate

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

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 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");

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.

Icons

Consult these icon repositories:

• Material Icons
• Font Awesome Icons