Click the buttons at the top of the tool to explore editing features.
new easyannotation.AnnotatorContainer(document.querySelector('#sample1')). show(function(res){});
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);
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) { });
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; });
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) { });
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) { });