React Image annotation project based on tldraw

An image annotation tool for ai project that manual annotation for images, easy to use!

Big Thanks to tldraw !

install

npm

npm install @rockshin/react-image-annotation tldraw

pnpm

pnpm add @rockshin/react-image-annotation tldraw

Easy to use:

Don't forget import styles import 'tldraw/tldraw.css';

import { ImageAnnotationEditor } from '@rockshin/react-image-annotation'
import 'tldraw/tldraw.css'
const App = () => {
  return (
    <div className="content">
      <div>
        <ImageAnnotationEditor
          images={[
            {
              src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
              annotations: [],
            },
          ]}
          onDone={annotations => {
            console.log(annotations)
          }}
        />
      </div>
    </div>
  )
}

export default App

Features

support next and prev image handler

==Keep working on for this project now >>>==