{"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.","language":"javascript","status":"deprecated","last_verified":"Sun Apr 19","install":{"commands":["npm install markerjs2"],"cli":null},"imports":["import * as markerjs2 from 'markerjs2';\nconst markerArea = new markerjs2.MarkerArea(...);","import type { MarkerArea } from 'markerjs2/types/MarkerArea';","const markerjs2 = require('markerjs2');\nconst markerArea = new markerjs2.MarkerArea(...);"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import * as markerjs2 from 'markerjs2';\n\n// Imagine an image element exists in the DOM\ndocument.body.innerHTML = '<img id=\"myimg\" src=\"https://picsum.photos/800/600?random=1\" alt=\"Image to annotate\" style=\"max-width: 100%;\" />';\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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}