這可能是實現高斯模糊(毛玻璃)最簡單的庫了

wuliDream發表於2018-03-28

這可能是實現高斯模糊(毛玻璃)最簡單的庫了

高斯模糊(毛玻璃效果)實現方式

原始碼,歡迎star哦

1:css

這可能是實現高斯模糊(毛玻璃)最簡單的庫了

2:canvas StackBlur.js 借用

3:svg

本文選用方式 優勢:比canvas庫小,庫原始碼演算法較難懂;實現比 css 樣式效果更好,之前遇到過該類需求filter大後 css邊會變的模糊,效果較差

解決方案

這可能是實現高斯模糊(毛玻璃)最簡單的庫了

文件註釋

<filter> 標籤的 id 屬性可為濾鏡定義一個唯一的名稱(同一濾鏡可被文件中的多個元素使用)
filter:url 屬性用來把元素連結到濾鏡。當連結濾鏡 id 時,必須使用 # 字元
濾鏡效果是通過 <feGaussianBlur> 標籤進行定義的。fe 字尾可用於所有的濾鏡
<feGaussianBlur> 標籤的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個部分定義了由整個影象建立效果

step2:使用

這可能是實現高斯模糊(毛玻璃)最簡單的庫了

例項提供setBlurAmount,generateBlurredImage兩個介面動態設定

 原始碼 歡迎star

這可能是實現高斯模糊(毛玻璃)最簡單的庫了

這可能是實現高斯模糊(毛玻璃)最簡單的庫了這可能是實現高斯模糊(毛玻璃)最簡單的庫了

這可能是實現高斯模糊(毛玻璃)最簡單的庫了

這可能是實現高斯模糊(毛玻璃)最簡單的庫了


相關文章