Question

我试图将img绘制为canvas。但是，无论我是设置style属性还是在CSS中执行此操作，样式都不会延续。这是JSFiddle显示我正在尝试做的事情。

我也尝试将这些样式应用于canvas本身。这显示正确，但是当我执行canvas.toDataURL(...)时，它无法获得样式。

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

Answer 1

要将过滤器应用于画布内容，您可以使用尖端的filter property，它使用与CSS filter属性相同的语法。在绘制图像之前，请执行

context.filter = "grayscale(1)";

您可以通过

将其重置为以后的任何其他内容

 context.filter = "none";

过滤后的图片将保持正确过滤 - filter属性基本上告诉画布上下文，“无论我从现在开始绘制的是什么都应该应用此过滤器”，因此更改只会影响将来的绘图操作。