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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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