The component features a variety of customization options, including the ability to select fonts, adjust text size and color-picker. Users can also add text to their image by selecting the text icon and typing out their desired message.

In addition to text, users can add circles to their image by selecting the circle icon. They can also make freehand drawings using the drawing tool, and undo or redo any changes as needed.

Once the user is satisfied with their changes, they can download the modified image and close the React Image Annotate. With its intuitive interface and flexible customization options, the React Image Annotate is an essential tool for any application that requires image annotating or markup functionality.

Installation

npm i react-image-annotate-tool

Usage

import DrawingBoard from 'react-image-annotate-tool';

  return (
     <DrawingBoard/>
  )

Screenshot

Demo Video

https://www.youtube.com/watch?v=J5HSdAlJqtw

Features

• Select image file.
• select fonts for selecting various fonts.
• select size for changing the size of the text and circle.
• color-picker for selecting colors.
• select Text for adding the texts to image.
• select Circle for adding cirlces to image.
• select Pencil for free hand drawing.
• Undo changes.
• Redo changes.
• Download image.
• close.

License

MIT