marker.js 3 Documentation
    Preparing search index...

    Class Renderer

    Renderer is used to rasterize annotations.

    To render the annotation as a static image you use Renderer.

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

    Just create an instance of it and pass the annotation state to the rasterize() method:

    const renderer = new Renderer();
    renderer.targetImage = targetImg;
    const dataUrl = await renderer.rasterize(markerArea.getState());

    const img = document.createElement('img');
    img.src = dataUrl;

    someDiv.appendChild(img);
    Index

    Accessors

    defaultFilter targetHeight targetImage targetWidth

    Constructors

    constructor

    Methods

    addDefs rasterize registerMarkerType restoreState

    Properties

    height? imageQuality? imageType markers markersOnly markerTypes naturalSize width?

    Accessors

    • get defaultFilter(): undefined | string

      Returns the default SVG filter for the created markers.

      Returns undefined | string

      3.2.0

    • set defaultFilter(value: undefined | string): void

      Sets the default SVG filter for the created markers (e.g. "drop-shadow(2px 2px 2px black)").

      Parameters

      • value: undefined | string

      Returns void

      3.2.0

    • get targetImage(): undefined | HTMLImageElement

      Target image to render annotations on.

      Returns undefined | HTMLImageElement

    • set targetImage(value: undefined | HTMLImageElement): void

      Target image to render annotations on.

      Parameters

      • value: undefined | HTMLImageElement

      Returns void

    Constructors

    Methods

    • Adds "defs" to main canvas SVG. Useful for filters, custom fonts and potentially other scenarios.

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

      3.3.0

    • Rasterizes the annotation.

      Parameters

      • state: AnnotationState

        annotation state to render.

      • OptionaltargetCanvas: HTMLCanvasElement

        optional target canvas to render the annotation on.

      Returns Promise<string>

    Properties

    height?: number

    When set and naturalSize is false sets the height of the rendered image.

    Both width and height have to be set for this to take effect.

    imageQuality?: number

    For formats that support it, specifies rendering quality.

    In the case of image/jpeg you can specify a value between 0 and 1 (lowest to highest quality).

    imageType: string = 'image/png'

    Rendered image type (image/png, image/jpeg, etc.).

    markers: MarkerBase[] = []

    Array of markers to render.

    markersOnly: boolean = false

    When set to true, only the marker layer without the original image will be rendered.

    markerTypes: typeof MarkerBase[] = []

    Marker types available for rendering.

    naturalSize: boolean = false

    Whether the image should be rendered at the original (natural) target image size.

    width?: number

    When set and naturalSize is false sets the width of the rendered image.

    Both width and height have to be set for this to take effect.

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties