Develop Reference

Cursor wont align with HTML Canvas on longer and thinner images

I have a canvas that I am trying to draw on whenever I use square images with dimensions like such:
Width:2925
Height:2354
My cursor works correctly. When I use images with dimensions like Width: 585 Height: 2354 My cursor refuses to align correctly. Here is my JS I am using:
var canvas;
var ctx;
var canvasOffset;
var offsetX;
var offsetY;
var isDrawing = false;
var drag = false;
var rect = {};
var background = new Image();
//canvas.height = background.height;
//canvas.width = background.width;
var aspectRatio;
var parentOffsetWidth;
var parentOffsetHeight;
// Make sure the image is loaded first otherwise nothing will draw.
$(background).on("load", function () {
//ctx.drawImage(background,0,0);
//ctx.width = background.width;
//drawImageProp(ctx, background, 0, 0, background.width, background.height);.
//coverImg(background, 'cover');
//coverImg(background, 'contain');
//ctx.drawImage(background, 0, 0, background.width,background.height,0, 0, ctx.width, ctx.height);
console.log("--background img load--");
parentOffsetWidth = document.getElementById("imgGrid").offsetWidth;
parentOffsetHeight = document.getElementById("imgGrid").offsetHeight;
console.log("w:" + parentOffsetWidth);
console.log("h:" + parentOffsetHeight);
if (parentOffsetWidth < 500) {
//if img is to small to render properly
//parentOffsetWidth = 500;
}
if (background != null) {
canvas.height = (background.height / background.width) * parentOffsetWidth;
canvas.width = parentOffsetWidth;
}
//coverImg(background, 'cover');
drawImageProp(ctx, background, 0, 0, canvas.width, canvas.height, offsetX, offsetY);
})
$(document).ready(function () {
//ctx.drawImage(background,0,0);
})
function Load(backgroundImgSrc) {
console.log("--load--");
console.log(backgroundImgSrc);
background.src = backgroundImgSrc;
aspectRatio = background.height / background.width;
canvas = document.getElementById("canvas");
canvasOffset = $("#canvas").offset();
offsetX = canvasOffset.left;
offsetY = canvasOffset.top;
ctx = canvas.getContext("2d");
init();
}
var startX;
var startY;
const coverImg = (img, type) => {
const imgRatio = img.height / img.width
const winRatio = window.innerHeight / window.innerWidth
if ((imgRatio < winRatio && type === 'contain') || (imgRatio > winRatio && type === 'cover')) {
const h = window.innerWidth * imgRatio
ctx.drawImage(img, 0, (window.innerHeight - h) / 2, window.innerWidth, h)
}
if ((imgRatio > winRatio && type === 'contain') || (imgRatio < winRatio && type === 'cover')) {
const w = window.innerWidth * winRatio / imgRatio
ctx.drawImage(img, (window.w - w) / 2, 0, w, window.innerHeight)
}
}
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
if (arguments.length === 2) {
x = y = 0;
w = ctx.canvas.width;
h = ctx.canvas.height;
}
// default offset is center
offsetX = typeof offsetX === "number" ? offsetX : 0.5;
offsetY = typeof offsetY === "number" ? offsetY : 0.5;
// keep bounds [0.0, 1.0]
if (offsetX < 0) offsetX = 0;
if (offsetY < 0) offsetY = 0;
if (offsetX > 1) offsetX = 1;
if (offsetY > 1) offsetY = 1;
var iw = img.width,
ih = img.height,
r = Math.min(w / iw, h / ih),
nw = iw * r, // new prop. width
nh = ih * r, // new prop. height
cx, cy, cw, ch, ar = 1;
// decide which gap to fill
if (nw < w) ar = w / nw;
if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated
nw *= ar;
nh *= ar;
// calc source rectangle
cw = iw / (nw / w);
ch = ih / (nh / h);
cx = (iw - cw) * offsetX;
cy = (ih - ch) * offsetY;
// make sure source rectangle is valid
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cw > iw) cw = iw;
if (ch > ih) ch = ih;
// fill image in dest. rectangle
ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
}
////////////////////////////////////
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
console.log(e);
rect.Left = e.pageX - offsetX;
rect.Top = e.pageY - offsetY;
rect.Left_Percentage = (rect.Left / canvas.width) * 100;
rect.Top_Percentage = (rect.Top / canvas.height) * 100;
drag = true;
}
function mouseUp() {
drag = false;
//ctx.clearRect(0,0,canvas.width,canvas.height);
canvas.style.cursor = "default";
window.dotnetInstance.invokeMethodAsync("ShowPopup", rect);
}
function mouseMove(e) {
if (drag) {
rect.Width = (e.pageX - offsetX) - rect.Left;
rect.Height = (e.pageY - offsetY) - rect.Top;
rect.Height_Percentage = (rect.Height/canvas.height) * 100;
rect.Width_Percentage = (rect.Width / canvas.width) * 100;
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
}
}
function draw() {
ctx.setLineDash([10]);
ctx.strokeRect(rect.Left, rect.Top, rect.Width, rect.Height);
}
window.SetDotNetInstance = (dotnetHelper) => {
console.log(dotnetHelper);
if (window.dotnetInstance == null) {
window.dotnetInstance = dotnetHelper;
}
}
function toggleDisplay(current) {
if ($(current).is(":checked")){
$(".clickRegionBlock").hide();
$(".blockNumberInfo").hide();
$("#imgGrid>.border").removeClass("border")
}
else {
$(".clickRegionBlock").show();
$(".blockNumberInfo").show();
$("#imgGrid>.box-border").addClass("border");
}
}
function Zoom() {
var gridSizes = $("#imgGrid").css("grid-template-columns");
var splitArrPx = gridSizes.split(" ");
var firstpx = parseInt(splitArrPx[0].replace("px", ""));
firstpx += 100;
var zoomedGridSizes = "";
splitArrPx.forEach(function (item, index, arr) {
var replacedItem = item.replace(/\d+/, firstpx);
zoomedGridSizes += replacedItem + " ";
})
console.log(zoomedGridSizes);
$("#imgGrid").css("grid-template-columns", zoomedGridSizes);
Load(background.src);
}
And here is my HTML code I am using .Net Blazor as well to achieve this that is why there are variables in my HTML it should not effect my javascript:
<canvas id="canvas" style="background-image:url('api/contentpreview/blocks/#b.PageId/#b.LocalIndex/#Resolution/#zone'); width:100%; height:auto; background-size:cover;" #onload='() => LoadImg("api/contentpreview/blocks/" + b.PageId + "/" + b.LocalIndex + "/" + Resolution + "/" + zone)' />
initCanvas = true;
canvasImg = "api/contentpreview/blocks/" + b.PageId + "/" + b.LocalIndex + "/" + Resolution + "/" + zone;

