Creates a new MarkerArea for the specified target image.
// create an instance of MarkerArea and pass the target image (or other HTML element) reference as a parameter
let markerArea = new markerjs2.MarkerArea(document.getElementById('myimg'));When target is not an image object the output is limited to "markers only" (@linkcode renderMarkersOnly)
and "popup" mode won't work properly as the target object stays in it's original position and, unlike images,
is not copied.
image object to mark up.
When set to true resulting image will be rendered at the natural (original) resolution of the target image. Otherwise (default), screen dimensions of the image are used.
When set and renderAtNaturalSize is false sets the height of the rendered image.
Both renderWidth and renderHeight have to be set for this to take effect.
When rendering engine/format supports it (jpeg, for exmample), sets the rendering quality for the resulting image.
In case of image/jpeg the value should be between 0 (worst quality) and 1 (best quality).
Type of image for the rendering result. Eg. image/png (default) or image/jpeg.
When set to true, will render only the marker layer without the original image.
This could be useful when you want to non-destructively overlay markers on top of the original image.
Note that in order for the markers layer to have a transparent background renderImageType
should be set to a format supporting transparency, such as image/png.
If a canvas is specified here, then marker.js will render the output to this canvas in addition to generating an image.
When set and renderAtNaturalSize is false sets the width of the rendered image.
Both renderWidth and renderHeight have to be set for this to take effect.
Manage style releated settings via the styles property.
targetRoot is used to set an alternative positioning root for the marker.js UI.
This is useful in cases when your target image is positioned, say, inside a div with position: relative;
// set targetRoot to a specific div instead of document.body
markerArea.targetRoot = document.getElementById('myRootElement');Pressing zoom button iterates through values in this array.
Returns a list of all built-in marker types for use with availableMarkerTypes
Returns a short list of essential built-in marker types for use with availableMarkerTypes
Returns a list of default set of built-in marker types.
Used when availableMarkerTypes isn't set explicitly.
Gets or sets a list of marker types avaiable to the user in the toolbar. The types can be passed as either type reference or a string type name.
this.markerArea1.availableMarkerTypes = ['CalloutMarker', ...this.markerArea1.BASIC_MARKER_TYPES];Gets or sets a list of marker types avaiable to the user in the toolbar. The types can be passed as either type reference or a string type name.
this.markerArea1.availableMarkerTypes = ['CalloutMarker', ...this.markerArea1.BASIC_MARKER_TYPES];Gets currently selected marker
Returns true when this MarkerArea is focused.
Returns true when MarkerArea is open and false otherwise.
Returns true if redo operation can be performed (redo stack is not empty).
Returns true if undo operation can be performed (undo stack is not empty).
Gets current zoom level.
Sets current zoom level.
Add a close event handler to perform actions in your code after the user
clicks on the close button (without saving).
close event listener
Adds "defs" element to the marker SVG element. Useful for using custom fonts and potentially other scenarios.
Adds an event listener for one of the marker.js Live events.
type of the event.
function handling the event.
Add license key.
This is a proxy method for {@linkcode Activator.addKey()}.
commercial license key.
Adds one or more markers to the toolbar.
one or more marker types to be added.
Add a render event listener which is called when user clicks on the OK/save button
in the toolbar.
// register an event listener for when user clicks OK/save in the marker.js UI
markerArea.addRenderEventListener(dataUrl => {
// we are setting the markup result to replace our original image on the page
// but you can set a different image or upload it to your server
document.getElementById('myimg').src = dataUrl;
});This is where you place your code to save a resulting image and/or MarkerAreaState.
a method handling rendering results
Tells MarkerArea to stop reacting to input outside of the immediate marker image.
Call focus() to re-enable.
Removes all markers.
Closes the MarkerArea UI.
Initiate new marker creation.
marker.js switches to marker creation mode for the marker type specified and users can draw a new marker like they would by pressing a corresponding toolbar button.
This example initiates creation of a FrameMarker:
this.markerArea1.createNewMarker(FrameMarker);Removes currently selected marker.
Focuses the MarkerArea to receive all input from the window.
Is called automatically when user clicks inside of the marker area. Call manually to set focus explicitly.
Returns the complete state for the MarkerArea that can be preserved and used to continue annotation next time.
when true is passed, currently selected marker will be deselected before getting the state.
Redo previously undone action.
Remove a close event handler.
previously registered close event handler.
Removes an event listener for one of the marker.js Live events.
type of the event.
function currently handling the event.
Remove a render event handler.
previously registered render event handler.
Renders the annotation result.
Normally, you should use addEventListener method to set a listener for the render event
rather than calling this method directly.
Renders previously saved state without user intervention.
The rendered image is returned to the render event handlers (as in the regular interactive process).
Rendering options set on MarkerArea are respected.
state to render
Restores MarkerArea state to continue previous annotation session.
IMPORTANT: call restoreState() after you've opened the MarkerArea with show.
this.markerArea1.show();
if (this.currentState) {
this.markerArea1.restoreState(this.currentState);
}previously saved state object.
Sets the currently selected marker or deselects it if no parameter passed.
marker to select. Deselects current marker if undefined.
Initializes the MarkerArea and opens the UI.
Initiates markup rendering.
Get results by adding a render event listener via addRenderEventListener.
Iterate zoom steps (@linkcode zoomSteps). Next zoom level is selected or returns to the first zoom level restarting the sequence.
Undo last action.
Generated using TypeDoc
MarkerArea is the main class of marker.js 2. It controls the behavior and appearance of the library.
The simplest marker.js 2 usage scenario looks something like this:
import * as markerjs2 from 'markerjs2'; // create an instance of MarkerArea and pass the target image reference as a parameter let markerArea = new markerjs2.MarkerArea(document.getElementById('myimg')); // register an event listener for when user clicks OK/save in the marker.js UI markerArea.addEventListener('render', event => { // we are setting the markup result to replace our original image on the page // but you can set a different image or upload it to your server document.getElementById('myimg').src = event.dataUrl; }); // finally, call the show() method and marker.js UI opens markerArea.show();