如何仅将 context.filter 应用于画布上的图像？答案

【问题标题】：How do I apply context.filter only to the image on the canvas?如何仅将 context.filter 应用于画布上的图像？
【发布时间】：2021-03-24 18:13:33
【问题描述】：

我正在制作一个照片编辑器，您可以在其中上传图像、添加过滤器、放置文本、用铅笔绘图等。问题是我只想要图像上的过滤器适用于画布上的所有内容.我不希望它应用于文本和用铅笔绘制的线条。这在 vanilla JS 中是否可行，还是我必须使用库？

当文本颜色实际设置为红色并且我应用了灰度时，这就是我现在的样子：

这是我希望它在应用红色文本和灰度的情况下的外观：

所有其他滤镜也会出现这种情况，但灰度是最明显的，所以我以它为例。我没有包含代码，因为我主要是问这是否可能。

【问题讨论】：

不，这是不可能的，the standard 说：“实现 CanvasFilters 接口的对象上的所有绘图操作都受全局过滤器属性的影响。”。您必须使用单独的画布来绘制未经过滤的图像。

【解决方案1】：

是的，可以，只需在绘制图像后将ctx.filter 设置回"none"。

【讨论】：