DrawImage不显示CSS样式

我试图画一个img到canvas。但是，不管是设置style属性还是在CSS中执行样式，样式都不会结转。下面是一个JSFiddle显示我正在尝试做什么。DrawImage不显示CSS样式

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

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

2017-03-16 RareNCool

这将取决于您想要应用的样式。 CSS宽度和高度容易，CSS过滤器，3D转换很多努力工作 – Blindman67

@ Blindman67过滤器就是我要做的，就像在小提琴中一样。我不关心3D转换。 – RareNCool

从[此删除的问题]（http://stackoverflow.com/q/42095361/）我会引用[K3N]的评论（http://stackoverflow.com/users/1693593/k3n）：“您可以在上下文本身上使用新的[filter property]（https://devdocs.io/dom/canvasrenderingcontext2d/filter）。在那里使用相同的CSS过滤器，它将被应用到图像数据本身。确保图像被加载否则提取将失败，在没有支持的旧版浏览器或浏览器中，您需要模仿这些过滤器，CSS过滤器规格包含各种过滤器的收据。 – apsillers

要将过滤器应用于画布内容，可以使用前沿filter property，该脚本使用与CSS filter属性相同的语法。之前你画你的形象，做

context.filter = "grayscale(1)";

，您可以通过

context.filter = "none";

你过滤的图像重置为别的，你将来做将保持正确过滤 - 在filter财产基本上告诉画布上下文，“无论我从现在开始应该应用这个过滤器”，所以更改只会影响将来的绘图操作。

来源

2017-03-16 19:09:25 apsillers

谢谢！我仍然认为自动应用CSS样式会更好，但幸运的是，这正是我想要的特定情况。 – RareNCool

过滤器支持受限。如果您打算推出这些类型的功能，请检查浏览器兼容性。 – Blindman67

DrawImage不显示CSS样式

回答

相关问题