@cogic/annotorious
Version:
A JavaScript image annotation library
112 lines (92 loc) • 3.73 kB
HTML
<html><head><meta charset="utf-8"/><title>Annotorious | Basic Example</title><link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"><style>html, body {
padding:20px;
margin:0px;
font-family:'Lato', sans-serif;
}
#content {
width:100%;
}
h1 {
font-size:21px;
font-weight:normal;
margin:0;
padding:0;
}
p.instructions {
padding:10px 0;
}
img {
max-width:100%;
}
p.caption {
font-family:Arial, Helvetica, sans-serif;
color:#8f8f8f;
}
p.caption a {
color:#3f3f3f;
}</style><link href="annotorious.min.css" rel="stylesheet"><script src="annotorious.min.js"></script></head><body><div id="content"><h1>Annotorious: Basic Example</h1><p class="instructions">Click the annotation to edit. Click and drag the mouse to create a new annotation.</p><p><button id="current-tool">RECTANGLE</button></p><div><img id="hallstatt" src="640px-Hallstatt.jpg"></div></div><script>window.onload = function() {
anno = Annotorious.init({
image: 'hallstatt',
locale: 'auto',
disableEditor: true,
drawOnSingleClick: true,
enableEdgeControls: true,
handleRadius: 4,
allowEmpty: true,
allowDrawingWithSelection: true,
minPolygonPoints: 3,
crosshair: true,
crosshairWithCursor: true,
disableEscapeKey: false,
disableDeleteKey: false,
bindEventListenersInternally: true,
// Only works when drawOnSingleClick is true
addPolygonPointOnMouseDown: true,
});
anno.setAuthInfo({
id: 'http://www.example.com/rainer',
displayName: 'rainer'
});
anno.on('selectAnnotation', function(a, shape) {
console.log('selected');
});
anno.on('cancelSelected', function(a) {
console.log('cancel');
});
anno.on('changeSelected', function(selected, previous) {
console.log('changed from', previous, 'to', selected);
});
anno.on('createAnnotation', function (annotation) {
console.log('created', annotation);
});
anno.on('createSelection', (selection) => {
console.log('createSelection', selection);
anno.updateSelected(selection, true);
});
anno.on('updateAnnotation', function(annotation, previous) {
console.log('updated', previous, 'with', annotation);
});
anno.on('clickAnnotation', function(annotation, shape) {
console.log('clicked', annotation);
});
anno.on('deleteAnnotation', function(annotation) {
console.log('deleted', annotation);
});
anno.on('mouseEnterAnnotation', function(annotation) {
console.log('enter', annotation);
});
anno.on('mouseLeaveAnnotation', function(annotation) {
console.log('leave', annotation);
});
anno.loadAnnotations('annotations.w3c.json');
var toolToggle = document.getElementById('current-tool');
toolToggle.addEventListener('click', function() {
if (toolToggle.innerHTML == 'RECTANGLE') {
toolToggle.innerHTML = 'POLYGON';
anno.setDrawingTool('polygon');
} else {
toolToggle.innerHTML = 'RECTANGLE';
anno.setDrawingTool('rect');
}
});
}</script></body></html>