Home
Categories
Image
React Image Annotation Component with Fabric.js – mark-my-image

React Image Annotation Component with Fabric.js – mark-my-image

gaurav8trivedi12 Added 3 weeks ago
Live Demo Download Source Code

Description:

mark-my-image is a React component library that enables developers to add annotation capabilities to images within web applications.

The library wraps Fabric.js in a React-friendly interface and provides tools for drawing, highlighting, adding shapes, inserting text, and overlaying images on a canvas.

Features

  • 🎨 Drawing Tools: Freehand pen and highlighter tools with customizable colors and stroke widths.
  • ➡ī¸ Precision Markup: Lines and arrows for creating directional indicators and measurements.
  • 🔷 Shape Support: Rectangles and circles in both filled and outlined styles.
  • ✏ī¸ Text Annotations: Direct text insertion and editing on the canvas.
  • đŸ–ŧī¸ Image Overlay: Upload and position additional images on top of the base annotation layer.
  • 🎨 Tailwind Integration: Color palette based on Tailwind CSS classes for consistent styling.
  • ↩ī¸ History Management: Full undo and redo support for all annotation actions.
  • đŸŽ¯ Object Manipulation: Select, move, scale, and rotate any annotation element.
  • 🔧 Draggable Toolbar: Reposition the toolbar anywhere on the screen for optimal workflow.
  • 💾 Multiple Export Formats: Save annotated images as PNG, JPEG, or SVG files.

Preview

image-annotation-fabric

Use Cases

  • Bug Reporting Systems: Allow users to mark screenshots with visual feedback for issue tracking.
  • Design Collaboration: Enable team members to provide visual comments on design mockups.
  • Educational Materials: Create instructional content with annotated diagrams and images.
  • Content Management: Build interfaces for adding graphical elements to images before publication.

How To Use It

1. install the mark-my-image package from npm.

npm install mark-my-image

2. Import the AnnotationTool component into your React application. You will also need to use the useRef hook to access the component’s methods.

import React, { useRef } from "react";
import { AnnotationTool } from "mark-my-image";
function AnnotationComponent() {
  const annotationToolRef = useRef(null);
  const imageUrl = "/path/to/your/image.png";
  const exportImage = () => {
    const dataUrl = annotationToolRef.current?.getCanvasDataURL("png");
    if (dataUrl) {
      const link = document.createElement("a");
      link.href = dataUrl;
      link.download = "annotated-image.png";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  };
  return (
    <div>
      <div style={{ width: "800px", height: "600px" }}>
        <AnnotationTool ref={annotationToolRef} imageSource={imageUrl} />
      </div>
      <button onClick={exportImage} style={{ marginTop: "10px" }}>
        Export as PNG
      </button>
    </div>
  );
}
export default AnnotationComponent;

In this example, the AnnotationTool is rendered with a specified image source. A button is included to trigger the exportImage function, which retrieves the annotated image data as a PNG and initiates a download.

Related Resources

  • Fabric.js: The underlying canvas library that powers mark-my-image. Provides the object model and rendering engine.
  • Tailwind CSS: The utility CSS framework used for styling. Useful if you want to extend or customize the component appearance.
  • Radix UI: Provides accessible UI primitives used in the toolbar. Reference for building custom controls.

FAQs

Q: Can I use mark-my-image with TypeScript?
A: Yes. The library includes TypeScript definitions for all props and ref methods. Import types directly from the package for type safety in your application.

Q: How do I save annotations to a server instead of downloading?
A: Get the data URL from getCanvasDataURL and send it to your backend. Convert the data URL to a Blob using fetch(dataUrl).then(r => r.blob()) before uploading to most server endpoints.

Q: Does the component work with server-side rendering?
A: The component requires a browser environment because Fabric.js uses the Canvas API. Wrap it in a dynamic import with ssr: false in Next.js or similar frameworks.

Q: What image formats does the imageSource prop support?
A: The component supports all image formats that HTML canvas can render. This includes PNG, JPEG, GIF, WebP, and SVG when provided as URLs, Files, Blobs, or data URIs.

Q: Is it possible to customize the tools in the toolbar?
A: Yes, you can specify which tools are available by passing an array of tool names to the enabledTools prop.

Tags:

Add Comment