{"id":11268,"library":"markerjs2","title":"marker.js 2 - Image Annotation","description":"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.","status":"deprecated","version":"2.32.7","language":"javascript","source_language":"en","source_url":"https://github.com/ailon/markerjs2","tags":["javascript","annotate","mark","highlight","image","photo","graphics","typescript"],"install":[{"cmd":"npm install markerjs2","lang":"bash","label":"npm"},{"cmd":"yarn add markerjs2","lang":"bash","label":"yarn"},{"cmd":"pnpm add markerjs2","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library exports a namespace `markerjs2` containing `MarkerArea` and other components, not named exports directly at the root. Access `MarkerArea` via `markerjs2.MarkerArea`.","wrong":"import { MarkerArea } from 'markerjs2';","symbol":"MarkerArea","correct":"import * as markerjs2 from 'markerjs2';\nconst markerArea = new markerjs2.MarkerArea(...);"},{"note":"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`.","wrong":"import { MarkerArea } from 'markerjs2';","symbol":"Type definitions","correct":"import type { MarkerArea } from 'markerjs2/types/MarkerArea';"},{"note":"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.","wrong":"const { MarkerArea } = require('markerjs2');","symbol":"CommonJS (Node.js)","correct":"const markerjs2 = require('markerjs2');\nconst markerArea = new markerjs2.MarkerArea(...);"}],"quickstart":{"code":"import * as markerjs2 from 'markerjs2';\n\n// Imagine an image element exists in the DOM\ndocument.body.innerHTML = '\"Image';\n\nconst imgElement = document.getElementById('myimg');\n\nif (imgElement) {\n let markerArea = new markerjs2.MarkerArea(imgElement);\n\n markerArea.addEventListener('render', (event) => {\n // Replace the original image with the annotated one\n // In a real app, you might upload event.dataUrl to a server\n // or display it in a new element.\n if (imgElement instanceof HTMLImageElement) {\n imgElement.src = event.dataUrl;\n console.log('Annotation rendered. Data URL length:', event.dataUrl.length);\n }\n });\n\n // Open the marker.js UI after a short delay to ensure image loads\n setTimeout(() => {\n markerArea.show();\n }, 500);\n} else {\n console.error('Image element with ID \"myimg\" not found.');\n}","lang":"typescript","description":"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."},"warnings":[{"fix":"Plan and execute migration to marker.js 3. Refer to the official markerjs.com documentation for migration guides.","message":"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.","severity":"deprecated","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use `import * as markerjs2 from 'markerjs2';` and then access components as `markerjs2.MarkerArea`.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `import { MarkerArea } from 'markerjs2';` to `import * as markerjs2 from 'markerjs2';` and then use `new markerjs2.MarkerArea(...)`.","cause":"Attempting to import `MarkerArea` as a named export from `markerjs2` instead of accessing it via the `markerjs2` namespace object.","error":"TypeError: MarkerArea is not a constructor"},{"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.","cause":"Attempting to `toDataURL` an image that was loaded from a different origin without CORS headers, making the canvas 'tainted'.","error":"Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."},{"fix":"Ensure `markerjs2` code is executed only in a browser environment or within a testing framework that provides a mocked DOM (e.g., JSDOM).","cause":"Trying to run `markerjs2` in a Node.js environment without a browser DOM available. `markerjs2` is a browser-side library.","error":"ReferenceError: document is not defined"}],"ecosystem":"npm"}