Easy Annotation Example

Basic Example

Click the buttons at the top of the tool to explore editing features. 

new easyannotation.AnnotatorContainer(document.querySelector('#sample1')).
                                 show(function(res){});
More options at https://github.com/abeleuta/easyannotation
Easy Annotation Example

Load Previous Work...

Pick up where you left off instantly. 

let annotation2 = new easyannotation.AnnotatorContainer(document.querySelector('sample2'));
annotation2.show(function(res) {
    // called when user press Save.
    res is a string with result in Base64 PNG, JSON, XML or SVG depending on the Export type
    console.log(res);
    previouslySavedJSON = res;
 }, easyannotation.ExportType.JSON);
 // load previously saved data. Format of Save and load must match
annotation2.loadJSON(previouslySavedJSON);
More options at https://github.com/abeleuta/easyannotation
Easy Annotation Example

Load on fly...

Load Easy Annotation only when you need it. Just click on the image and annotation tools will be there. 

new easyannotation.AnnotatorContainer(document.querySelector('sample3'), {
    loadOnClick: true
});
annotation2.show(function(res) {
});
More options at https://github.com/abeleuta/easyannotation
Easy Annotation Example

Save as PNG Image...

With one click, save your annotated images instantly. 

new easyannotation.AnnotatorContainer(document.querySelector('sample4'));
annotation2.show(function(res) {
    // default export type is base64 PNG image which can be set directly to src of an image element
    document.querySelector('#sample4Res').src = res;
});
More options at https://github.com/abeleuta/easyannotation
Easy Annotation Example
Easy Annotation Example

Define Your Own Style

We understand you may need to use your own style and colors. This is very easy - just provide your own style. 

    easy-annotation::part(toolbar) {
        background-color: #7ff87f !important;
    }
    
new easyannotation.AnnotatorContainer(document.querySelector('sample5'), {
    mainCls: 'test'
}).show(function(res) {
});
More options at https://github.com/abeleuta/easyannotation
Easy Annotation Example

Use the Tools You Want

Use just one or five features when editing your pictures. It’s up to you! 

new easyannotation.AnnotatorContainer(document.querySelector('sample6'), {
    toolbarItems: [
        {
            //clear button to delete selected or all elements
            xtype: 'delete',
            title: 'Delete selected or all elements'
        },
        {xtype: 'text'},     //text element
        {xtype: 'callout'},   //callout element
        {xtype: 'blur'},      //bluring element to blur parts of the image
        {xtype: 'free-draw'}, //free draw element
        {
            //save element
            xtype: 'save',
            title: 'Save changes and close annotator'
        }]
}).show(function(res) {
});
More options at https://github.com/abeleuta/easyannotation

© 2021 EasyAnnotation. All Rights Reserved.