marker.js 2 - Image Annotation

2.32.7 · deprecated · verified Sun Apr 19

marker.js 2 is a JavaScript browser library designed to enable image annotation functionality within web applications. It allows users to mark up, highlight, and add comments to images directly in the browser, and then save or process the annotated results. While still supported for some time, this version (2.x, with current stable being 2.32.7) is officially deprecated in favor of marker.js 3, which is the focus of all future development. Releases for marker.js 2 were frequent, often several patch versions per month, but this cadence is expected to slow significantly as focus shifts to v3. Its key differentiator was providing a complete, out-of-the-box UI for image annotation with various tools.

Common errors

```
TypeError: MarkerArea is not a constructor
```
cause Attempting to import `MarkerArea` as a named export from `markerjs2` instead of accessing it via the `markerjs2` namespace object.

fix Change `import { MarkerArea } from 'markerjs2';` to `import * as markerjs2 from 'markerjs2';` and then use `new markerjs2.MarkerArea(...)`.
```
Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
```
cause Attempting to `toDataURL` an image that was loaded from a different origin without CORS headers, making the canvas 'tainted'.

fix Ensure that images loaded from external origins are served with appropriate CORS (Cross-Origin Resource Sharing) headers, specifically `Access-Control-Allow-Origin: *` or your domain. Alternatively, proxy the images through your own server.
```
ReferenceError: document is not defined
```
cause Trying to run `markerjs2` in a Node.js environment without a browser DOM available. `markerjs2` is a browser-side library.

fix Ensure `markerjs2` code is executed only in a browser environment or within a testing framework that provides a mocked DOM (e.g., JSDOM).

Warnings

deprecated marker.js 2 is officially deprecated. While still supported, all future development and new features will be focused on marker.js 3. Users are strongly advised to migrate to version 3 for long-term stability and access to the latest improvements.
Fix: Plan and execute migration to marker.js 3. Refer to the official markerjs.com documentation for migration guides.
gotcha The default license for marker.js 2 is 'Linkware'. This means the UI will display a small link back to the marker.js 2 website, which must be retained unless an alternative commercial license is purchased.
Fix: Ensure the required attribution link remains visible in your application's UI, or purchase an alternative license from markerjs.com if this is not feasible.
gotcha When importing using ESM syntax, the library provides a namespace object (e.g., `markerjs2`), and components like `MarkerArea` are properties of this object, not direct named exports. Attempting a direct named import will fail.
Fix: Use `import * as markerjs2 from 'markerjs2';` and then access components as `markerjs2.MarkerArea`.

Install

npm install markerjs2 npm
yarn add markerjs2 yarn
pnpm add markerjs2 pnpm

Imports

MarkerArea
wrong:
```
import { MarkerArea } from 'markerjs2';
```
correct:
```
import * as markerjs2 from 'markerjs2';
const markerArea = new markerjs2.MarkerArea(...);
```
The library exports a namespace `markerjs2` containing `MarkerArea` and other components, not named exports directly at the root. Access `MarkerArea` via `markerjs2.MarkerArea`.
Type definitions
wrong:
```
import { MarkerArea } from 'markerjs2';
```
correct:
```
import type { MarkerArea } from 'markerjs2/types/MarkerArea';
```
While types are shipped, direct type imports should typically target the specific path within `types` if you need fine-grained control or are using a TypeScript version that requires it. For most users, `import * as markerjs2 from 'markerjs2';` will provide correct type inference for `markerjs2.MarkerArea`.
CommonJS (Node.js)
wrong:
```
const { MarkerArea } = require('markerjs2');
```
correct:
```
const markerjs2 = require('markerjs2');
const markerArea = new markerjs2.MarkerArea(...);
```
CommonJS `require` is supported, but similar to ESM, the main export is a namespace object, not direct named properties. The library is primarily browser-oriented.

Quickstart

This quickstart demonstrates how to initialize `marker.js 2` on an existing image element, open its annotation UI, and handle the `render` event to update the image source with the annotated version.

import * as markerjs2 from 'markerjs2';

// Imagine an image element exists in the DOM
document.body.innerHTML = '<img id="myimg" src="https://picsum.photos/800/600?random=1" alt="Image to annotate" style="max-width: 100%;" />';

const imgElement = document.getElementById('myimg');

if (imgElement) {
  let markerArea = new markerjs2.MarkerArea(imgElement);

  markerArea.addEventListener('render', (event) => {
    // Replace the original image with the annotated one
    // In a real app, you might upload event.dataUrl to a server
    // or display it in a new element.
    if (imgElement instanceof HTMLImageElement) {
      imgElement.src = event.dataUrl;
      console.log('Annotation rendered. Data URL length:', event.dataUrl.length);
    }
  });

  // Open the marker.js UI after a short delay to ensure image loads
  setTimeout(() => {
    markerArea.show();
  }, 500);
} else {
  console.error('Image element with ID "myimg" not found.');
}

view raw JSON →