保存與應用爲圖像CSS3濾鏡

我已經申請了一些CSS3濾鏡應用於圖像在畫布上這樣的畫布：保存與應用爲圖像CSS3濾鏡

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

但是，當我把圖像保存到我的電腦，原來的圖像被保存，而不是應用過濾器的那個。有沒有辦法保存它的修改版本？

您需要將濾鏡應用於畫布像素（即修改每個像素顏色值）。例如，[我們如何在Fabric.js中執行此操作]（http://fabricjs.com/image-filters/）。 – kangax

已解決這個問題？ – user3508453

您將需要使用WebGL來應用濾鏡。 –

過濾器樣式爲畫布元素，而不是畫布內容。
據我所知，你不能將頁面的部分（畫布+樣式）轉換爲圖像。

澄清：CSS樣式應用於DOM元素，而不是元素中的數據。
在這種情況下，這意味着畫布上的圖像的實際數據在應用CSS陰影或其他東西時未被修改。

是的，您可以保存畫布的數據，但不會，CSS樣式不會反映在它上面。

2012-11-21 10:22:59 Cerbrus

此庫http://www.nihilogic.dk/labs/canvas2image/可讓您將HTML5畫布元素保存爲圖像文件。可能會適用於你的情況。 – user1498339

它不會。 CSS樣式不適用於畫布中的數據。該庫用'toDataURL（）'保存canvasdata。 – Cerbrus

使用着色器將過濾器應用於畫布，而不是使用CSS樣式。

~~或者，製作一個隱藏畫布，繪製您的內容，應用CSS3過濾器，然後使用該畫布輸出到可見的畫布。~~

2012-11-21 10:25:06

即使我將過濾器應用於畫布，例如，使其具有灰度，並且它在屏幕上看起來灰度，但它不會將其作爲灰度圖像保存到文件中。它保存了原來的一個。 –

CSS過濾器應用於畫布元素，而不是其包含的數據。因此，您無法將過濾後的畫布輸出到「主」畫布。你將只有2個相同的副本 – Cerbrus

那麼，有沒有解決方案？ =） –

回答