javascript - DrawImage 不显示 CSS 样式

Question

我正在尝试将 img 绘制到 canvas。但是，无论是设置 style 属性还是在 CSS 中设置，样式都不会保留下来。这是一个 JSFiddle显示我正在尝试做的事情。

我还尝试将样式应用到 canvas 本身。这显示正确，但是当我执行 canvas.toDataURL(...) 时，它没有获得样式。

是否有其他方法可以将样式应用于生成的数据？

Answer 1

要对 Canvas 内容应用滤镜，您可以使用前沿的 filter property ，它使用与 CSS filter 属性相同的语法。在绘制图像之前，请执行

context.filter = "grayscale(1)";

您可以通过以下方式为您以后做的任何其他事情重置它

 context.filter = "none";

过滤后的图像将保持正确过滤——filter 属性基本上告诉 Canvas 上下文，“从现在开始我绘制的任何内容都应该应用此过滤器”，因此更改只会影响 future 的绘制操作。