React library to annotate the images
npm i react-image-annotorious
Import AnnoReact , AnnoImage component from react-image-annotorious.
import { AnnoReact, AnnoImage } from 'react-image-annotorious'
Generate a context menu to display the options when you annotate.
getContextSource() {
return ["Select a category", "Car", "Bus", "autorickshaw", "Bike"];
}
Write AnnoReact tag and pass context source from above created method
<AnnoReact contextSource={this.getContextSource()}/>
Write AnnoImage tag and give source of the image url to imageSource
attribute and give some unique id to imageId
attribute i.e., no two images should have same image id
<AnnoImage imageSource="https://st2.depositphotos.com/1915171/8651/v/950/depositphotos_86518008-stock-illustration-transport-icons-car-bike-bus.jpg" imageid="0"></AnnoImage>
Please find src
folder in the following repo https://github.com/burlarajesh/react-image-annotorious-demo/tree/master
You are free to bug me at burla.rajesh2k8@gmail.com :)