Rendering annotations

The Renderer class in marker.js 3 allows you to rasterize annotations created with MarkerArea into static images. The rendered output can include both the original image and annotations, or just the annotation layer.

Basic usage

First import the required classes:

import { MarkerArea, Renderer } from '@markerjs/markerjs3';
Copy

To render annotations:

1. Create a new Renderer instance
2. Set the target image
3. Call rasterize with the annotation state

const renderer = new Renderer();
// original image
renderer.targetImage = targetImage;

const renderedImageUrl = await renderer.rasterize(markerArea.getState());
// use the rendered image
const img = document.createElement('img');
img.src = renderedImageUrl;
document.body.appendChild(img);
Copy

Customization

The Renderer!Renderer class provides several options to customize the output:

• naturalSize - render at original image size
• imageType - output format ('image/png', 'image/jpeg', etc)
• imageQuality - quality setting for JPEG (0-1)
• markersOnly - render only annotations without the image
• width/height - specify output dimensions

const renderer = new Renderer();
// configure renderer
renderer.naturalSize = true; // render at full image size
renderer.imageType = 'image/jpeg';
renderer.imageQuality = 0.8;
renderer.markersOnly = false;

// render
const renderedImage = await renderer.rasterize(state);
Copy

See also

• Renderer for complete API reference.