使用画布

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
)

我希望裁剪填充我的画布，因此最后4个属性。 canvasCoords。另外我知道现实生活中的解决方案会让画布相对于图像偏移，但这只是一个简化的例子。

以下是该示例的JS Fiddle。

Answer 1

使用"navbar-right"和margin-left: auto; 计算宽度和高度比例，如下所示：

＆＃13;

＆＃13;

image.naturalWidth / image.width

＆＃13;

image.naturalHeight / image.height

＆＃13;

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
)

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

JS Fiddle