https://github.com/nextml-code/image-annotation-canvas

React Image Annotation Canvas Component
https://github.com/nextml-code/image-annotation-canvas

Last synced: 1 day ago
JSON representation

React Image Annotation Canvas Component

• Host: GitHub
• URL: https://github.com/nextml-code/image-annotation-canvas
• Owner: nextml-code
• License: apache-2.0
• Created: 2021-05-20T15:21:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-27T10:05:10.000Z (about 2 years ago)
• Last Synced: 2024-12-17T10:48:00.103Z (29 days ago)
• Language: JavaScript
• Size: 629 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Image Annotation Canvas

**NOTE! v0.x.x-beta. Not production ready. Still needs testing and improvements.**

React canvas component for image annotation.

## Installation

```

npm install @aiwizo/image-annotation-canvas

```

## Basic usage

```JSX

import { useReducer } from 'react';

import ImageAnnotationCanvas, { reducer, initialState, actions } from '@aiwizo/image-annotation-canvas';

const [state, dispatch] = useReducer(reducer(initialState));

const canvasActions = actions(state,dispatch)

canvasActions.annotations.set([{coordinates: [{x: 0.1, y: 0.15}]}])

 { /* return a bool calculated from the state */ }}

  config={{

    minCoordinates: 3, // polygons have a minimum of 3 coordinates

    bbox: {

      display: true,

      lineDash: [], // html canvas line dash

      lineWidth: 3, // html canvas line width

    },

    polygon: {

      display: false,

      lineDash: [10], // html canvas line dash

      lineWidth: 10, // html canvas line width

    },

  }}

/>

```

### Annotations

```javascript

{

  // uuid

  id: '7772FF32-052F-4255-9210-E29C99AC3BA6',

  // Ordered array of coordinates {x,y}

  // Where x and y should be the relative

  // coordinates 0 < x, y < 1 of the image dimensions

  coordinates: [

    { x: 0.1, y: 0.3 },

    { x: 0.2, y: 0.35 },

  ];

  // Determines if the annotation should

  // be shown on the canvas

  // ture | false

  visible: true,

}

```

### Coordinates

```javascript

const coordinate = {

  // Relative x, between 0 and 1

  x: 0.2,

  // Relative y, between 0 and 1

  y: 0.3,

  // Some uuid

  id: "2DDA14BD-5394-4315-BC09-1AF2F64F88E3",

};

```

### Canvas Actions

```javascript

// Set the list of annotations in the

// canvas state

actions.annotations.set([

  {

    /* Annotation */

  },

]);

```

```javascript

// Edit single annotation

actions.annotation.update({

  // Required for the update to work

  id,

  ...otherFields,

});

```

```javascript

// Select one annotation for editing

actions.annotation.select(id);

```

```javascript

// Delete one annotation

actions.annotation.delete(id);

```

## Development

Run

```

npm run start

```

from root folder to start the storybook interface with the canvas component.

## Storybook issues

Its not possible to run

```

npm install

```

from scratch due to some issue with storybook and React 17.

A workaround is

```

npx sb@latest upgrade && npm i

```

## Contribution

Please let us know if you have any issues. Put an issue here on github and we'll do our best to solve it.