Image-annotations NPM

image-annotations

This package is a wrapper on top of openseadragon and paperjs.

OpenSeadragon

An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.

Refrence - http://openseadragon.github.io/.

Paper js

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.

Refrence - http://paperjs.org/about/

Features

Has the ability to draw/annotate on top of openseadragon canvas, without effecting ZOOM/ROTATION/PANNING.
Has helper functions to easily manage all the annotations and draw those saved annotaitons when required.
Has three types of annotations support LOOPED/FREEHAND/RECTANGLE.
Has all required hooks for annotations.
Easily customizable with this.viewer and this.paperScope properties using all openseadragon/paper js configurations.
Written in pure javascript, compatible with all mordern frameworks and legacy js projects.

How to install

npm i -S image-annotations

You can integrate into your application with few steps:

Using import/export: import { Viewer } from 'image-annotations';

const viewerInstance = new Viewer(
  // Options
  {
    id: STRING, // required Viewer Element id
    paperElementId: STRING, // paper js element id
    tileSources: {
      type: 'image',
      url: 'some image url',
      crossOriginPolicy: 'Anonymous',
    }, // tileSources has multiple options you can refer [http://openseadragon.github.io/](http://openseadragon.github.io/)
    showNavigator: false,
    disableZoom: Boolean,
    disableRotate: Boolean,
    disablePan: Boolean,
    enableAnnotations: Boolean,
    navigatorPosition: Boolean, // 'BOTTOM_LEFT', 'BOTTOM_RIGHT', 'TOP_RIGHT', 'TOP_LEFT'
    showNavigator: Boolean,
    useCanvas: Boolean, // Used for browser.platform compatibility, if image size is grater then 2mb,
  },
  // Events
  {
    onAnnotationHover: (data, position) => {
      console.log('annotation hover', data, position); // Helped to toggle an information popover/dropdown
    },
    onAnnotationDrawn: (data, position) => {
      console.log('annotation drawn', data, position); // Helped to toggle an information popover/dropdown
      // viewerInstance.updatePathSettings(data); - We can update path settings by updating annotation.path[strokeColor/fillColor/strokeWidth/opacity]
      // viewerInstance.onSaveAnnotation(savedData); - we should call this when POST call is made and resolved
      // viewerInstance.onUpdateAnnotation(updatedData); - we should call this when PUT call is made and resolved
    },
    onAnnotationError: data => {
      console.log('annotation error', data);
    },
    onSuccess: data => {
      console.log('viewer loaded', data);
    },
    onError: data => {
      console.log('viewer load fail', data);
    },
  },
 );