sp-image-annotation
Version:
A tool for image annotation
164 lines (140 loc) • 4.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>suanpan image annotation</title>
<style type="text/css">
.mr {
margin-right: 6px;
}
.ml {
margin-left: 10px;
}
body {
margin: 0;
padding: 0;
}
#annotation-container {
height: 100%;
min-height: 500px;
}
.result-container {
position: fixed;
top: 20px;
right: 16px;
z-index: 1;
width: 400px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 6px;
}
.event-container {
position: fixed;
right: 16px;
bottom: 20px;
z-index: 1;
width: 400px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 6px;
}
.result-content {
display: none;
padding: 6px;
word-break: break-all;
background-color: #fff;
}
</style>
</head>
<body onload="initKonva()">
<div id="annotation-container"></div>
<div class="result-container">
<div class="result-header">
<div class="title">图形数据</div>
</div>
<div id="result" class="result-content"></div>
</div>
<div class="event-container">
<div class="result-header">
<div class="title">事件数据</div>
</div>
<div id="event" class="result-content"></div>
</div>
<script>
function showShapeData(shapes) {
var $result = document.getElementById('result');
var viewports = [];
shapes.map(function (shape) {
viewports.push({ id: shape.id, type: shape.type, coordinate: shape.coordinate });
});
$result.innerHTML = JSON.stringify(viewports);
$result.style.display = 'block';
}
function showEvent(type, target) {
var $result = document.getElementById('event');
$result.innerHTML =
'事件类型：' + type + '<br /> 事件对象：' + target.text + '(' + target.shapeName + ')';
$result.style.display = 'block';
}
function getOperationButtons() {
var $pencil = document.getElementById('pencil');
}
function initKonva() {
var containerId = 'annotation-container';
var container = document.getElementById(containerId);
if (!container) {
return null;
}
var spImageAnnotation = new SpImageAnnotation.Annotation({
container: containerId,
width: container.clientWidth,
height: container.clientHeight,
imgSrc: './demo/demo.jpg',
onBeforeAddShape: (shapeType, extra) => {
console.log('before add shape:', shapeType, extra);
return true;
},
onShapeAdded: (shapeType, extra) => {
console.log('shape added:', shapeType, extra);
return true;
},
onShapeRemoved: (shape) => {
console.log('shape removed:', shape);
}
});
spImageAnnotation.on('imageloaded', function () {
spImageAnnotation.load([
{ type: 'RECTANGLE', coordinate: [100, 10, 100, 100], removable: false },
{ type: 'POINT', coordinate: [50, 10] },
{ type: 'MASK', coordinate: [100, 120, 100, 100] },
{ type: 'CIRCLE', coordinate: [200, 300, 100] },
{ type: 'LINE', coordinate: [300, 150, 350, 200, 450, 120, 300, 150] },
{ type: 'COORDINATE', coordinate: [600, 50, 90] },
{ type: 'CONCENTRIC_CIRCLE', coordinate: [600, 200, 10, 100] },
]);
});
spImageAnnotation.on('shape:select', function (target) {
showEvent('shape:select', target);
});
spImageAnnotation.on("shape:drag:end", function (target) {
console.log("shape:drag:end")
console.log(target)
})
window.addEventListener('resize', function () {
spImageAnnotation.resize(
document.getElementById(containerId).clientWidth,
document.getElementById(containerId).clientHeight,
);
});
setInterval(function () {
showShapeData(spImageAnnotation.getShapeData());
}, 3000);
setInterval(() => {
spImageAnnotation.setImage('./demo/demo.jpg');
}, 2000)
}
</script>
</body>
</html>