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

Question

我在图像上方有一个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>

我附上了一个显示问题的stackblitz示例。 https://stackblitz.com/edit/angular-4untgz?file=src%2Fapp%2Fapp.component.ts

有人可以告诉我如何实现吗？

Answer 1

您需要注意img的矩形边界以及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
);

Here is working code