Как увеличить несколько элементов на холсте с помощью лупы javascript

Question

По сути, у меня есть веб-страница, которая отображает отрывок изображения из документа с использованием drawimage(x,z,width,height). Пользователь может нарисовать прямоугольник вокруг любой линии на изображении, щелкнув эту линию. Затем на изображении будет нарисован прямоугольник с использованием rect(x,y,w,h).

Используя лупу javascript, пользователь может навести курсор на изображение, чтобы увидеть его увеличенную версию. Однако он не показывает прямоугольник, нарисованный на изображении на холсте.

Можно ли нарисовать и прямоугольник, и изображение? в настоящее время это настройка лупы:

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

Позже есть код для фактического перемещения положения фона. Но я не вижу способа показать прямоугольник, нарисованный поверх изображения, на холсте, на лупе.

Если вам требуется дополнительная информация о написанном мной коде, дайте мне знать .

Обновление:

Проведя дополнительные исследования, я пришел к мысли, что можно было бы нарисовать 2 лупы на экране. Верхняя лупа будет рисовать прямоугольник, и поскольку это всего лишь прямоугольник с пустым пространством за ним, лупа должна нарисовать прямоугольник поверх изображения, которое увеличивается, так как увеличенное изображение находится на нижнем лупе.

Я еще не тестировал это, чтобы увидеть, работает ли он так, как я ожидал, или даже можно ли нарисовать на экране две лупы, как я планирую. Я попробую сегодня это проверить. А пока может кто-нибудь сообщить мне, сработает ли это или есть другой способ лучше? Спасибо за любую помощь в решении, как это сделать.

Обновление 2:

Исследование моей идеи обнаружило интересный механизм c. Если я поставлю c.parentElement.insertBefore(c,glass), ничего не изменится. НО если я поставлю c.parentElement.insertBefore(glass, c), увеличится изображение ЗА ХОЛСТОМ ! Поэтому я считаю, что если я нарисую холст поверх существующего, нарисуйте на нем прямоугольник. Затем, используя эту строку, я теоретически мог бы поместить лупу между прямоугольником и изображением, которое затем будет вести себя желаемым образом без необходимости увеличения нескольких элементов. *

---

Update 3:

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:

---

Update 4:

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

введите описание изображения здесь

Мои сослуживцы, кажется, верят, что можно каким-то образом нарисовать прямоугольник на немасштабированном изображении, чтобы лупа уловила его. Я не знаю, знает ли Javascript, как это сделать, и не знаю, сможет ли лупа отобразить изменения, если они были реализованы

Answer 1

Наконец-то я решил это, и это была настоящая задача. Для этого

• Мне пришлось нарисовать заэкранный холст
• Затем на этом новом холсте скопируйте текущее эталонное изображение и нарисуйте прямоугольник
• Сериализуйте результат в 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
    //   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

Если кто-нибудь может найти способ сделать это без необходимости постоянно перезагружать изображение и вызывать большой время задержки / ожидания. Пожалуйста, дайте мне знать