I have tried to port a Javascript program for a magnifier via Transcrypt to Python code. Unfortunately I can not get rid of the frame of the magnifier which completely overrides the complete image. The orginal code was located here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom
The Python code I did out of it is:
class Magnifier():
def __init__(self):
self.img = document.getElementById("myimage")
self.saved_src = self.img.src
print(self.saved_src)
self.resultat = document.getElementById("myresult");
# create lens:
self.lens = document.createElement("DIV");
self.lens.setAttribute("class", "img-zoom-lens");
# insert lens:
self.img.parentElement.insertBefore(self.lens, self.img);
# calculate the ratio between result DIV and lens:
self.cx = self.resultat.offsetWidth / self.lens.offsetWidth;
self.cy = self.resultat.offsetHeight / self.lens.offsetHeight;
# set background properties for the result DIV:
self.resultat.style.backgroundImage = "url('" + self.img.src + "')";
self.resultat.style.backgroundSize = (self.img.width * self.cx) + "px " + (self.img.height * self.cy) + "px";
# execute a function when someone moves the cursor over the image, or the lens:
window.addEventListener("mousemove", self.moveLens);
self.img.addEventListener("mousemove", self.moveLens);
# and also for touch screens:
self.lens.addEventListener("touchmove", self.moveLens);
self.img.addEventListener("touchmove", self.moveLens);
console.log("run")
self.counter = 0
def moveLens(self, e):
# console.log("moveLens")
self.img.src = self.saved_src + "?" + __new__(Date().getTime())
if (not e): e = window.event # only for IE which has window.event
a = self.img.getBoundingClientRect();
# e.preventDefault()
# get the cursor's x and y positions:
# calculate the cursor's x and y coordinates, relative to the image:
x = e.pageX - a.left;
y = e.pageY - a.top;
# print (a, e.pageX, e.pageY)
# consider any page scrolling:
x = x - window.pageXOffset;
y = y - window.pageYOffset;
# print (x, y)
# calculate the position of the lens:
# create lens:
self.lens = document.createElement("DIV");
self.lens.setAttribute("class", "img-zoom-lens");
self.lens.setAttribute("position", "absolute")
self.img.parentElement.insertBefore(self.lens, self.img)
x = x - (self.lens.offsetWidth / 2);
y = y - (self.lens.offsetHeight / 2);
# prevent the lens from being positioned outside the image:
if (x > self.img.width - self.lens.offsetWidth): x = self.img.width - self.lens.offsetWidth
if (x < 0): x = 0;
if (y > self.img.height - self.lens.offsetHeight): y = self.img.height - self.lens.offsetHeight;
if (y < 0): y = 0;
# set the position of the lens:
print ("xy", x, y)
self.lens.style.left = str(x) + "px";
self.lens.style.top = str(y) + "px";
# display what the lens "sees":
self.resultat.style.backgroundPosition = "-" + str(x * self.cx) + "px -" + str(y * self.cy) + "px";
magnificent = Magnifier()
And this is the html for it:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="myimage" src="https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/master/user-interface/computer-desktop.jpg" width="300" height="215">
<div id="myresult" class="img-zoom-result"></div>
</div>
<p>The image must be placed inside a container with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>
<script src="__javascript__/magnifier.js" charset="UTF-8"></script>
</body>
</html>
Any ideas what could be wrong? If comment out the line:
self.img.parentElement.insertBefore(self.lens, self.img)
I don't see the frame at all and it works at least half way. But it would be nice to have the boundary around the magnified space.
You create new lenses over and over again in your
moveLensmethod and assign the youngest of them toself.lens, overwriting the reference to the previous one (but not destroying the previous lens itself) in the following code:You only move the last one you created, the rest remains visible and stays in the place where they were created, since
self.lens.style.left = <position>only moves the most recently created one.So it's just a matter of taking some code out. The following code will work. But it probably can be streamlined a bit.