如何使用 JavaScript 放大镜放大 canvas 上的多个元素？

Question

我有一个网页，使用 drawimage(x,z,width,height) 显示文档中的图像摘录。用户可以通过单击线在图像上的任何给定线周围绘制一个矩形。然后使用 rect(x,y,w,h).

在图像上绘制一个矩形

使用 JavaScript 放大镜，用户可以将鼠标悬停在图像上以查看放大版本。但是，它不显示在 canvas.

上绘制到图像上的矩形

是否可以同时绘制矩形和图像？目前这是放大镜的设置：

//  - 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;

稍后会有实际移动背景位置的代码。但是我看不到在放大镜 canvas 中显示在图像顶部绘制的矩形的方法。

Answer 1

我终于解决了这个问题，这是一项艰巨的任务。

去做

我不得不画一个离屏canvas
然后在这个新的 canvas 上复制当前的主图像并在矩形
将结果序列化为 URL
然后把这个URL传到放大镜背景图片属性

这确实会在您每次要更改矩形位置时引入较长的加载时间。但允许矩形成为图像的一部分，以便放大镜拾取它。

这是代码（这是在 Omnis Studio 中完成的，如果有任何异常 JavaScript（在此之前还有很多代码。但这是解决方案，所以我'我只会显示这一点)):

// 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

// Create an offscreen canvas, put the image and then the bounding box
//var mc = document.createElement("canvas")

// Get an offscreen canvas. Saves from having to create it each time
var mc = document.getElementById('offscreenCanvas')

// Make the canvas the same size as the master image.
// Otherwise, whatever we render will be truncated.
mc.width = imgwidth
mc.height = imgheight

// Get the drawing context for this offscreen canvas
var mctx = mc.getContext("2d")

// Erase the previous box (if any)
mctx.clearRect(0, 0, mc.width, mc.height)

// Draw the full image onto our magnifier canvas, starting at (0, 0)
mctx.drawImage(img, 0, 0, imgwidth, imgheight)

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()

// Serialise the result of overlaying the box on the image
var r_img = mc.toDataURL("image/png")
//   window.location = r_img     // Debugging ... open image in a new
                                 // window window.open(r_img, "toDataURL() image")

// Get pre-existing div for the magnifier
glass = document.getElementById("magnifier")

// Our rendered image
glass.style.backgroundImage = "url(" + r_img + ")"

如果有人能找到一种方法来执行此操作而无需不断重新加载图像并导致大量 lag/wait 时间。请告诉我。

如何使用 JavaScript 放大镜放大 canvas 上的多个元素？

How can I magnify multiple elements on a canvas using the JavaScript magnifier?

javascript

canvas

magnify

magnifier.js