@cogic/annotorious
Version:
A JavaScript image annotation library
111 lines (96 loc) • 2.78 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Annotorious | Label Formatter</title>
<link href="/annotorious.min.css" rel="stylesheet">
<script type="text/javascript" src="/annotorious.min.js"></script></head>
<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;
}
.a9s-annotationlayer foreignObject {
overflow:visible;
pointer-events:none;
padding:1px;
}
.a9s-annotationlayer foreignObject div {
display:table;
white-space:nowrap;
padding:3px;
background-color:rgba(255, 255, 255, 0.85);
border-bottom-right-radius:3px;
font-size:14px;
}
.a9s-annotationlayer .a9s-outer {
stroke-width:0 ;
}
.a9s-annotationlayer .a9s-inner {
stroke-width:3px ;
stroke:#fff;
}
</style>
</head>
<body>
<div id="content">
<p>
<button id="current-tool">RECTANGLE</button>
</p>
<img id="hallstatt" src="/640px-Hallstatt.jpg">
</div>
</div>
<script>
(function() {
var formatter = function(annotation) {
var firstTag = annotation.body.find(b => b.purpose == 'tagging');
if (firstTag) {
var fo = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
fo.setAttribute('width', '100%');
fo.setAttribute('height', '100%');
fo.innerHTML = '<div xmlns="http://www.w3.org/1999/xhtml" class="shape-label">' + firstTag.value + '</div>';
return fo;
}
}
var anno = Annotorious.init({
image: 'hallstatt',
formatter: formatter,
allowEmpty: true
});
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>