Design Annotator SDK

SDK Introduction

Design Annotator SDK for web helps to integrate AnnotatePro editor within any web application. With this SDK, you can allow your users to annotate images and export back to your app.

Benefits

It's free and it has no limits
Easy to use - integrate within a few steps
There are no external JS dependencies, just a 3kb SDK script
No data is stored on our servers, everything happens in the browser
It allows users to crop and resize images
Rich image annotation features with draw mode,markup components, effects and numerous stickers
Accepts HTML5 file object blob or any image URL endpoint
Supports JPG, GIF and PNG with transparency

Use cases

In blog editors, to annotate images before posting
Media sites to blur sensitive image areas
Documentation apps - annotate to highlight content
Task management - Issue markings
And wherever image markup is required...

Getting Started

1) Include the SDK script tag in your HTML code

2) Initialise editor object. This has to be called only one time. It is recommended to be used where your app initialises or inside document.ready

Initialise example 1: Pass HTML element ID, where the editor will display.

AnnotateEditorSDK.init({elementID: "anyHTMLelementid"});

Initialise example 2: Pass optional parameters - width and height in px or percentage. Note: Atleast 800x600 px dimensions is required for the editor. So choose an element that has enough space for displaying the editor.

AnnotateEditorSDK.init({elementID: "anyHTMLelementid", width: "800px" , height: "600px"});

Initialise example 3: Where to call the init in vanilla JS. Here it is called in document ready function.

document.addEventListener("DOMContentLoaded", function(event) {

AnnotateEditorSDK.init({elementID: "anyHTMLelementid"});

});

Initialise example 4: Where to call the init in Jquery. Here it is called in document ready function.

$(document).ready(function(){

AnnotateEditorSDK.init({elementID: "anyHTMLelementid", width: "800px" , height: "600px"});

});

3) Ways to send image to the editor. This operation can be tied to an action like clicking on an edit button near an image. or on fileSelection from computer.

Supported input image types are - JPG, PNG (can have transparency) and GIF (static).

Actual code to send image to editor. Where the img parameter can be an Image URL or a HTML5 file obj.

AnnotateEditorSDK.openImage(img);

Sending image url to editor.

AnnotateEditorSDK.openImage("https://images.unsplash.com/photo-1645130322946-ab2b0f00df26");

Sending HTML5 file object selected from user's computer

document.getElementById('myFile').onchange = function()

{

var file = document.getElementById('myFile').files[0];

if (FileReader && file)

{

var fr = new FileReader();

fr.onload = function ()

{

AnnotateEditorSDK.openImage(fr.result);

}

fr.readAsDataURL(file);

}

};

HTML code for the file upload input element

4) Export event. To get annotated image back from editor. This is received in base64 format that can be directly displayed in src attribute of img tag

Export event code. This can be also placed in document ready function after the AnnotateEditorSDK.init call.

AnnotateEditorSDK.on('exportReady', function (e) {

document.getElementById("imgElemID").src = e.exportImage;

});

In the event call the following data is received:

e.exportImage //Base64 image

e.exportWidth //Width of edited image

e.exportHeight //Height of edited image

Note: exportReady event is fired only when the user has clicked the export button within the editor.

5) Close event. It is fired when the user closes the annotation editor without exporting. Use this event to perform operations if the image is un-edited. Like hiding the editor's container element and returning to the main UI.

AnnotateEditorSDK.on('onClose', function (e) {

alert('Editor closed without exporting');

});

6) Other supported operations in SDK.

AnnotateEditorSDK.hide(); //for hiding the editor

AnnotateEditorSDK.show(); //for showing the editor

AnnotateEditorSDK.destroy(); //This removes the editor from the HTML document and clears memory

AnnotateEditorSDK.getFileBlob(); //converts exported image to file blob, that can be used for uploading to server using formdata.

Consolidating SDK code

//Initialize SDK and setup events after document ready or domcontentloaded

//Initialse SDK

AnnotateEditorSDK.init({elementID: "anyHTMLelementid", width: "800px" , height: "600px"});

});

//Setup events after init

//Called after edited image is exported

AnnotateEditorSDK.on('exportReady', function (e) {

document.getElementById("imgElemID").src = e.exportImage;

});

//Called after the editor is closed without saving

AnnotateEditorSDK.on('onClose', function (e) {

alert('Editor closed without exporting');

});

//Function to open image in editor.

//Put this in any call to action like 'edit image' and pass image url or file obj

AnnotateEditorSDK.openImage(imgurl);

Sample application using Design Annotator SDK:

https://wireframepro.mockflow.com/buildstepguide

Here add an image step, select an image and then click 'Annotate Image' button, This will open the SDK editor where user can edit the image and export it back to the app.