99 lines
3.1 KiB
HTML
99 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>To user model</title>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
|
||
|
|
<script src="https://unpkg.com/markerjs2/markerjs2.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div style="position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 50px;">
|
||
|
|
<!-- we are putting a copy of the original image under the result image so it's always annotation-free -->
|
||
|
|
<img id="sourceImage"
|
||
|
|
src="imgs/scene2.png"
|
||
|
|
style="max-width: 600px; max-height: 80%;"
|
||
|
|
crossorigin="anonymous"
|
||
|
|
/>
|
||
|
|
<img id="sampleImage"
|
||
|
|
src="imgs/scene2.png"
|
||
|
|
style="max-width: 600px; max-height: 100%; position: absolute;"
|
||
|
|
crossorigin="anonymous"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
let sourceImage, targetRoot, maState, _maState;
|
||
|
|
|
||
|
|
_maState = getCookie('maState');
|
||
|
|
if (getCookie('maState')) maState = _maState;
|
||
|
|
|
||
|
|
function setCookie(cname, cvalue, exdays) {
|
||
|
|
const d = new Date();
|
||
|
|
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
|
||
|
|
let expires = "expires=" + d.toUTCString();
|
||
|
|
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCookie(cname) {
|
||
|
|
let name = cname + "=";
|
||
|
|
let decodedCookie = decodeURIComponent(document.cookie);
|
||
|
|
let ca = decodedCookie.split(';');
|
||
|
|
for (let i = 0; i < ca.length; i++) {
|
||
|
|
let c = ca[i];
|
||
|
|
while (c.charAt(0) == ' ') {
|
||
|
|
c = c.substring(1);
|
||
|
|
}
|
||
|
|
if (c.indexOf(name) == 0) {
|
||
|
|
return c.substring(name.length, c.length);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
|
||
|
|
// save references to the original image and its parent div (positioning root)
|
||
|
|
function setSourceImage(source) {
|
||
|
|
sourceImage = source;
|
||
|
|
targetRoot = source.parentElement;
|
||
|
|
}
|
||
|
|
|
||
|
|
function showMarkerArea(target) {
|
||
|
|
const markerArea = new markerjs2.MarkerArea(sourceImage);
|
||
|
|
markerArea.availableMarkerTypes = ["FrameMarker"];
|
||
|
|
markerArea.renderAtNaturalSize = true;
|
||
|
|
markerArea.renderImageType = 'image/jpeg';
|
||
|
|
markerArea.renderImageQuality = 0.9;
|
||
|
|
markerArea.settings.disableRotation = true;
|
||
|
|
// since the container div is set to position: relative it is now our positioning root
|
||
|
|
// end we have to let marker.js know that
|
||
|
|
markerArea.targetRoot = targetRoot;
|
||
|
|
markerArea.addEventListener("render", (event) => {
|
||
|
|
target.src = event.dataUrl;
|
||
|
|
// save the state of MarkerArea
|
||
|
|
maState = event.state;
|
||
|
|
});
|
||
|
|
markerArea.addEventListener("close", (event) => {
|
||
|
|
alert(11);
|
||
|
|
});
|
||
|
|
markerArea.show();
|
||
|
|
// if previous state is present - restore it
|
||
|
|
if (maState) {
|
||
|
|
markerArea.restoreState(maState);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
setSourceImage(document.getElementById("sourceImage"));
|
||
|
|
|
||
|
|
const sampleImage = document.getElementById("sampleImage");
|
||
|
|
sampleImage.addEventListener("click", () => {
|
||
|
|
showMarkerArea(sampleImage);
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|