markerjs2

library2.32.7jsnpmunverified

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.

web-framework ai-ml

npm install markerjs2

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · MARKERJS2

markerjs2

web-frameworkjavascriptv2.32.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MarkerArea

✓ import * as markerjs2 from 'markerjs2'; const markerArea = new markerjs2.MarkerArea(...);

✗ import { MarkerArea } from 'markerjs2';

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

✓ import type { MarkerArea } from 'markerjs2/types/MarkerArea';

✗ import { MarkerArea } from 'markerjs2';

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)

✓ const markerjs2 = require('markerjs2'); const markerArea = new markerjs2.MarkerArea(...);

✗ const { MarkerArea } = require('markerjs2');

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.

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.'); }

Debug

Known issues

deprecatedmarker.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.

affects: >=2.0.0

gotchaThe 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.

affects: >=2.0.0

gotchaWhen 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`.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: MarkerArea is not a constructor

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.

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

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).

Upgrade

Version history

2.32.7latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

3 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/ailon/markerjs2 ↗

packagehttps://www.npmjs.com/package/markerjs2 ↗

homepagehttps://markerjs.com ↗