Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/universaldatatool/react-image-annotate
Create image annotations. Classify, tag images with polygons, bounding boxes or points.
https://github.com/universaldatatool/react-image-annotate
bounding-boxes hacktoberfest image-annotations polygons
Last synced: 6 days ago
JSON representation
Create image annotations. Classify, tag images with polygons, bounding boxes or points.
- Host: GitHub
- URL: https://github.com/universaldatatool/react-image-annotate
- Owner: UniversalDataTool
- License: mit
- Created: 2019-01-15T17:59:24.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-08T09:11:27.000Z (8 months ago)
- Last Synced: 2024-10-29T20:24:20.053Z (3 months ago)
- Topics: bounding-boxes, hacktoberfest, image-annotations, polygons
- Language: JavaScript
- Homepage:
- Size: 85.2 MB
- Stars: 406
- Watchers: 18
- Forks: 177
- Open Issues: 87
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Image Annotate
[](https://badge.fury.io/js/react-image-annotate)
The best image/video annotation tool ever. [Check out the demo here](https://universaldatatool.github.io/react-image-annotate/). Or the [code sandbox here](https://codesandbox.io/s/react-image-annotate-example-38tsc?file=/src/App.js:0-403).
## Sponsors
[](https://wao.ai)
## Features
- Simple input/output format
- Bounding Box, Point and Polygon Annotation
- Zooming, Scaling, Panning
- Multiple Images
- Cursor Crosshair
## Usage
`npm install react-image-annotate`
```javascript
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.
```css
@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`](https://github.com/waoai/react-image-annotate/blob/master/src/RegionLabel/index.js)) | |
| `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](https://storybook.js.org/). 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](https://github.com/waoai/react-image-annotate/wiki/Setup-for-Development).
### Icons
Consult these icon repositories:
- [Material Icons](https://material.io/tools/icons/)
- [Font Awesome Icons](https://fontawesome.com/icons?d=gallery&m=free)