marker.js
parent
52f2bc6822
commit
ca3e569f32
|
|
@ -8,5 +8,6 @@
|
|||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
<orderEntry type="library" name="markerjs2" level="application" />
|
||||
</component>
|
||||
</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>
|
||||
<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>
|
||||
<script src="js/select.js"></script>
|
||||
|
||||
<!-- End Main content -->
|
||||
</main>
|
||||
|
|
@ -391,59 +93,5 @@
|
|||
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
||||
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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@ var current_canvas_rect={}
|
|||
var mouseX, mouseY
|
||||
var startX, startY
|
||||
|
||||
var th_left = 504;
|
||||
var th_top = 0;
|
||||
var th_right = 3528;
|
||||
var th_bottom = 3024;
|
||||
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;
|
||||
|
|
@ -29,6 +29,8 @@ 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;
|
||||
|
|
@ -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