用canvas实现图片滤镜效果
admin
2023-02-11 02:00:06
0次
1.灰度效果
用canvas实现图片滤镜效果

图片过滤效果之灰度效果

算法及原理:

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


2.油画效果

用canvas实现图片滤镜效果

算法及原理:

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

3.连环画效果
用canvas实现图片滤镜效果

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

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

4.怀旧效果
用canvas实现图片滤镜效果

图片滤镜效果之怀旧效果


5.底片效果
用canvas实现图片滤镜效果

图片滤镜效果之底片效果

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


6.黑白效果
用canvas实现图片滤镜效果

图片过滤效果之黑白效果

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

7.浮雕效果
用canvas实现图片滤镜效果

图片过滤效果之浮雕效果

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

8.熔铸效果
用canvas实现图片滤镜效果

图片滤镜效果之熔铸效果

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

9.冰冻效果
用canvas实现图片滤镜效果

图片滤镜效果之冰冻效果

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

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

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


相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...