React Picture Annotation

A simple annotation component.

Install

# npm
npm install react-picture-annotation

# yarn
yarn add react-picture-annotation

Basic Example

const App = () => {
  const [pageSize, setPageSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });
  const onResize = () => {
    setPageSize({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const onSelect = selectedId => console.log(selectedId);
  const onChange = data => console.log(data);

  return (
    <div className="App">
      <ReactPictureAnnotation
        image="https://source.unsplash.com/random/800x600"
        onSelect={onSelect}
        onChange={onChange}
        width={pageSize.width}
        height={pageSize.height}
      />
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

ReactPictureAnnotation Props

| Name | Type | Comment | required | | --------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------ | -------- | | onChange | (annotationData: IAnnotation[]) => void | Called every time the shape changes. | √ | | onSelected | (id: string or null) => void | Called each time the selection is changed. | √ | | width | number | Width of the canvas. | √ | | height | number | Height of the canvas. | √ | | image | string | Image to be annotated. | √ | | inputElement | (value: string,onChange: (value: string) => void,onDelete: () => void) => React.ReactElement; | Customizable input control. | X | | annotationData | Array<IAnnotation> | Control the marked areas on the page. | X | | annotationStyle | IShapeStyle | Control the mark style | X | | selectedId | string or null | Selected markId | X | | scrollSpeed | number | Speed of wheel zoom, default 0.0005 | X | | marginWithInput | number | Margin between input and mark, default 1 | X | | defaultAnnotationSize | number[] | Size for annotations created by clicking. | X |

IShapeStyle

ReactPictureAnnotation can be easily modified the style through a prop named annotationStyle

export const defaultShapeStyle: IShapeStyle = {
  /** text area **/
  padding: 5, // text padding
  fontSize: 12, // text font size
  fontColor: "#212529", // text font color
  fontBackground: "#f8f9fa", // text background color
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif",
  
  /** stroke style **/
  lineWidth: 2, // stroke width
  shapeBackground: "hsla(210, 16%, 93%, 0.2)", // background color in the middle of the marker
  shapeStrokeStyle: "#f8f9fa", // shape stroke color
  shadowBlur: 10, // stroke shadow blur
  shapeShadowStyle: "hsla(210, 9%, 31%, 0.35)", // shape shadow color
  
  /** transformer style **/
  transformerBackground: "#5c7cfa",
  transformerSize: 10
};

IAnnotation

{
  id:"to identify this shape",    // required,
  comment:"string type comment",  // not required
  mark:{
    type:"RECT",                  // now only support rect

    // The number of pixels in the upper left corner of the image
    x:0,
    y:0,

    // The size of tag
    width:0,
    height:0
  }
}

Licence

MIT License

How To Contribute

This repo uses semantic release. By running npm run commit and merging commits into master branch, travis will automatically trigger release.

Thanks all your great contributions.