zoukankan      html  css  js  c++  java
  • 课题:html5图像羽化(不规则区域羽化,feather,html5羽化)

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

    对一张图片应用不规则区域的羽化,该怎么做呢?

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

    然后就开始从表现层去研究怎么模拟?

    idea 1:

    blur滤镜,可以实现边缘“羽化”,但是呢 整个图片都会被模糊。那么可不可以 blur滤镜 后 将它的边缘拿出来给原始图片使用呢?(多层图片叠)。

    在PS里模拟操作后,程序难度较大。

    1:应用blur的层,需要比目标区域大一些,(牵扯程序对点阵外扩的算法)

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

    实际出来效果并不好,

    idea 2:

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

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

    终于经过代码实验出得结果,可喜可贺

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

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

    羽化效果会一定程度“缩小”图片(因为透明边缘点后,视觉上会觉得图片变小了)

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

      

  • 相关阅读:
    mac 版 Pycharm 激活
    最快的 maven repository--阿里镜像仓库
    java-Object
    java --replaceAll方法
    正则表达式中^[a-z]与[^a-z]有区别吗
    keyListener用的健值表,保留一份
    java播放背景音乐 mp3和mav都可以播放
    腾讯云ubuntu远程桌面
    nginx 配置转发到其他多台服务器
    java 键盘监听事件
  • 原文地址:https://www.cnblogs.com/luoeeyang/p/9337871.html
Copyright © 2011-2022 走看看