如何在 div 內的圖像上繪制矩形框？

Question

我開發了一個頁面，我可以在其中動態導入圖像並將它們顯示在 div 標簽中。 現在我想在圖像上繪制一個矩形，它應該從圖像上的任何點開始。

我參考了許多來源並試圖從中實現這個想法。

  <style>
#rubberBand {
position: absolute;
visibility: hidden;
 width: 0px; height: 0px;
 border: 2px solid red;
}
 </style>

   <div class="imageside" id="picture"> </div>
   <div ID="rubberBand"></div>

在上面的代碼中，圖像顯示在 div id "picture" 處。 直到這部分代碼工作正常。

 var pic, rubber, pt = { x: 0, y: 0 };

 picture= getpicture();

 function getpicture(){
 pic= document.getElementById('picture')
 pic.innerHTML= getgImage(event.target.dataset.number);

 }

 function startRubber (evt) {
 var ev = evt || window.event,
  rs = rubber.style,
  bb = pic.innerHTML.getBoundingClientRect();
  console.dir(ev);
  rs.left = bb.left + 'px';
  rs.top = bb.top + 'px';
  rs.width = bb.width + 'px';
  rs.height = bb.height + 'px';
  rs.display = 'block';
  pt = { x: ev.clientX - bb.left, y: ev.clientY - bb.top };
  return false;
  }

  function stopRubber () {
  rubber.style.display = 'none';
  }

  function moveRubber (evt) {
  var ev = evt || window.event;
  rubber.style.left = (evt.clientX - pt.x) + 'px';
  rubber.style.top = (evt.clientY - pt.y) + 'px';
  }

  rubber = document.getElementById('rubberBand');

  pic = document.getElementById('picture').innerHTML;

  pic.onmousedown = startRubber;
  document.onmouseup = stopRubber;
  document.onmousemove = moveRubber;

在上面的代碼中，function getpicture() 負責動態顯示圖像。 當我執行上述代碼時，圖像顯示在頁面上，但我無法在圖像上繪制矩形。 在控制台中，沒有錯誤。 有人可以幫我解決問題並幫助我在圖像上繪制矩形。

Answer 1

看一下這個。

https://jsfiddle.net/2at9n7ye/3/

您的問題是您在加載之前訪問 pic 變量。

var pic, rubber, pt = {
  x: 0,
  y: 0
};

picture = getpicture();

function getpicture() {
  pic = document.getElementById('picture');
  pic.innerHTML = "<img src='https://i.imgur.com/mvMlmMb.jpg' id='img' width='100px' height='100px'/>";

}

function startRubber(evt) {
  var ev = evt || window.event,
    rs = rubber.style,
    bb = pic.getBoundingClientRect
  rs.left = bb.left + 'px';
  rs.top = bb.top + 'px';
  rs.width = bb.width + 'px';
  rs.height = bb.height + 'px';
  rs.display = 'block';
  pt = {
    x: ev.clientX - bb.left,
    y: ev.clientY - bb.top
  };
  return false;
}

function stopRubber() {
  rubber.style.display = 'none';
}

function moveRubber(evt) {
  var ev = evt || window.event;
  rubber.style.left = (evt.clientX - pt.x) + 'px';
  rubber.style.top = (evt.clientY - pt.y) + 'px';
}

(function() {
  rubber = document.getElementById('rubberBand');
  pic = document.getElementById('picture');
  pic.addEventListener("mousedown", startRubber);
  document.addEventListener("mouseup", stopRubber);
  document.addEventListener("mousemove", moveRubber);
})();