网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

用canvas实现图片滤镜效果

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;

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

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


文章题目:用canvas实现图片滤镜效果
标题链接:http://bjjierui.cn/article/psceps.html

其他资讯