是否有人解决过滤过滤画布作为图像？

Question

如果我的问题是重复的话，真的很抱歉。

基于此问题Capture/save/export an image with CSS filter effects applied 并且之前询问过这个链接，仍然不知道解决问题。因为我在画布中使用了很多滤镜效果（如hueRotate，亮度，棕褐色，模糊，对比度等）。

是否有人知道如何使用css过滤器保存图像？ 这个问题的关键是如何将过滤层中的ImageImage放入画布中。

我已多次尝试，并且没有应用过滤器。 我也从任何网站和书籍中搜索，仍然不知道解决这个问题。

那么，有人解决这个问题吗？

（抱歉我的英语不好，这个问题是我的最后一项任务，所以如果你们能帮助我，我将非常感激。）

Answer 1

这是一个相当简单的解决方案。

您需要更改画布像素以反映所需的滤镜，然后将画布另存为图像。

1. 使用@FixMethodOrder在画布上绘制原始图像。确保您满足跨域安全限制，否则画布将受到污染，您将无法使用应用过滤器所需的画布方法。
2. 使用drawImage获取画布上所有像素的RGBA像素数据。
3. 通过修改步骤＃2中的画布像素数据来应用所需的滤镜。这是以前相关的Stackoverflow Q＆amp; A：HTML5 Canvas blending & IE / Edge
4. 使用getImageData将滤镜修改后的像素放回画布上。
5. 使用putImageData将画布转换为图像。注意：Chrome和Foxfire允许用户在画布上下文菜单中将画布直接保存为toDataURL的图像。