Javascript 如何在div中的图像上绘制矩形框？

我开发了一个页面，动态导入图像并将其显示在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>

在上面的代码中，函数getpicture（）负责动态显示图像。当我执行上述代码时，图像显示在页面上，但我无法在图像上绘制矩形。在控制台中，没有错误。有人能帮我解决这个问题，并帮我在图像上画一个矩形。

看看这个

您的问题是，在加载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);
})();

var pic，橡胶，pt={
x:0,，
y:0
};
picture=getpicture（）；
函数getpicture（）{
pic=document.getElementById（'picture'）；
pic.innerHTML=“”；
}
功能启动器（evt）{
var ev=evt | | window.event，
rs=橡胶。样式，
bb=pic.getBoundingClientRect
rs.left=bb.left+'px'；
rs.top=bb.top+‘px’；
rs.宽度=bb.宽度+px'；
rs.高度=bb.高度+px'；
rs.display='block'；
pt={
x:ev.clientX-bb.左，
y:ev.clientY-bb.top
};
返回false；
}
功能停止橡胶（）{
ruber.style.display='none'；
}
功能橡胶（evt）{
var ev=evt | | window.event；
ruber.style.left=（evt.clientX-pt.x）+“px”；
ruber.style.top=（evt.clientY-pt.y）+“px”；
}
（功能（）{
ruber=document.getElementById（'rubberBand'）；
pic=document.getElementById（'picture'）；
图.addEventListener（“mousedown”，startRubber）；
文件.增补的列表（“鼠标”，停止橡胶）；
文件。添加了文本列表（“mousemove”，moveRubber）；
})();

看看这个

您的问题是，在加载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);
})();

var pic，橡胶，pt={
x:0,，
y:0
};
picture=getpicture（）；
函数getpicture（）{
pic=document.getElementById（'picture'）；
pic.innerHTML=“”；
}
功能启动器（evt）{
var ev=evt | | window.event，
rs=橡胶。样式，
bb=pic.getBoundingClientRect
rs.left=bb.left+'px'；
rs.top=bb.top+‘px’；
rs.宽度=bb.宽度+px'；
rs.高度=bb.高度+px'；
rs.display='block'；
pt={
x:ev.clientX-bb.左，
y:ev.clientY-bb.top
};
返回false；
}
功能停止橡胶（）{
ruber.style.display='none'；
}
功能橡胶（evt）{
var ev=evt | | window.event；
ruber.style.left=（evt.clientX-pt.x）+“px”；
ruber.style.top=（evt.clientY-pt.y）+“px”；
}
（功能（）{
ruber=document.getElementById（'rubberBand'）；
pic=document.getElementById（'picture'）；
图.addEventListener（“mousedown”，startRubber）；
文件.增补的列表（“鼠标”，停止橡胶）；
文件。添加了文本列表（“mousemove”，moveRubber）；
})();