html畫布形狀模糊過濾器

Question

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

Answer 1

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

例子：

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

您可以再次取消模糊畫布：

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

這可能是模糊畫布的最快（也是最簡單）的方法——尤其是對於移動設備。

Answer 2

myContext.filter = 'blur(10px)';

畫布 2D API 的 CanvasRenderingContext2D.filter 屬性提供模糊或灰度等過濾效果。 它類似於 CSS filter 屬性並接受相同的功能。 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

它仍然是實驗性的，但受到 chrome 和 firefox atm 的支持。

Answer 3

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

或者，您可以使用此 Superfast Box Blur 進行 2 次迭代： http : //www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Answer 4

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

默認情況下，pixastic 庫會嘗試用它創建的畫布元素替換您傳入的節點。 為了防止它這樣做，您可以包含一個選項來指定離開 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 5

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