marker.js
parent
52f2bc6822
commit
ca3e569f32
|
@ -8,5 +8,6 @@
|
||||||
</content>
|
</content>
|
||||||
<orderEntry type="inheritedJdk" />
|
<orderEntry type="inheritedJdk" />
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
<orderEntry type="library" name="markerjs2" level="application" />
|
||||||
</component>
|
</component>
|
||||||
</module>
|
</module>
|
|
@ -0,0 +1,18 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sampleImage {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 80%;
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
354
index.html
354
index.html
|
@ -83,305 +83,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script src="js/select.js"></script>
|
||||||
|
|
||||||
var image = document.getElementById('full-image');
|
|
||||||
var canvas = document.getElementById('canvas')
|
|
||||||
|
|
||||||
//hidden or text inputs
|
|
||||||
var h_th_left = document.getElementById('thb_left')
|
|
||||||
var h_th_top = document.getElementById('thb_top')
|
|
||||||
var h_th_right = document.getElementById('thb_right')
|
|
||||||
var h_th_bottom = document.getElementById('thb_bottom')
|
|
||||||
|
|
||||||
var handleRadius = 10
|
|
||||||
|
|
||||||
var dragTL = dragBL = dragTR = dragBR = false;
|
|
||||||
var dragWholeRect = false;
|
|
||||||
|
|
||||||
var rect={}
|
|
||||||
var current_canvas_rect={}
|
|
||||||
|
|
||||||
var mouseX, mouseY
|
|
||||||
var startX, startY
|
|
||||||
|
|
||||||
var th_left = 150;
|
|
||||||
var th_top = 896;
|
|
||||||
var th_right = 2009;
|
|
||||||
var th_bottom = 2753;
|
|
||||||
|
|
||||||
var th_width = th_right - th_left;
|
|
||||||
var th_height = th_bottom - th_top;
|
|
||||||
|
|
||||||
var effective_image_width = 4032;
|
|
||||||
var effective_image_height = 3024;
|
|
||||||
|
|
||||||
//drawRectInCanvas() connected functions -- START
|
|
||||||
function updateHiddenInputs(){
|
|
||||||
|
|
||||||
var inverse_ratio_w = effective_image_width / canvas.width;
|
|
||||||
var inverse_ratio_h = effective_image_height / canvas.height ;
|
|
||||||
|
|
||||||
h_th_left.value = Math.round(rect.left * inverse_ratio_w)
|
|
||||||
h_th_top.value = Math.round(rect.top * inverse_ratio_h)
|
|
||||||
h_th_right.value = Math.round((rect.left + rect.width) * inverse_ratio_w)
|
|
||||||
h_th_bottom.value = Math.round((rect.top + rect.height) * inverse_ratio_h)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawCircle(x, y, radius) {
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
|
|
||||||
ctx.fillStyle = "#c757e7";
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
|
||||||
ctx.fill();
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawHandles() {
|
|
||||||
drawCircle(rect.left, rect.top, handleRadius);
|
|
||||||
drawCircle(rect.left + rect.width, rect.top, handleRadius);
|
|
||||||
drawCircle(rect.left + rect.width, rect.top + rect.height, handleRadius);
|
|
||||||
drawCircle(rect.left, rect.top + rect.height, handleRadius);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function drawRectInCanvas()
|
|
||||||
{
|
|
||||||
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.lineWidth = "6";
|
|
||||||
ctx.fillStyle = "rgba(199, 87, 231, 0.2)";
|
|
||||||
ctx.strokeStyle = "#c757e7";
|
|
||||||
ctx.rect(rect.left, rect.top, rect.width, rect.height);
|
|
||||||
ctx.fill();
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
|
|
||||||
drawHandles();
|
|
||||||
updateHiddenInputs()
|
|
||||||
|
|
||||||
}
|
|
||||||
//drawRectInCanvas() connected functions -- END
|
|
||||||
|
|
||||||
function mouseUp(e) {
|
|
||||||
console.log('MOUSE UP!');
|
|
||||||
dragTL = dragTR = dragBL = dragBR = false;
|
|
||||||
dragWholeRect = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
//mousedown connected functions -- START
|
|
||||||
function checkInRect(x, y, r) {
|
|
||||||
console.log(x,y,r.left,r.right);
|
|
||||||
return (x>r.left && x<(r.width+r.left)) && (y>r.top && y<(r.top+r.height));
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkCloseEnough(p1, p2) {
|
|
||||||
return Math.abs(p1 - p2) < handleRadius;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMousePos(canvas, evt) {
|
|
||||||
|
|
||||||
var clx, cly
|
|
||||||
if (evt.type == "touchstart" || evt.type == "touchmove") {
|
|
||||||
clx = evt.touches[0].clientX;
|
|
||||||
cly = evt.touches[0].clientY;
|
|
||||||
} else {
|
|
||||||
clx = evt.clientX;
|
|
||||||
cly = evt.clientY;
|
|
||||||
}
|
|
||||||
|
|
||||||
var boundingRect = canvas.getBoundingClientRect();
|
|
||||||
return {
|
|
||||||
x: clx - boundingRect.left,
|
|
||||||
y: cly - boundingRect.top
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function mouseDown(e) {
|
|
||||||
var pos = getMousePos(this,e);
|
|
||||||
|
|
||||||
//mouseX = e.pageX - this.offsetLeft;
|
|
||||||
mouseX = pos.x;
|
|
||||||
mouseY = pos.y;
|
|
||||||
//mouseY = e.pageY - this.offsetTop;
|
|
||||||
|
|
||||||
// 0. inside movable rectangle
|
|
||||||
if (checkInRect(mouseX, mouseY, rect)){
|
|
||||||
dragWholeRect=true;
|
|
||||||
startX = mouseX;
|
|
||||||
startY = mouseY;
|
|
||||||
console.log('dragWholeRect');
|
|
||||||
}
|
|
||||||
// 1. top left
|
|
||||||
else if (checkCloseEnough(mouseX, rect.left) && checkCloseEnough(mouseY, rect.top)) {
|
|
||||||
dragTL = true;
|
|
||||||
console.log('dragTL');
|
|
||||||
}
|
|
||||||
// 2. top right
|
|
||||||
else if (checkCloseEnough(mouseX, rect.left + rect.width) && checkCloseEnough(mouseY, rect.top)) {
|
|
||||||
dragTR = true;
|
|
||||||
console.log('dragTR');
|
|
||||||
}
|
|
||||||
// 3. bottom left
|
|
||||||
else if (checkCloseEnough(mouseX, rect.left) && checkCloseEnough(mouseY, rect.top + rect.height)) {
|
|
||||||
dragBL = true;
|
|
||||||
console.log('dragBL');
|
|
||||||
}
|
|
||||||
// 4. bottom right
|
|
||||||
else if (checkCloseEnough(mouseX, rect.left + rect.width) && checkCloseEnough(mouseY, rect.top + rect.height)) {
|
|
||||||
dragBR = true;
|
|
||||||
console.log('dragBR');
|
|
||||||
}
|
|
||||||
// (5.) none of them
|
|
||||||
else {
|
|
||||||
// handle not resizing
|
|
||||||
}
|
|
||||||
|
|
||||||
drawRectInCanvas();
|
|
||||||
|
|
||||||
}
|
|
||||||
//mousedown connected functions -- END
|
|
||||||
|
|
||||||
function mouseMove(e) {
|
|
||||||
|
|
||||||
var pos = getMousePos(this,e);
|
|
||||||
mouseX = pos.x;
|
|
||||||
mouseY = pos.y;
|
|
||||||
|
|
||||||
//console.log(mouseX, mouseY)
|
|
||||||
|
|
||||||
|
|
||||||
if (dragWholeRect) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
dx = mouseX - startX;
|
|
||||||
dy = mouseY - startY;
|
|
||||||
if ((rect.left+dx)>0 && (rect.left+dx+rect.width)<canvas.width){
|
|
||||||
rect.left += dx;
|
|
||||||
}
|
|
||||||
if ((rect.top+dy)>0 && (rect.top+dy+rect.height)<canvas.height){
|
|
||||||
rect.top += dy;
|
|
||||||
}
|
|
||||||
startX = mouseX;
|
|
||||||
startY = mouseY;
|
|
||||||
} else if (dragTL) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
var newSide = (Math.abs(rect.left+rect.width - mouseX)+Math.abs(rect.height + rect.top - mouseY))/2;
|
|
||||||
if (newSide>150){
|
|
||||||
rect.left = rect.left + rect.width - newSide;
|
|
||||||
rect.top = rect.height + rect.top - newSide;
|
|
||||||
rect.width = rect.height = newSide;
|
|
||||||
}
|
|
||||||
} else if (dragTR) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
var newSide = (Math.abs(mouseX-rect.left)+Math.abs(rect.height + rect.top - mouseY))/2;
|
|
||||||
if (newSide>150){
|
|
||||||
rect.top = rect.height + rect.top - newSide;
|
|
||||||
rect.width = rect.height = newSide;
|
|
||||||
}
|
|
||||||
} else if (dragBL) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
var newSide = (Math.abs(rect.left+rect.width - mouseX)+Math.abs(rect.top - mouseY))/2;
|
|
||||||
if (newSide>150)
|
|
||||||
{
|
|
||||||
rect.left = rect.left + rect.width - newSide;
|
|
||||||
rect.width = rect.height = newSide;
|
|
||||||
}
|
|
||||||
} else if (dragBR) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
var newSide = (Math.abs(rect.left - mouseX)+Math.abs(rect.top - mouseY))/2;
|
|
||||||
if (newSide>150)
|
|
||||||
{
|
|
||||||
rect.width = rect.height = newSide;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
drawRectInCanvas();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCurrentCanvasRect(){
|
|
||||||
current_canvas_rect.height = canvas.height
|
|
||||||
current_canvas_rect.width = canvas.width
|
|
||||||
current_canvas_rect.top = image.offsetTop
|
|
||||||
current_canvas_rect.left = image.offsetLeft
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function repositionCanvas(){
|
|
||||||
|
|
||||||
//make canvas same as image, which may have changed size and position
|
|
||||||
canvas.height = image.height;
|
|
||||||
canvas.width = image.width;
|
|
||||||
canvas.style.top = image.offsetTop + "px";;
|
|
||||||
canvas.style.left = image.offsetLeft + "px";
|
|
||||||
|
|
||||||
//compute ratio comparing the NEW canvas rect with the OLD (current)
|
|
||||||
var ratio_w = canvas.width / current_canvas_rect.width;
|
|
||||||
var ratio_h = canvas.height / current_canvas_rect.height;
|
|
||||||
|
|
||||||
//update rect coordinates
|
|
||||||
rect.top = rect.top * ratio_h;
|
|
||||||
rect.left = rect.left * ratio_w;
|
|
||||||
rect.height = rect.height * ratio_h;
|
|
||||||
rect.width = rect.width * ratio_w;
|
|
||||||
|
|
||||||
updateCurrentCanvasRect();
|
|
||||||
|
|
||||||
drawRectInCanvas();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function initCanvas(){
|
|
||||||
canvas.height = image.height;
|
|
||||||
canvas.width = image.width;
|
|
||||||
canvas.style.top = image.offsetTop + "px";;
|
|
||||||
canvas.style.left = image.offsetLeft + "px";
|
|
||||||
updateCurrentCanvasRect();
|
|
||||||
}
|
|
||||||
|
|
||||||
function initRect(){
|
|
||||||
|
|
||||||
var ratio_w = canvas.width / effective_image_width;
|
|
||||||
var ratio_h = canvas.height / effective_image_height;
|
|
||||||
|
|
||||||
//BORDER OF SIZE 6!
|
|
||||||
rect.height = th_height*ratio_h-6
|
|
||||||
rect.width = th_width*ratio_w-6
|
|
||||||
rect.top = th_top*ratio_h+3
|
|
||||||
rect.left = th_left*ratio_w+3
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function init(){
|
|
||||||
canvas.addEventListener('mousedown', mouseDown, false);
|
|
||||||
canvas.addEventListener('mouseup', mouseUp, false);
|
|
||||||
canvas.addEventListener('mousemove', mouseMove, false);
|
|
||||||
|
|
||||||
canvas.addEventListener('touchstart', mouseDown);
|
|
||||||
canvas.addEventListener('touchmove', mouseMove);
|
|
||||||
canvas.addEventListener('touchend', mouseUp);
|
|
||||||
|
|
||||||
initCanvas();
|
|
||||||
initRect();
|
|
||||||
|
|
||||||
drawRectInCanvas();
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('load',init)
|
|
||||||
window.addEventListener('resize',repositionCanvas)
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- End Main content -->
|
<!-- End Main content -->
|
||||||
</main>
|
</main>
|
||||||
|
@ -391,59 +93,5 @@
|
||||||
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
||||||
crossorigin="anonymous"></script>
|
crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<!-- get custom JavaScript -->
|
|
||||||
<script src="/static/js/custom.js"></script>
|
|
||||||
|
|
||||||
<form method="post">
|
|
||||||
<div class="modal fade" id="cookieModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
|
||||||
<div class="modal-dialog modal-lg shadow" role="document">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<span style="font-weight: bold" class="modal-title">Cookie Settings</span>
|
|
||||||
</div>
|
|
||||||
<div data-nosnippet class="modal-body">
|
|
||||||
<div style="font-size: 80%">
|
|
||||||
<p id="cmText1"></p>
|
|
||||||
<p id="cmText2"></p>
|
|
||||||
</div>
|
|
||||||
<p class="d-flex justify-content-between">
|
|
||||||
<a href="/privacy-notice">Privacy Notice</a>
|
|
||||||
<a href="#alert-options" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="alert-options">My Settings</a>
|
|
||||||
</p>
|
|
||||||
<div id="alert-options" class="collapse">
|
|
||||||
<div data-name="necessary">
|
|
||||||
<div class="form-check mb-1">
|
|
||||||
<input type="checkbox" checked disabled class="form-check-input" id="checkboxNecessary">
|
|
||||||
<label class="form-check-label" for="checkboxNecessary"><b>Necessary</b></label>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>Required to run the website</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!--div data-name="personalization">
|
|
||||||
<div class="form-check mb-1">
|
|
||||||
<input type="checkbox" class="form-check-input" id="checkboxPersonalization" name="checkboxPersonalization"
|
|
||||||
|
|
||||||
>
|
|
||||||
<label class="form-check-label" for="checkboxPersonalization"><b>Personalization</b></label>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>Storage of your preferences from previous visits</li>
|
|
||||||
<li>Collecting user feedback to improve our website</li>
|
|
||||||
<li>Recording of your interests in order to provide customised content and offers</li>
|
|
||||||
</ul>
|
|
||||||
</div-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Modal -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -18,10 +18,10 @@ var current_canvas_rect={}
|
||||||
var mouseX, mouseY
|
var mouseX, mouseY
|
||||||
var startX, startY
|
var startX, startY
|
||||||
|
|
||||||
var th_left = 504;
|
var th_left = 150;
|
||||||
var th_top = 0;
|
var th_top = 896;
|
||||||
var th_right = 3528;
|
var th_right = 2009;
|
||||||
var th_bottom = 3024;
|
var th_bottom = 2753;
|
||||||
|
|
||||||
var th_width = th_right - th_left;
|
var th_width = th_right - th_left;
|
||||||
var th_height = th_bottom - th_top;
|
var th_height = th_bottom - th_top;
|
||||||
|
@ -29,6 +29,8 @@ var th_height = th_bottom - th_top;
|
||||||
var effective_image_width = 4032;
|
var effective_image_width = 4032;
|
||||||
var effective_image_height = 3024;
|
var effective_image_height = 3024;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//drawRectInCanvas() connected functions -- START
|
//drawRectInCanvas() connected functions -- START
|
||||||
function updateHiddenInputs(){
|
function updateHiddenInputs(){
|
||||||
var inverse_ratio_w = effective_image_width / canvas.width;
|
var inverse_ratio_w = effective_image_width / canvas.width;
|
|
@ -0,0 +1,98 @@
|
||||||
|
<!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>
|
Loading…
Reference in New Issue