Rendering options
By default marker.js 2 renders the resulting markup on top of the target image in PNG format of the same size you see while editing. However, there are a lot of things you can change this behavior.
Controlling rendering
You can control rendering results by setting one or more of the following properties:
- renderAtNaturalSize - when set to
truethe resulting image will be rendered at the natural (original) target image size irrespectively of the screen size of the image object. Default: false. - renderImageType - you can control the resulting image format via this property. By default, it is set to
image/pngwhich is optimal for the best quality of the annotations. However, with photo-realistic target images, this could result in large(r) image files. In these cases, you may want to switch toimage/jpegand adjustrenderImageQualityfor the optimal size/quality. - renderImageQuality - when
renderImageTypeis set to a renderer that supports quality settings, such asimage/jpeg, you can set this property to adjust it. For JPEG the value of 0 means the lowest quality and smallest file size, 1 is for the highest quality and the largest file. - renderMarkersOnly - in cases, when you want to optionally overlay the annotations on top of the original image and switch annotations on and off, you may want to save annotations as a separate transparent image. Set
renderMarkersOnlyto true and don't forget to use an image format that supports transparency, such asimage/png.
Examples
The following code instructs marker.js to render the result as an original size JPEG with 50% quality.
markerArea.renderAtNaturalSize = true;
markerArea.renderImageType = 'image/jpeg';
markerArea.renderImageQuality = 0.5;And here's how you render just the annotation layer.
// PNG is the default but it's always good to set it explicitly so that intent is clear.
markerArea.renderImageType = 'image/png';
markerArea.renderMarkersOnly = true;