課題:html5圖像羽化(不規則區域羽化,feather,html5羽化)


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

對一張圖片應用不規則區域的羽化,該怎么做呢?

 

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

然后就開始從表現層去研究怎么模擬?

 

idea 1:

blur濾鏡,可以實現邊緣“羽化”,但是呢 整個圖片都會被模糊。那么可不可以 blur濾鏡 后 將它的邊緣拿出來給原始圖片使用呢?(多層圖片疊)。

在PS里模擬操作后,程序難度較大。

1:應用blur的層,需要比目標區域大一些,(牽扯程序對點陣外擴的算法)

2:blur層和顯示層,邊緣結合依然會有“硬邊”的問題。

實際出來效果並不好,

 

idea 2:

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

 

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

 

終於經過代碼實驗出得結果,可喜可賀

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

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

羽化效果會一定程度“縮小”圖片(因為透明邊緣點后,視覺上會覺得圖片變小了)

 

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

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM