html畫布形狀模糊濾鏡

Question

必須有辦法做到這一點。我用html5畫布畫了一個形狀，我想模糊它。據我所知，沒有本地方法，所以我假設需要一個js庫。問題是大多數圖書館只模糊圖像，例如this。這可能嗎？

Answer 1

您鏈接的pixastic庫示例實際上應該使用canvas元素作爲第一個參數而不是圖像。

默認情況下，pixastic庫會嘗試用您創建的canvas元素替換您傳入的節點。爲了防止這樣做，您可以添加一個選項來指定離開DOM節點，幷包含一個回調以自己處理返回的數據。事情是這樣的：

Pixastic.process(canvas, "blur", { leaveDOM: true }, function(img) { 
    canvas.getContext('2d').drawImage(img, 0, 0); 
}); 

另外，如果你不希望依賴於庫，可以實現自己使用getImageData（）模糊，操縱返回的像素數據，並使用putImageData（）來繪製模糊圖像回到畫布。

另外需要注意的是，單個像素操作速度較慢，可能無法很好地處理大圖像。如果這是一個問題，您可以嘗試縮小圖像並縮小圖像，以便快速完成模糊效果。事情是這樣的：

ctx.drawImage(canvas, 0, 0, canvas.width/2, canvas.height/2); 
ctx.drawImage(canvas, 0, 0, canvas.width/2, canvas.height/2, 0, 0, canvas.width, canvas.height);

Answer 2

對於一個快速模糊，這幾乎是高斯我建議StackBlur： http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

另外，您可以使用此超快方框模糊與2次迭代： http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Answer 3

你可以使用CSS來模糊畫布。如果它只是你想要模糊的形狀，那麼這個形狀將需要位於它自己單獨的圖層（畫布）上，您可以隨時創建它。

例子：

canvas.style.webkitFilter = "blur(3px)"; 

您可以再次與聯合國模糊的帆布：

canvas.style.webkitFilter = "blur(0px)"; 

這可能是最快的（也是最簡單）的方式模糊的畫布 - 特別是對於移動設備。

Answer 4

https://github.com/nodeca/glur - 通過IIR濾波器實現高斯模糊。查看演示。