zoukankan      html  css  js  c++  java
  • 用canvas实现图片滤镜效果

    1.灰度效果

    图片过滤效果之灰度效果

    图片过滤效果之灰度效果

    算法及原理:

    .299 * r + .587 * g + .114 * b;

    2.油画效果

    图片滤镜效果之油画效果

    算法及原理:

    用当前点四周一定范围内任意一点的颜色来替代当前点颜色,最常用的是随机的采用相邻点进行替代。

    3.连环画效果

    图片滤镜效果之连环画效果

    图片滤镜效果之连环画效果

    算法及原理:
    连环画的效果与图像灰度化后的效果相似,它们都是灰度图,但连环画增大了图像的对比度,使整体明暗效果更强.
    算法:
    R = |g – b + g + r| * r / 256
    G = |b – g + b + r| * r / 256;
    B = |b – g + b + r | * g / 256;

    4.怀旧效果

    图片滤镜效果之怀旧效果

    图片滤镜效果之怀旧效果

    5.底片效果

    图片滤镜效果之底片效果

    图片滤镜效果之底片效果

    算法原理:将当前像素点的RGB值分别与255之差后的值作为当前点的RGB值,即
    R = 255 – R;G = 255 – G;B = 255 – B;

    6.黑白效果

    图片过滤效果之黑白效果

    图片过滤效果之黑白效果

    算法及原理:
    求RGB平均值Avg = (R + G + B) / 3,如果Avg >= 100,则新的颜色值为R=G=B=255;
    如果Avg < 100,则新的颜色值为R=G=B=0;255就是白色,0就是黑色;
    至于为什么用100作比较,这是一个经验值吧,设置为128也可以,可以根据效果来调整。

    7.浮雕效果

    图片过滤效果之浮雕效果

    图片过滤效果之浮雕效果

    算法及原理:
    用相邻点的RGB值减去当前点的RGB值并加上128作为新的RGB值。
    由于图片中相邻点的颜色值是比较接近的,因此这样的算法处理之后,只有颜色的边沿区域,
    也就是相邻颜色差异较大的部分的结果才会比较明显,而其他平滑区域则值都接近128左右,
    也就是灰色,这样就具有了浮雕效果。
    在实际的效果中,这样处理后,有些区域可能还是会有”彩色”的一些点或者条状痕迹,所以最好再对新的RGB值做一个灰度处理。

     

    8.熔铸效果

    图片滤镜效果之熔铸效果

    图片滤镜效果之熔铸效果

    算法及原理:
    r = r*128/(g+b +1);
    g = g*128/(r+b +1);
    b = b*128/(g+r +1);

    9.冰冻效果

    图片滤镜效果之冰冻效果

    图片滤镜效果之冰冻效果

    算法及原理:
    r = (r-g-b)*3/2;
    g = (g-r-b)*3/2;
    b = (b-g-r)*3/2;

     

    已经集成到博客的小工具里了,点这里查看效果。

    下面给出原始代码的下载地址:下载地址

  • 相关阅读:
    轻松管理您的网络password
    尝到awk
    重载虚函数的相关问题
    阿赫亚web安全JSON
    SplitContainer如何实现左侧导航,正确显示和导航内容
    POJ 3450 Corporate Identity KMP解决问题的方法
    virtio-blk分析
    JavaScript权威指南科03章 种类、值和变量(1)
    iOS开展-Xcode技巧总结(持续更新)
    POI设置边框
  • 原文地址:https://www.cnblogs.com/web100/p/canvas-filter.html
Copyright © 2011-2022 走看看