javascript - 如何使用 drawImage/putImageData 进行剪辑

Posted 2023-03-23

【中文标题】javascript - 如何使用 drawImage/putImageData 进行剪辑

【英文标题】：javascript - How to clip using drawImage/putImageData

【发布时间】：2017-02-01 14:18:07

【问题描述】：

我正在编写一个需要对画布上的图像进行静态剪辑的应用程序（当您在画布上移动图像时，剪辑区域会保持在一个位置）。我有三种情况：多边形、椭圆、用图像指定的任何形状。我能够处理多边形和椭圆，因为我可以用路径和弧线来处理它们，但是当涉及到通过图像指定的蒙版时，我不知道该怎么做。

要剪辑到的示例形状： Let's say I am not able to draw it using paths

所以我用图像指定了它，我知道如何从中获取图像数据。 我想要实现的是剪掉该数字之外的所有内容。

我是这样尝试的：

canvas.clipTo = function (ctx) 
    ctx.drawImage(shape.src, left, top);
;

像这样：

canvas.clipTo = function (ctx) 
    ctx.putImageData(imgData, left, top);
;

当然，它们都没有像我预期的那样工作，它只是绘制黑色形状而不是裁剪到那个区域。

有什么办法吗？

【问题讨论】：

您的蒙版在不透明的白色背景上看起来是不透明的黑色形状。这是您想要的还是您的实际蒙版是透明的而不是白色的？

【参考方案1】：

我通过创建一个与蒙版图像相同大小的新画布来做到这一点。然后在该画布上绘制图像，然后将ctx.globalCompositeOperation 设置为"destination-in" 在图像上绘制蒙版（屏蔽它），然后使用ctx.drawImage 将该画布绘制到屏幕上的画布

由于这绝对是一个重复的问题，我不会以代码的形式给出答案，它已经在 *** 上完成了。

哦，我忘了。使用 imageData 进行剪辑是一种非常低效的方法。

【讨论】：

屏蔽 .png 似乎完全不透明。希望这是提问者的错误，或者可能需要剔除白色背景。