将应用了 CSS3 过滤器的画布保存为图像答案

【问题标题】：Save a canvas with CSS3 filters applied as an image将应用了 CSS3 过滤器的画布保存为图像
【发布时间】：2012-11-21 18:48:23
【问题描述】：

我已经对画布上的图像应用了一些 CSS3 过滤器，如下所示：

-webkit-filter brightness(0%) grayscale(100%) contrast(1000%)

但是当我将图像保存到我的计算机时，保存的是原始图像，而不是应用了过滤器的图像。有没有办法保存修改后的版本？

【问题讨论】：

【解决方案1】：

使用着色器在画布中应用过滤器，而不是使用 CSS 样式。

~~或者，制作一个隐藏画布，将内容绘制到该画布上，对其应用 CSS3 过滤器，然后使用该画布输出到可见画布。~~

【讨论】：

即使我将过滤器应用到画布上，例如，将其设为灰度，并且在屏幕上看起来是灰度的，它也不会将其作为灰度图像保存到文件中。它保存了原来的。
CSS 过滤器应用于画布元素，而不是它包含的数据。因此，您不能将过滤后的画布输出到“主”画布。您将只有 2 个相同的副本
那么，有什么解决办法吗？ =)
恐怕不行，画布无法“访问”应用到它的样式。
将过滤后的画布放入 SVG foreignObject，然后将 insert the serialised SVG 作为 Base64 编码的图像放入可见的画布中。（开个玩笑）

【解决方案2】：

过滤器设置画布元素的样式，而不是画布内容。
据我所知，您无法将页面的部分（Canvas+ 样式）转换为图像。

澄清一下：CSS 样式应用于 DOM 元素，而不是元素中的数据。
在这种情况下，这意味着当您将 CSS 阴影或其他东西应用到画布时，画布上的图像的实际数据不会被修改。

是的，您可以保存画布的数据，但不，CSS 样式不会反映在其上。

【讨论】：