2020-02-07 00:46:14 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>OpenSeadragon Cropping PolygonList Demo</title>
|
|
|
|
|
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
|
|
|
|
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
.openseadragon1 {
|
|
|
|
|
width: 800px;
|
|
|
|
|
height: 600px;
|
|
|
|
|
background: lightgreen;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
textarea {
|
2020-02-08 03:04:16 +03:00
|
|
|
width: 215px;
|
2020-02-07 00:46:14 +03:00
|
|
|
height: 200px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-with-title {
|
|
|
|
|
padding-top: 1em;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2020-02-08 03:04:16 +03:00
|
|
|
.buttons {
|
|
|
|
|
width: 215px;
|
2020-02-07 00:46:14 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
*:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h3>
|
|
|
|
|
Simple demo page to show cropping with polygonList in a OpenSeadragon viewer.
|
|
|
|
|
</h3>
|
|
|
|
|
<div id="contentDiv" class="openseadragon1"></div>
|
|
|
|
|
<span>Click on Viewer to save polygon points</span>
|
|
|
|
|
<div>
|
|
|
|
|
<button id='resetBtn'>Reset</button>
|
|
|
|
|
<button id='exampleBtn'>Load Example</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='box-with-title'>
|
2020-02-08 03:04:16 +03:00
|
|
|
<div class="buttons">
|
|
|
|
|
<button id="addArrayBtn">Add Array as Polygon</button>
|
|
|
|
|
<button onclick="emptyElement('polygonArrayEl')">Clear</button>
|
|
|
|
|
</div>
|
|
|
|
|
<textarea id="polygonArrayEl"></textarea>
|
2020-02-07 00:46:14 +03:00
|
|
|
</div>
|
|
|
|
|
<div class='box-with-title'>
|
2020-02-08 03:04:16 +03:00
|
|
|
<div class="buttons">
|
|
|
|
|
<button id="addPointBtn">Add Points as Polygon</button>
|
|
|
|
|
<button onclick="emptyElement('polygonPointEl')">Clear</button>
|
|
|
|
|
</div>
|
|
|
|
|
<textarea id="polygonPointEl"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='box-with-title'>
|
|
|
|
|
<div class="buttons">
|
|
|
|
|
<button id="cropBtn">Crop With Polygon</button>
|
|
|
|
|
<button onclick="emptyElement('previewEl')">Clear</button>
|
|
|
|
|
</div>
|
2020-02-07 00:46:14 +03:00
|
|
|
<textarea id='previewEl'></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Setup Viewer -->
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var viewer = OpenSeadragon({
|
|
|
|
|
// debugMode: true,
|
|
|
|
|
id: "contentDiv",
|
|
|
|
|
prefixUrl: "../../build/openseadragon/images/",
|
|
|
|
|
tileSources: "../data/testpattern.dzi",
|
|
|
|
|
showNavigator: false,
|
|
|
|
|
gestureSettingsMouse: {
|
|
|
|
|
clickToZoom: false
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Global Variables
|
|
|
|
|
var previewEl = document.getElementById('previewEl');
|
2020-02-08 03:04:16 +03:00
|
|
|
var polygonArrayEl = document.getElementById('polygonArrayEl');
|
|
|
|
|
var polygonPointEl = document.getElementById('polygonPointEl');
|
|
|
|
|
|
2020-02-07 00:46:14 +03:00
|
|
|
var examples = [
|
|
|
|
|
[[480,300],[300,420],[600,420]], // Triangle
|
|
|
|
|
[[300,550],[300,750],[600,750],[600,550]] // Rectangle
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// Load default examples
|
|
|
|
|
function loadExample(){
|
2020-02-08 03:04:16 +03:00
|
|
|
previewEl.value = JSON.stringify(examples);
|
2020-02-07 00:46:14 +03:00
|
|
|
}
|
|
|
|
|
loadExample();
|
|
|
|
|
|
2020-02-08 03:04:16 +03:00
|
|
|
// Set a given element's value to empty string
|
|
|
|
|
function emptyElement(elementId) {
|
|
|
|
|
document.getElementById(elementId).value = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// JSON parse a given object, then insert object assuming parsed value is array.
|
|
|
|
|
function insertObjectToElement(object, element) {
|
|
|
|
|
var parsed = []; // Default to empty array
|
|
|
|
|
try {
|
|
|
|
|
parsed = JSON.parse(element.value);
|
|
|
|
|
} catch(error) { }
|
|
|
|
|
parsed.push(object);
|
|
|
|
|
element.value = JSON.stringify(parsed)
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-07 00:46:14 +03:00
|
|
|
// Add click handler to clicked point tracker
|
|
|
|
|
viewer.addHandler('canvas-click', function(event) {
|
2020-02-08 03:04:16 +03:00
|
|
|
var viewportPoint = viewer.viewport.pointFromPixel(event.position);
|
2020-02-07 00:46:14 +03:00
|
|
|
var p = viewer.viewport.viewportToImageCoordinates(viewportPoint);
|
|
|
|
|
p.x = Math.round((p.x + Number.EPSILON) * 100) / 100
|
|
|
|
|
p.y = Math.round((p.y + Number.EPSILON) * 100) / 100
|
2020-02-08 03:04:16 +03:00
|
|
|
insertObjectToElement([p.x, p.y], polygonArrayEl);
|
|
|
|
|
insertObjectToElement({x:p.x, y:p.y}, polygonPointEl);
|
2020-02-07 00:46:14 +03:00
|
|
|
});
|
|
|
|
|
|
2020-02-08 03:04:16 +03:00
|
|
|
// Evaluate give element in JavaScript variable, default to empty array.
|
|
|
|
|
function readElementValueDefaultToEmptyArray(elementId) {
|
|
|
|
|
try {
|
|
|
|
|
var val = document.getElementById(elementId).value;
|
|
|
|
|
if (val === '') { return []; }
|
|
|
|
|
return eval(val); // If using JSON.parse, user must put quotes [{"x": 123, "y":12}]
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Insert value from given element into preview element
|
|
|
|
|
function insertValueFromElementToPreviewElement(element) {
|
|
|
|
|
try {
|
|
|
|
|
if (element.value === '') { return; }
|
|
|
|
|
var polygon = eval(element.value);
|
|
|
|
|
var polygonList = readElementValueDefaultToEmptyArray('previewEl');
|
|
|
|
|
polygonList.push(polygon);
|
|
|
|
|
element.value = '';
|
|
|
|
|
previewEl.value = JSON.stringify(polygonList);
|
|
|
|
|
} catch(error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-02-07 00:46:14 +03:00
|
|
|
// Add clicked points to polygon tracker variable
|
2020-02-08 03:04:16 +03:00
|
|
|
document.getElementById('addArrayBtn').onclick = function(){
|
|
|
|
|
insertValueFromElementToPreviewElement(polygonArrayEl);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Add clicked points to polygon tracker variable as point objects
|
|
|
|
|
document.getElementById('addPointBtn').onclick = function(){
|
|
|
|
|
insertValueFromElementToPreviewElement(polygonPointEl);
|
2020-02-07 00:46:14 +03:00
|
|
|
};
|
|
|
|
|
|
2020-02-08 03:04:16 +03:00
|
|
|
// Crop image with value in the preview element
|
2020-02-07 00:46:14 +03:00
|
|
|
document.getElementById('cropBtn').onclick = function(){
|
2020-02-08 03:04:16 +03:00
|
|
|
var polygonList = eval(previewEl.value);
|
2020-02-07 00:46:14 +03:00
|
|
|
var tiledImage = viewer.world.getItemAt(0);
|
|
|
|
|
tiledImage.setCroppingPolygons(polygonList);
|
|
|
|
|
viewer.forceRedraw();
|
2020-02-08 03:04:16 +03:00
|
|
|
emptyElement('previewEl');
|
2020-02-07 00:46:14 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.getElementById('resetBtn').onclick = function(){
|
2020-02-08 03:04:16 +03:00
|
|
|
emptyElement('polygonArrayEl');
|
|
|
|
|
emptyElement('polygonPointEl');
|
|
|
|
|
emptyElement('previewEl');
|
2020-02-07 00:46:14 +03:00
|
|
|
var tiledImage = viewer.world.getItemAt(0);
|
|
|
|
|
tiledImage.resetCroppingPolygons();
|
|
|
|
|
viewer.forceRedraw();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.getElementById('exampleBtn').onclick = loadExample;
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
