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.
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 to
renderImageQualityfor the optimal size/quality.
- renderImageQuality - when
renderImageTypeis set to a renderer that supports quality settings, such as
image/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 as
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;