Javascript 使用div在图像顶部的位置绘制图像

我有一个div在图像的顶部。我必须得到的图像内容，这是在覆盖div和绘制使用画布

我面临的问题是，我无法画出正确的图像。我必须通过编程获得div下面的正确图像

下图显示了原始图像和画布中绘制图像的比较

下面是我的代码，它以div的坐标绘制图像：

  DrawImage() {
var canvas: any = document.getElementById("myCanvas");
var canvasRef = canvas.getBoundingClientRect();
var ctx = canvas.getContext("2d");

var imagemarker = document.getElementById("imagemarker");
var markerRef = imagemarker.getBoundingClientRect();

var img = document.getElementById("myimage");

ctx.drawImage(
  img,
  markerRef.left,
  markerRef.top,
  markerRef.width,
  markerRef.height,
  0,
  0,
  canvasRef.width,
  canvasRef.height
);
}

以及显示图像和画布元素的html代码：

<button (click)="DrawImage()">Draw</button>
  <div id="imagemarkercontainer">
    <div id="imagemarker"></div>
  </div>
  <img id="myimage" src="https://imgur.com/NWQo2xk.jpeg" width="300px" 
     height="250px">
   <br>
     <canvas id="myCanvas" width="300px" height="250px" style="border:1px 
      solid #d3d3d3;"></canvas>

Draw

我附上了一个stackblitz示例来说明这个问题

---

如何实现这一点？

您需要注意

img

bounding rect以及

natural

图像的宽度和高度

设置图像宽度和高度时，获取

naturalWidth

并按如下方式计算比例宽度

var imgRef = img.getBoundingClientRect();
var nWidth = img.naturalWidth;
var nHeight = img.naturalHeight;


ctx.drawImage(
  img,
  ( markerRef.left - imgRef.left) * nWidth /img.width ,
  ( markerRef.top -imgRef.top) * nHeight / img.height ,
  markerRef.width * nWidth /img.width,
  markerRef.height * nHeight / img.height ,
  0,
  0,
  canvasRef.width,
  canvasRef.height
);

---

将代码的相关部分添加到问题中。您可以从stackblitz复制代码的画布绘图部分并粘贴到此处。@sabithpocker将html和javascript代码添加到question@abhilashreddy您需要注意在画布上裁剪图像的自然宽度和高度。我一直在尝试使用“偏移顶部”、“偏移左侧”等属性，但不知道自然宽度和高度。非常感谢你，瑜珈师。