課題：html5圖像羽化（不規則區域羽化，feather，html5羽化）

下午搜索了一堆相關文章，沒有找到符合要求的。

對一張圖片應用不規則區域的羽化，該怎麼作呢？

 

首先去查了下 羽化的原理，然而沒有什麼用，

而後就開始從表現層去研究怎麼模擬？

 

idea 1:

blur濾鏡，能夠實現邊緣「羽化」，可是呢 整個圖片都會被模糊。那麼可不能夠 blur濾鏡 後 將它的邊緣拿出來給原始圖片使用呢？（多層圖片疊）。

在PS裏模擬操做後，程序難度較大。

1：應用blur的層，須要比目標區域大一些，（牽扯程序對點陣外擴的算法）

2：blur層和顯示層，邊緣結合依然會有「硬邊」的問題。

實際出來效果並很差，

 

idea 2:

檢測每一個非透明點周圍透明點的數量

 

此處理方式理論上符合咱們羽化圖片的預期。待實驗結果。

 

終於通過代碼實驗出得結果，可喜可賀

 中心保持清晰，邊緣羽化，實驗成功。

而咱們看到 當羽化程度很大時，能夠看到一些瑕疵，這也是這種算法的必定缺陷吧。暫時還未想到解決辦法。不過前面的羽化程度應該夠用了:(   

羽化效果會必定程度「縮小」圖片（由於透明邊緣點後，視覺上會以爲圖片變小了）

 

到此咱們終於完成了在canvas裏面實現不規則形狀的 羽化效果