@aiwizo/image-annotation-canvas

NOTE! v0.0.x-alpha. Not production ready. Still needs testing and improvements.

Usage no npm install needed!

<script type="module">
  import aiwizoImageAnnotationCanvas from 'https://cdn.skypack.dev/@aiwizo/image-annotation-canvas';
</script>

README

Image Annotation Canvas

NOTE! v0.0.x-alpha. Not production ready. Still needs testing and improvements.

React canvas component for image annotation.

Installation

npm install @aiwizo/image-annotation-canvas

Basic usage

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

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

const canvasActions = actions(dispatch)

canvasActions.annotations.create({})
canvasActions.annotations.delete(id)
canvasActions.annotations.edit()

<ImageAnnotationCanvas
  imageSource="/some/url"
  state={state}
  dispatch={dispatch}
/>

Development

Run

npm run start

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

Coordinates

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",
};

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.