Skip to content

Empower your React apps with robust image/document annotation capabilities! πŸš€ Supports bounding boxes, polygons, points, zooming, dragging, and color-coded categorization. Built on FabricJS for ultimate customization. Perfect for data labeling and interactive editing.

License

Notifications You must be signed in to change notification settings

dansreis/react-canvas-annotator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-canvas-annotator

NPM npm Build Status

react-canvas-annotator

Image/Document Annotator Component for React Applications

Powered by FabricJS canvas at its core, this component empowers users to seamlessly integrate annotations such as bounding boxes, polygons, and points onto images or documents. By exposing canvas interactions, it provides a foundation for constructing larger and more complex components.

Check out the demo here.

Features

  • Annotations on images
  • Polygon Annotation
  • Image zoom and drag
  • Bounding Box Annotation
  • Highlight by ID
  • Categorize annotations with colors and labels

Screenshot of Annotator

Installation

To install the package, use the following command:

npm install @dansreis/react-canvas-annotator

Usage

Here's a basic example of how to use the react-canvas-annotator component in a React application:

import React, { useRef } from "react";
import Board from "react-canvas-annotator";
import { CanvasObject } from "../types";

const ITEMS: CanvasObject[] = [
  {
    id: "1",
    category: "category1",
    color: "green",
    value: "βŒ€42",
    coords: [
      { x: 133, y: 460 },
      { x: 206, y: 460 },
      { x: 206, y: 493 },
      { x: 133, y: 493 },
    ],
  },
  {
    id: "2",
    category: "category2",
    color: "green",
    value: "38",
    coords: [
      { x: 150, y: 1064 },
      { x: 182, y: 1064 },
      { x: 182, y: 1111 },
      { x: 150, y: 1111 },
    ],
  },
  {
    id: "3",
    category: "category3",
    color: "green",
    value: "9",
    coords: [
      { x: 235, y: 1207 },
      { x: 266, y: 1207 },
      { x: 266, y: 1226 },
      { x: 235, y: 1226 },
    ],
  },
  // ... other items
];

const App = () => {
  const ref = useRef(null);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "800px",
        height: "500px",
        border: "1px solid black",
      }}
    >
      <Board
        ref={ref}
        image={{ name: "holder-min", src: "holder-min.jpg" }}
        items={ITEMS}
      />
    </div>
  );
};

export default App;

Props

All of the following properties can be defined on the Board component:

Prop Type Description Default
items CanvasObject[] Array of annotation objects to be displayed on the canvas. []
image { name: string; src: string } * Object containing the name and source of the image to be annotated.
initialStatus { draggingEnabled?: boolean; currentZoom?: number; scaleRatio?: number; } Initial status settings for dragging, zoom level, and scale ratio. {}
onResetZoom () => void Callback function to handle zoom reset action.
onZoomChange (currentZoom: number) => void Callback function triggered when the zoom level changes.
onLoadedImage ({ width, height }: { width: number; height: number; }) => void Callback function triggered when the image has been successfully loaded, providing its dimensions.

(Properties marked with * are required)

Development

To begin developing, run the following commands in the cloned repository:

  1. npm install
  2. npm run storybook

Then navigate to http://localhost:6006/ and start testing.

See more details in the contributing guidelines.

Icon Libraries

Consult these icon repositories:

Contributions

Contributions are welcome! Please see the contributing guidelines for more information.

Donations

If you find this project helpful and would like to support its development, please consider buying me a coffee:

Buy Me A Coffee

License

MIT Β© Daniel Reis

Feel free to collaborate.

About

Empower your React apps with robust image/document annotation capabilities! πŸš€ Supports bounding boxes, polygons, points, zooming, dragging, and color-coded categorization. Built on FabricJS for ultimate customization. Perfect for data labeling and interactive editing.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages