捕獲/保存/用CSS濾鏡效果輸出圖像的應用

Question

我身邊的工具，使使用CSS3濾鏡效果（飽和度，棕褐色，對比度等）

製作的圖片編輯器是一個簡單的圖片編輯器容易的部分，但是是否有可能保存或出口過濾器應用圖像似乎非常困難..

我原本寄予厚望@niklasvh's html2canvas。不幸的是，它並沒有捕獲大多數CSS3屬性，更不用說過濾效果了。

如果有人有一個解決方案或可悲的是，明確的知識，這是不可能的，這將不勝感激！謝謝！

Answer 1

你不是，我意識到，能夠將CSS應用於HTML5 canvas元素中的圖形（因爲它們不是DOM的一部分）。

但是，沒關係！我們仍然可以使用相對簡單的基本過濾器效果，並通過幾行JavaScript將它們保存爲圖像。

我發現了一篇很好的文章，應用sepia-like effect to the canvas and saving it as an image。我將重點介紹文章中較大的內容，而不是複製它。

修改畫布圖像：

var canvas = document.getElementById('canvasElementId'), 
    context = canvas.getContext('2d'); 

var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

for (var i = 0; i < imageData.data.length; i+=4) { 
    ... 
} 

爲了獲得訪問一些帆布API，您需要激活使用以上的JavaScript在畫布上的2D背景。 MDN有一些關於API的很好的文檔，可以通過context object獲得，但是這裏需要注意的重要部分是getImageData()調用。基本上，它會抓取您定義區域中的所有像素值（在上述情況下，我們抓取整個圖像）。然後，通過掌握這些數據，我們可以遍歷所有像素並根據需要進行更改。在sepia article中，顯然會做出一些有趣的調整，但您也可以根據需要進行灰度，模糊或任何其他更改，並且有一個很棒的選項。

如何保存畫布圖像：

var canvas = document.getElementById('canvasElementId'), 
    image = document.createElement("img"); 

image.src = canvas.toDataURL('image/jpeg'); 

document.body.appendChild(image); 

以上腳本將選擇你的畫布（假設你已經做了你的圖紙），並創建一個圖像元素。它們使用toDataURL()生成一個url，您可以使用它來設置圖像元素上的源。在上例中，圖像元素被附加到文檔主體。您可以在MDN's canvas page上查看更多信息。

Answer 2

我得到了你的答案。 我做了這個程序，最後它的工作。

那些步驟是：
1.上傳圖像（JPG/PNG）
2.轉換到帆布
3.定製的CSS過濾器。
4.渲染使用camanJS保存爲圖像。
5.完成。

您還可以通過將濾鏡的值修改爲默認值來重置效果值。

好運！