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

我正在尝试使用

画布

裁剪图像，并将该裁剪以无缝方式放置在原始图像上，以便分离不可见

以下是我所期望的工作：

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个属性<代码>游说团。我还知道，现实生活中的解决方案可能需要获得画布相对于图像的偏移量，但这只是一个简化的示例

---

下面是该示例的一个示例。

使用

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(
形象,，
canvasCoords.left*宽度刻度，canvasCoords.top*高度刻度，
canvasCoords.width*widthScale，canvas.height*heightScale，
0, 0,
canvasCoords.宽度，canvasCoords.高度
)

正文{
保证金：0；
}
div{
位置：相对位置；
}
img{
位置：绝对位置；
排名：0；
左：0；
宽度：500px；
身高：300；
}
帆布{
位置：绝对位置；
顶部：140px；
左：175px；
边框：2倍纯红；
}

---

如果可以从页面隐藏图像并在画布中执行所有操作，则可以使用再次绘制画布的技巧：

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

---

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