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

По сути, у меня есть веб-страница, на которой отображается отрывок изображения из документа с использованием 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.parentElement.insertBefore(c,glass)Ничего не меняется. НО если я вставлюc.parentElement.insertBefore(glass, c)лупа нарисована ЗА ХОЛСТОМ! Поэтому я считаю, что если я нарисую холст поверх существующего, нарисуйте на нем прямоугольник. Затем, используя эту строку, я теоретически мог бы расположить лупу между прямоугольником и изображением, которое затем будет выполнять желаемое поведение без необходимости увеличения нескольких элементов.

Наглядное пособие: вот что происходит сейчас

Это то что я хочу

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

Оказывается, мне нужно, чтобы прямоугольник был связан с расположением изображения, чтобы при перемещении лупы вниз прямоугольник оставался правильным относительно увеличения. Вот наглядное пособие по фактическим требованиям при перемещении лупы:

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

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

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

Источник

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

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

Источник
Другие вопросы по тегам