javascript - Canvas drawImage 使用图像顶部的 div 位置

Question

我有一个位于图像顶部的 div。我必须获取覆盖 div 内的图像内容并使用 Canvas 绘制。
我面临的问题是，我无法绘制正确的图像。我必须以编程方式在 div 下方获取正确的图像。
下图显示了原始图像和 Canvas 中绘制图像的比较。

下面是我的代码，它通过获取 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
);
}

以及显示图像和 Canvas 元素的 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