simple-annotate-zsj

A very simple npm react component library that allows people to annotate an image with lines.

A typical usage of this component is to allow doctors to measure hence compare the size of different components of scan images (shown as below).

Features

• Line annotation with number of pixels as unit
• Zooming, Scaling, Panning

How to Interact

• To add a line, click on the plus icon at the top
• To remove the most recent added line, click on the minus icon at the top
• To move the floating buttons to the other side of the image in case they get in the way, click on right arrow or left arrow icon at the top

Example

First install the react component using NPM:

npm install react-image-annotate

Then simple replace your src/App.js with the following:

import { Annotator } from "simple-annotate-zsj";

function App() {
  return (
    <div className="App">
      <Annotator
        themeColor={"#31ebe8"}
        contrastColor={"navy"}
        maxZoomInFactor={15}
        lineWidth={3}
        dotSize={4}
        componentWidth="100vw"
        componentHeight="100vh"
        imgSrc="https://t3.ftcdn.net/jpg/03/23/39/00/360_F_323390028_qAoFjhZKcjFk2qL56nLObetE6sSbtmMa.jpg"
      />
    </div>
  );
}

export default App;

Props

All of the following properties can be defined on the Annotator...