javascript - 使用 Canvas 在原始图像上创建无缝图像裁剪

Question

我正在尝试使用 canvas 裁剪图像，并以无缝方式将裁剪图像放置在原始图像上，这样分离就不会可见。

这是我期望的工作:

const image = document.querySelector("img")
const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
canvasCoords = canvas.getBoundingClientRect()
ctx.drawImage(
  image,
  canvasCoords.left, canvasCoords.top,
  canvasCoords.width, canvas.height,
  0, 0,
  canvasCoords.width, canvasCoords.height
)

我希望裁剪填充我的 Canvas ，因此需要最后 4 个属性。 Canvas 坐标。此外，我知道现实生活中的解决方案将涉及获取 Canvas 相对于图像的偏移量，但这只是一个简化的示例。

这是一个JS Fiddle那个例子。

Answer 1

使用 image.naturalWidth/image.width 和 image.naturalHeight/image.height 计算宽度和高度比例，如下所示:

const image = document.querySelector("img")
const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
canvasCoords = canvas.getBoundingClientRect()
const widthScale = image.naturalWidth / image.width
const heightScale = image.naturalHeight / image.height
ctx.drawImage(
  image,
  canvasCoords.left * widthScale, canvasCoords.top * heightScale,
  canvasCoords.width * widthScale, canvas.height * heightScale,
  0, 0,
  canvasCoords.width, canvasCoords.height
)

body {
  margin: 0;
}

div {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 300;
}

canvas {
  position: absolute;
  top: 140px;
  left: 175px;
  border: 2px solid red;
}

<div>
  <img src="http://www.savoie-mont-blanc.com/var/smb/storage/images/media/images/visites-et-decouvertes/nature/lac-des-vaches-a-pralognan-la-vanoise-parc-national-de-la-vanoise/359903-1-fre-FR/Lac-des-Vaches-a-Pralognan-la-Vanoise-Parc-national-de-la-Vanoise_default_format.jpg">
  <canvas width="150" height="50"></canvas>
</div>