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. 



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

Use cases

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

Getting Started

1) Include the SDK script tag in your HTML code

<script type="text/javascript" src=""></script>

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. 

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.


Sending image url to editor. 


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 ()

HTML code for the file upload input element

<input type="file" id="myFile" name="filename" />

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; //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


Sample application using Design Annotator SDK:

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.


Rate this article
great ok bad
For more questions - Contact Us