img-notate — Add annotations to the images on your web apps

img-notate is a JavaScript browser library to enable annotations for the images in your web applications. Add img-notate to your web app and instantly enable users to annotate and mark up images. You can save, share or otherwise process the results.

Installation

npm install img-notate

or

yarn add img-notate

Usage

To add img-notate to your web application follow just 1 easy step:

1. Create an instance of ImgNotate.init by passing a target image reference & settings to the constructor.

Here's a simple example:

// skip this line if you are importing img-notate into the global space via the script tag
import { ImgNotate } from 'img-notate';

// create an instance of imgNotateInit and pass the target image reference & settings as a parameters
const imgNotateInit = ImgNotate.init(
  document.getElementById('myImg'), // image reference
  {
    targetRoot: document.getElementById('bb-editor-container'), // Parent Element (optional)
    hideToolbar: true, // To hide the toolbar (optional)
    buttonMappings: [  // Button Mappings (optional but recommended if toolbar is hidden)
      {
        elementId: 'undoImageLIb', // Button ID
        element: document.getElementById('undoImageLIb'), // Button Element (optional if elementId is provided. If both are provided, elementId will be considered (element will be ignored))
        action: 'Undo',  // Action for button
      },
      {
        elementId: 'redoImageLIb',
        action: 'Redo',
      },
      {
        elementId: 'arrowImageLIb',
        action: 'ArrowMarker',
      },
      {
        elementId: 'frameImageLIb',
        action: 'FrameMarker',
      },
      {
        elementId: 'freeHandImageLIb',
        action: 'FreehandMarker',
      },
      {
        elementId: 'textImageLIb',
        action: 'TextMarker',
      },
    ],
  }
);