课题：html5图像羽化（不规则区域羽化，feather，html5羽化）

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

对一张图片应用不规则区域的羽化，该怎么作呢？

 

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

而后就开始从表现层去研究怎么模拟？

 

idea 1:

blur滤镜，能够实现边缘“羽化”，可是呢 整个图片都会被模糊。那么可不能够 blur滤镜 后 将它的边缘拿出来给原始图片使用呢？（多层图片叠）。

在PS里模拟操做后，程序难度较大。

1：应用blur的层，须要比目标区域大一些，（牵扯程序对点阵外扩的算法）

2：blur层和显示层，边缘结合依然会有“硬边”的问题。

实际出来效果并很差，

 

idea 2:

检测每一个非透明点周围透明点的数量

 

此处理方式理论上符合咱们羽化图片的预期。待实验结果。

 

终于通过代码实验出得结果，可喜可贺

 中心保持清晰，边缘羽化，实验成功。

而咱们看到 当羽化程度很大时，能够看到一些瑕疵，这也是这种算法的必定缺陷吧。暂时还未想到解决办法。不过前面的羽化程度应该够用了:(   

羽化效果会必定程度“缩小”图片（由于透明边缘点后，视觉上会以为图片变小了）

 

到此咱们终于完成了在canvas里面实现不规则形状的 羽化效果