An image annotation tool for ai project that manual annotation for images, easy to use!
npm install @rockshin/react-image-annotationAn image annotation tool for ai project that manual annotation for images, easy to use!
> Big Thanks to tldraw !
npm
``bash`
npm install @rockshin/react-image-annotation tldraw
pnpm
`bash`
pnpm add @rockshin/react-image-annotation tldraw
Don't forget import styles import 'tldraw/tldraw.css';
`tsx
import { ImageAnnotationEditor } from '@rockshin/react-image-annotation'
import 'tldraw/tldraw.css'
function App() {
const images = [
{
id: '1',
src: 'https://example.com/image1.jpg',
annotations: [], // Initial annotations (optional)
},
]
const handleDone = ({ annotations, image }) => {
console.log('Annotations:', annotations)
console.log('Image:', image)
}
return (
Advanced Usage
$3
tsx
import { ImageAnnotationEditor } from '@rockshin/react-image-annotation'function AdvancedExample() {
const images = [
{
id: '1',
src: 'https://example.com/image1.jpg',
annotations: [
{
id: 'anno1',
x: 100,
y: 100,
width: 200,
height: 150,
rotation: 0,
label: '1',
timestamp: Date.now(),
metadata: {
color: 'red',
createdBy: 'user1',
modifiedAt: Date.now(),
version: 1,
tags: [],
isVerified: false,
},
},
],
},
{
id: '2',
src: 'https://example.com/image2.jpg',
annotations: [],
},
]
return (
initialImageIndex={0}
tools={{
eraser: { enabled: true },
text: { enabled: true },
}}
outputTriggerOn={{
created: true, // Trigger onDone when annotation is created
changed: true, // Trigger onDone when annotation is modified
deleted: true, // Trigger onDone when annotation is deleted
navigated: false, // Trigger onDone when image is navigated
}}
onAnnotationCreated={({ image, annotation }) => {
console.log('New annotation:', annotation)
}}
onAnnotationChange={({ image, annotation }) => {
console.log('Modified annotation:', annotation)
}}
onAnnotationDeleted={({ image, annotation }) => {
console.log('Deleted annotation:', annotation)
}}
onImageChange={({ index, image }) => {
console.log('Current image:', index, image)
}}
onImageLoadError={error => {
console.error('Image load error:', error)
}}
onDone={({ annotations, image }) => {
console.log('Final annotations:', annotations)
}}
/>
)
}
`Features
- šÆ Auto-incrementing numbered annotations (1-999)
- š¼ļø Multi-image support with navigation
- š Automatic reuse of deleted annotation numbers
- šØ Customizable toolbar with:
- Rectangle tool
- Text tool (optional)
- Eraser tool (optional)
- Hand tool for navigation
- š Comprehensive event callbacks
- š¼ļø Support for both URL and base64 image sources
- š Automatic image fitting with aspect ratio preservation
- ā” Real-time annotation updates
- š Locked base image to prevent accidental movement
Important Notes
1. Container Requirements:
- Parent container must have
2. Image Handling:
- Images automatically fit to viewport
- Original aspect ratio is maintained
- Base image is locked to prevent accidental movement
3. Annotation Limits:
- Supports up to 999 numbered annotations per image
- Numbers are automatically reused when annotations are deleted
4. Error Handling:
- Built-in error handling for image loading
- Retry mechanism for failed image loads
- Navigation options during error states
- Same as tldraw
Keep working on for this project now >>>
š§ Project under active development. Contributions welcome!