Essentially I have a web page that displays an image excerpt from a document using
drawimage(x,z,width,height). The user has the ability to draw a rectangle around any given line on the image by clicking the line. The image then has a rectangle drawn on it using
Is it possible to draw both the rectangle and the image? currently this is the setup for the magnifier:
// - Setup the magnifier component var glass, w, h, bw; glass = document.getElementById("magnifier"); // Get pre-existing div for the magnifier glass.setAttribute("class", "img-magnifier-glass"); // set background properties for the magnifier glass: glass.style.backgroundImage = 'url("'+pRow.getValue("imgPath")+'")'; //pRow here refers to a parameter array that is passed in containing data about the image and rectangle glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = imgwidth + "px " + imgheight + "px"; bw = 3; // Border width of the magnifier glass. w = glass.offsetWidth / 2; h = glass.offsetHeight / 2;
Later on there is code to actually move the background position. But I don’t see a way to show the rectangle that is drawn on top of the image, in the canvas, on the magnifier.
If you require more information about the code I’ve written let me know.
Doing more research I’ve come up with the idea that it might be possible to draw 2 magnifiers on the screen. The top magnifier would draw the rectangle and since that is just a rectangle with empty space behind it, the magnifier should then draw the rectangle on top of the image that is being magnified as the magnified image is on the bottom magnifier.
I’ve yet to test this to see if it works as I expect or even possible to draw two magnifiers on screen like I plan. I will be trying to test this today. In the meantime could someone let me know if this will work or if there is another better way? Thanks for any assistance in solving how to do this.
Research into my idea has discovered an interesting mechanic. If I put in
c.parentElement.insertBefore(c,glass) Nothing changes. BUT if I put in
c.parentElement.insertBefore(glass, c) the magnifier is drawn BEHIND THE CANVAS! Therefore I believe if I draw a canvas on top of my existing one, draw the rectangle on it. Then using that line I could theoretically sandwich the magnifier between the rectangle and the image which would then do the desired behaviour without needing to magnify multiple elements.
Turns out that I require the rectangle to be linked with the image location so that when you move the magnifier down, the rectangle is still correct relative to the magnification Here is a visual aid of the actual requirement when you move the magnifier:
From discussion of this issue with my fellow workers, it might be possible to apparently draw the rectangle onto the master image that is being used to magnify. I have absolutely no idea how I would do so and nor do I know if the magnifier can pick up rectangle if I somehow learned how to drawn a rectangle onto the master image instead of the canvas image. to better explain here is a visual aid
Finally I have solved it and this one was quite the task. To do it
- I had to draw an offscreen canvas
- Then on this new canvas copy the current master image and draw on a rectangle
- Serialise the result in a URL
- Then pass this URL to the magnifier Background image property
This does introduce a long load time each time you want to change the rectangle location. But allows for the rectangle to become part of the image so the magnifier picks it up.
// Draw the same orange box, but on the original image size var img = document.getElementById('jp') // the master image. It will have been already loaded by now // var mc = document.createElement("canvas") // Create an offscreen canvas, put the image and then the bounding box var mc = document.getElementById('offscreenCanvas') // Get an offscreen canvas. saves from having to create it each time mc.width = imgwidth // Make the canvas the same size as the master image. Otherwise whatever we render will be truncated. mc.height = imgheight var mctx = mc.getContext("2d") // Get the drawing context for this offscreen canvas mctx.clearRect(0,0,mc.width,mc.height) // Erase the previous box (if any) mctx.drawImage(img,0,0,imgwidth,imgheight) // Draw the full image onto our magnifier canvas, starting at (0,0) mctx.beginPath() // Create our selection box mctx.strokeStyle = "orange"// mctx.lineWidth = 8 // Because we're "zoomed in", make this line a little thicker boxX = pRow.getValue("x") // Top left x coordinate - unscaled coordinates boxY = pRow.getValue("y") // top left y coordinate boxW = pRow.getValue("width") // distance right boxH = pRow.getValue("height") // distance down mctx.rect(boxX,boxY,boxW,boxH) mctx.stroke() var r_img = mc.toDataURL("image/png") // Serialise the result of overlaying the box on the image // window.location=r_img // Debugging ... open image in a new window window.open(r_img, "toDataURL() image") glass = document.getElementById("magnifier") // Get pre-existing div for the magnifier glass.style.backgroundImage = "url("+r_img+")" // Our rendered image
If anyone can find a way to do this without needing to constantly reload the image and cause a large amount of lag/wait time. Please let me know