使用canvas给图片增加滤镜

最新推荐文章于 2024-07-25 13:59:39 发布

刘翾

最新推荐文章于 2024-07-25 13:59:39 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： canvas 滤镜

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/c_kite/article/details/89575524

本文介绍如何使用canvas API创建滤镜效果，包括负片、黑白、浮雕和高斯模糊滤镜。通过getImageData和putImageData操作像素，详细阐述各滤镜的实现原理。并提醒在实际应用中要注意canvas的安全机制，建议使用本地静态服务器运行相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类似操作像素的博主还写过一篇文章：原生JavaScript + Canvas实现图片局部放大器

文章目录

1. 效果图
2. 实现原理
3. 代码

1. 效果图

在这里插入图片描述

2. 实现原理

滤镜效果主要使用的均为canvas的getImageData以及putImageData。
（以上两个api详细介绍可以点击蓝色链接，跳转到MDN查看）

操纵getImageData函数返回的ImageData图片的像素信息来给图片增加滤镜效果。

2.1 负片滤镜

负片滤镜会从255之中减去每个像素的红，绿，蓝分量值，再将差值设置回去，这样就反转了颜色

2.2 黑白滤镜

黑白滤镜会计算出每个像素红、绿、蓝分量值的平均值，然后将三个分量值都设置成为这个值，就把图片从彩色变为黑白

最低0.47元/天解锁文章

200万优质内容无限畅学

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。