marker.js

marker.js 2 Documentation: Getting started

Getting started with marker.js 2

marker.js 2 is a JavaScript browser library to enable image annotation in your web applications. Add marker.js 2 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

Using a modern JavaScript/TypeScript environment? Just run:

npm install markerjs2
or
yarn add markerjs2

to add marker.js 2 to your project.

From CDN or local file

Just add a script tag referencing the markerjs2.js library.

<script src="https://unpkg.com/markerjs2/markerjs2.js"></script>

In this case, we are referencing the library through the UNPKG CDN. For other options, please see the Downloads section.

Usage

To add image annotation to your web application follow these 3 easy steps:

  1. Create an instance of markerjs2.MarkerArea by passing a target image reference to the constructor.
  2. Set an event handler for render event.
  3. Call the show() method.

Here's a simple example:

// skip this line if you are importing markerjs2 into the global space via the script tag import * as markerjs2 from 'markerjs2'; // create an instance of MarkerArea and pass the target image reference as a parameter let markerArea = new markerjs2.MarkerArea(document.getElementById('myimg')); // register an event listener for when user clicks OK/save in the marker.js UI markerArea.addEventListener('render', event => { // we are setting the markup result to replace our original image on the page // but you can set a different image or upload it to your server document.getElementById('myimg').src = event.dataUrl; }); // finally, call the show() method and marker.js UI opens markerArea.show();

See also

Check out the "all defaults" demo for the simplest implementation of marker.js 2 in action.

Next »