Image zoom on multiple images

I've used a pretty standard image zoom effect from the following example: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp
The HTML + CSS + JS is pretty much exactly what is used in the example above.
This works perfectly on 1 image. However when multiple images are used it only works on the first image.
I'm pretty sure it's to do with using getElementById instead of querySelectorAll for some things (possibly var img and var result) hence why it's only applying to the first instance of #myimage.
Can anyone help me run this code but loop it over ALL images (with #myimage as the ID)?
Much appreciated!
Original code below:
JAVASCRIPT:
// enable image zoom
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/* Create lens: */
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/* Insert lens: */
img.parentElement.insertBefore(lens, img);
/* Calculate the ratio between result DIV and lens: */
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/* Set background properties for the result DIV */
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/* Execute a function when someone moves the cursor over the image, or the lens: */
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/* And also for touch screens: */
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/* Prevent any other actions that may occur when moving over the image */
e.preventDefault();
/* Get the cursor's x and y positions: */
pos = getCursorPos(e);
/* Calculate the position of the lens: */
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/* Prevent the lens from being positioned outside the image: */
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/* Set the position of the lens: */
lens.style.left = x + "px";
lens.style.top = y + "px";
/* Display what the lens "sees": */
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/* Get the x and y positions of the image: */
a = img.getBoundingClientRect();
/* Calculate the cursor's x and y coordinates, relative to the image: */
x = e.pageX - a.left;
y = e.pageY - a.top;
/* Consider any page scrolling: */
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
imageZoom("myimage", "myresult");
HTML:
<img src='https://via.placeholder.com/250' id="myimage">
<div id="myresult" class="img-zoom-result"></div>

Something like this?
function magnify(img, zoom) {
var glass, w, h, bw;
/* Create magnifier glass: */
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/* Insert magnifier glass: */
img.parentElement.insertBefore(glass, img);
/* Set background properties for the magnifier glass: */
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/* Execute a function when someone moves the magnifier glass over the image: */
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/* Prevent any other actions that may occur when moving over the image */
e.preventDefault();
/* Get the cursor's x and y positions: */
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/* Prevent the magnifier glass from being positioned outside the image: */
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
if (x < w / zoom) {x = w / zoom;}
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
if (y < h / zoom) {y = h / zoom;}
/* Set the position of the magnifier glass: */
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/* Display what the magnifier glass "sees": */
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/* Get the x and y positions of the image: */
a = img.getBoundingClientRect();
/* Calculate the cursor's x and y coordinates, relative to the image: */
x = e.pageX - a.left;
y = e.pageY - a.top;
/* Consider any page scrolling: */
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
[…document.querySelectorAll(“#myimage”)].forEach( img => {
magnify(img,3);
})

How can I show my magnifying glass only when I hover over the image in CSS?

// magnify hover
function magnify(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/*create magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/*insert magnifier glass:*/
img.parentElement.insertBefore(glass, img);
/*set background properties for the magnifier glass:*/
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*execute a function when someone moves the magnifier glass over the image:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
if (x < w / zoom) {x = w / zoom;}
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
if (y < h / zoom) {y = h / zoom;}
/*set the position of the magnifier glass:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("mag", 2);
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 3px solid #000;
border-radius: 40%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
}
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block"><tr><td width="115" style="text-align: center"><center><img class="cover" width="115" height="133" border="0" id="mag" class="pstrart" id="pstr" src="https://images.static-bluray.com/movies/covers/174423_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="Logan" style="width: 15px; height: 15px; margin: 0px;">
Hello,
How can I make the magnifier show only when I hover over the image? I have tried searching on this website and elsewhere, but I don't understand enough to make the solutions apply to my situation.
I copied this from W3School but they don't have a section where they explain that I can make it show when I hover over it.
I have modals on my sight and tried to replicate the hovering features of it but it doesn't seem to work.
Thanks!

Simply toggle opacity on hover:
// magnify hover
function magnify(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/*create magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/*insert magnifier glass:*/
img.parentElement.insertBefore(glass, img);
/*set background properties for the magnifier glass:*/
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*execute a function when someone moves the magnifier glass over the image:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
if (x < w / zoom) {x = w / zoom;}
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
if (y < h / zoom) {y = h / zoom;}
/*set the position of the magnifier glass:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("mag", 2);
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 3px solid #000;
border-radius: 40%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
opacity:0;
pointer-events:none;
}
a:hover .img-magnifier-glass{
opacity:1;
pointer-events:initial;
}
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block"><tr><td width="115" style="text-align: center"><center><img class="cover" width="115" height="133" border="0" id="mag" class="pstrart" id="pstr" src="https://images.static-bluray.com/movies/covers/174423_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="Logan" style="width: 15px; height: 15px; margin: 0px;">

You can use javascript mouse event handlers. I modified your code snippet below.
What I did is,
.img-magnifier-glass {
...
display:none; // hide the magnifier by default
}
// Show the magnifier when hover the container
$('.img-magnifier-container').mouseover(function(){
$('.img-magnifier-glass').show();
});
// Hide the magnifier when leave the container
$('.img-magnifier-container').mouseout(function(){
$('.img-magnifier-glass').hide();
});
// magnify hover
function magnify(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
/*create magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/*insert magnifier glass:*/
img.parentElement.insertBefore(glass, img);
/*set background properties for the magnifier glass:*/
glass.style.backgroundImage = "url('" + img.src + "')";
glass.style.backgroundRepeat = "no-repeat";
glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
bw = 3;
w = glass.offsetWidth / 2;
h = glass.offsetHeight / 2;
/*execute a function when someone moves the magnifier glass over the image:*/
glass.addEventListener("mousemove", moveMagnifier);
img.addEventListener("mousemove", moveMagnifier);
/*and also for touch screens:*/
glass.addEventListener("touchmove", moveMagnifier);
img.addEventListener("touchmove", moveMagnifier);
function moveMagnifier(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
x = pos.x;
y = pos.y;
/*prevent the magnifier glass from being positioned outside the image:*/
if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
if (x < w / zoom) {x = w / zoom;}
if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
if (y < h / zoom) {y = h / zoom;}
/*set the position of the magnifier glass:*/
glass.style.left = (x - w) + "px";
glass.style.top = (y - h) + "px";
/*display what the magnifier glass "sees":*/
glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("mag", 2);
$('.img-magnifier-container').mouseover(function(){
$('.img-magnifier-glass').show();
});
$('.img-magnifier-container').mouseout(function(){
$('.img-magnifier-glass').hide();
});
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 3px solid #000;
border-radius: 40%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block"><tr><td width="115" style="text-align: center"><center><img class="cover" width="115" height="133" border="0" id="mag" class="pstrart" id="pstr" src="https://images.static-bluray.com/movies/covers/174423_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="Logan" style="width: 15px; height: 15px; margin: 0px;">

popup div from hovering an image from javascript function

so I was working on something on the side and I was trying to create a pop-up zoom window (div) using the JavaScript function on this page: https://www.w3schools.com/howto/howto_js_image_zoom.asp
I tried several things and looked at many questions on here but couldn't figure it out. I can paste the code here too if needed or more explanation on what I am trying to do. Any suggestions would be greatly appreciated!

Update:
http://jsfiddle.net/gb0xcuwz/23/
Just added a little css (which is self-explanatory)
(I hope this is what you wanted)
Old answer:
(keeping it in case someone wants it)
Okay so you provided this: http://jsfiddle.net/gb0xcuwz/5 in the comment.
I made some changes based on hit and trial method (it that a phrase?) and came up with this : http://jsfiddle.net/gb0xcuwz/16/
Here's a code snippet also :
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
//create lens:
lens = document.createElement("img");
lens.setAttribute("class", "img-zoom-lens");
//insert lens:
img.parentElement.insertBefore(lens, img);
//calculate the ratio between result DIV and lens:
cx = 300 / lens.offsetWidth;
cy = 300 / lens.offsetHeight;
//set background properties for the result DIV:
lens.style.backgroundImage = "url('" + img.src + "')";
lens.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
//execute a function when someone moves the cursor over the image, or the lens:
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
//and also for touch screens:
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
//img.addEventListener("mouseenter", result);
function moveLens(e) {
var pos, x, y;
//prevent any other actions that may occur when moving over the image:
e.preventDefault();
//get the cursor's x and y positions:
pos = getCursorPos(e);
//calculate the position of the lens:
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
//prevent the lens from being positioned outside the image:
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
//set the position of the lens:
lens.style.left = x + "px";
lens.style.top = y + "px";
//display what the lens "sees":
lens.style.backgroundPosition = "-" + (x * cx + lens.offsetWidth) + "px -" + (y * cy + lens.offsetHeight) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
//get the x and y positions of the image:
a = img.getBoundingClientRect();
//calculate the cursor's x and y coordinates, relative to the image:
x = e.pageX - a.left;
y = e.pageY - a.top;
//consider any page scrolling:
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
document.addEventListener("DOMContentLoaded", function(){
imageZoom("myimage", "myresult");
})
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 3px solid #A9A9A9;
width: 100px;
height: 100px;
}
<body>
<h1>Picture</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="myimage" src="https://i.imgur.com/50dDbmr.jpg" width="300" height="200">
</div>
</body>

drag SVG element to a new location

if (action == "mousedown") {
startx = x;
starty = y;
}
if (action == "mousemove") {
if (!mouseisdown) {
return;
} else {
//console.log(target);
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
}
if (action == "mouseup") {
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
Below is my way to get x, y position:
$("svg").on("mousedown", function (event) {
mouseisdown = true;
var offset = $("#center").offset(); //#center is the canvas
var x = event.pageX - offset.left;
var y = event.pageY - offset.top;
current_tool("mousedown", x, y, null);
});
Above is part of my code, my problem is this function works well on the first move, but when I tried to move it second time, the element object will suddenly back to its origin location before this first move, How to fix that problem?
Any help is appreciated.

if (action == "mousedown") {
startx = x - test.transform.animVal["0"].matrix.e; //change
starty = y - test.transform.animVal["0"].matrix.f; // change2
}
if (action == "mousemove") {
if (!mouseisdown) {
return;
} else {
if (test.transform.animVal["0"]) {
console.log(test.transform.animVal["0"].matrix);
var transformX = x - startx;
var transformY = y - starty;
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
}
}
if (action == "mouseup") {
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
Problem solved by myself, the reason of the problem is that, when I tries the second move, the start position did not take the first transform into consider, so after the change the code in "mousedown" handler, the problem settled.