Awesome

React Image Annotate

Fork of react-image-annotate - The best image/video annotation tool ever. Check out the demo here. Or the code sandbox here.

Implemented features in fork:

added typescript
updated react to v.18

Features

Simple input/output format
Bounding Box, Point and Polygon Annotation
Zooming, Scaling, Panning
Multiple Images
Cursor Crosshair

Screenshot of Annotator

Usage

npm i @idapgroup/react-image-annotate

import React from "react";
import ReactImageAnnotate from "@idapgroup/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.
`regionTagSingleSelection`	`boolean`	Allowed select only one tag for image.
`regionAllowedActions`	`{remove?:boolean, lock?:boolean, visibility?: boolean`	Allowed actions for region in regions list.	Everything.
`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 add react react-dom
For production build need remove react and react-dom packages and run yarn build - it fix the issue with react and react-dom versions in your project.

A browser tab will automatically open with the project components.

See more details in the contributing guidelines.

Icons

Consult these icon repositories: