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樣式

回答

相關問題