easyannotation
Version:
Image annotation in JavaScript
74 lines (69 loc) • 2.07 kB
HTML
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./dist/easyannotation.min.js"></script>
<script>
window.onload = function() {
var easyMarker1 = new easyannotation.AnnotatorContainer(
document.querySelector('#hallstattImg'), {
style: 'border: 1px solid #909090',
showClose: true,
ui: 'dark',
blurStyle: {
radius: 50
},
toolbarItems: [
{
xtype: 'delete',
title: 'Delete selected or all elements'
},
{xtype: 'text'},
{xtype: 'line'},
{xtype: 'arrow'},
{xtype: 'ellipse'},
{xtype: 'callout'},
{xtype: 'image'},
{xtype: 'blur'},
{xtype: 'free-draw'},
{xtype: 'polygon'},
{
itemId: 'save',
xtype: 'save',
title: 'Save changes and close annotator'
}]
});
var easyMarkerRes = new easyannotation.AnnotatorContainer(document.querySelector('#hallstattImgRes'), {
style: 'border: 1px solid #909090'
});
easyMarker1.show(function(dataUrl) {
easyMarkerRes.clear();
easyMarkerRes.loadJSON(dataUrl);
}, easyannotation.ExportType.JSON);//JSON);
easyMarkerRes.show(function(dataUrl) {
easyMarker1.clear();
easyMarker1.loadJSON(dataUrl);
}, easyannotation.ExportType.JSON);
};
</script>
</head>
<body>
<table style="width:1200px;">
<tr>
<td>
<img style="margin-top: 50px;/*width:225px;height:121px;*/" id="hallstattImg" src="dev/Hallstat.jpg"/>
</td>
<td>
<img style="margin-top: 50px;/*width:225px;height:121px;*/" id="hallstattImgRes" src="dev/Hallstat.jpg"/>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="logArea" style="width:400px;height:300px;"></textarea>
</td>
</tr>
</table>
</body>
</html>