使用画布在原始图像上创建无缝图像裁剪答案

【问题标题】：Create a seamless image crop over original image with canvas使用画布在原始图像上创建无缝图像裁剪
【发布时间】：2018-02-22 08:07:50
【问题描述】：

我正在尝试使用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
)

我希望作物填满我的画布，因此最后 4 个属性。 canvasCoords。此外，我知道现实生活中的解决方案将涉及获取画布相对于图像的偏移量，但这只是一个简化的示例。

这是该示例的JS Fiddle。

【问题讨论】：

drawImage 使用图像的自然大小，但您的元素通过 css 调整大小。因此，您确实需要相对于元素的大小设置绘制图像的大小，或者根本不通过 css 设置大小。

标签： javascript canvas

【解决方案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>

【讨论】：

【解决方案2】：

如果你可以从页面中隐藏图像并在画布中做所有事情，你可以使用再次绘制画布的技巧：

ctx.drawImage(
  canvas,
  0, 0,
  150,50,
  0,0,150,50
)

JS Fiddle

【讨论】：