使用应用为图像的CSS3滤镜保存画布

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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