<!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 {
width: 215px;
height: 200px;
}
.box-with-title {
padding-top: 1em;
display: inline-block;
text-align: center;
}
.buttons {
width: 215px;
}
*: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'>
<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>
<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');
var polygonPointEl = document.getElementById('polygonPointEl');
var examples = [
[{x: 480, y: 300},{x: 300, y: 420},{x: 600, y: 420}], // Triangle
[{x: 300, y: 550},{x: 300, y: 750},{x: 600, y: 750},{x: 600, y: 550}] // Rectangle
];
// Load default examples
function loadExample(){
previewEl.value = JSON.stringify(examples);
}
loadExample();
// 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)
}
// Add click handler to clicked point tracker
viewer.addHandler('canvas-click', function(event) {
var viewportPoint = viewer.viewport.pointFromPixel(event.position);
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
insertObjectToElement({x:p.x, y:p.y}, polygonPointEl);
});
// 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);
}
}
// Add clicked points to polygon tracker variable as point objects
document.getElementById('addPointBtn').onclick = function(){
insertValueFromElementToPreviewElement(polygonPointEl);
};
// Crop image with value in the preview element
document.getElementById('cropBtn').onclick = function(){
var polygonList = eval(previewEl.value);
var tiledImage = viewer.world.getItemAt(0);
tiledImage.setCroppingPolygons(polygonList);
viewer.forceRedraw();
emptyElement('previewEl');
};
document.getElementById('resetBtn').onclick = function(){
emptyElement('polygonPointEl');
emptyElement('previewEl');
var tiledImage = viewer.world.getItemAt(0);
tiledImage.resetCroppingPolygons();
viewer.forceRedraw();
};
document.getElementById('exampleBtn').onclick = loadExample;
</script>
</body>
</html>