Canvas系列之滤镜效果


Posted in HTML / CSS onFebruary 12, 2019

Canvas 真的是一个神奇的东西,不仅能够绘制各种图形、文本和位图,还能够对位图进行复杂的像素运算和处理。因此像滤镜这些东西,其实 Canvas 也可以来实现。接下来,是见证奇迹的时刻。

首先,我们需要有一个 Canvas 容器,例如:

<canvas id="myCanvas" width="800" height="800"></canvas>

接下来,我们需要将使用 Canvas 来绘制一张图片:

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
var img = new Image();
img.src = "./images/1526010092000.jpg";	// 自备图片链接
img.onload = (e) => {
	ctx.drawImage(img, 0, 0, 800, 800);	// 第一个800表示绘制图片的宽,第二个800表示绘制图片的高
}

Canvas系列之滤镜效果

Canvas首次绘制的效果

再接下来就是对图片的像素进行一些操作。而要实现这样的操作,首先需要从 Canvas 获取到图片的像素信息,而获取这些信息可以通过 getImageData() 来实现。

// ... 省略前面代码
img.onload = (e) => {
	// ... 省略前面代码
    img = ctx.getImageData(0, 0, 800, 800);	// 获得包含每个像素点颜色的字节数据
}

由于图片的大小为 800 * 800,因为要对像素点进行遍历,以获得每一个像素点的红、绿、蓝色值。因此:

// ... 省略前面代码
img.onload = (e) => {
	// ... 省略前面代码
    var pixelLen = 800 * 800;   // 获得像素个数
    for(var i = 0; i < pixelLen * 4; i += 4) {
        var redC = img.data[i], // 第一个字节单位代表红色
            greenC = img.data[i + 1],    // 第二个字节单位代表绿色
            blueC = img.data[i + 2],   // 第三个字节单位代表蓝色
            alpha = img.data[i + 3];   // 第四个字节单位代表透明度
    }
}

通过上面循环,我们获取到了包含在图片数据中的每个像素点的具体色值;需要注意的一点是,每一个像素点的数据不是一位,而是相邻的四位,分别代表了该点的红、绿、蓝和透明值。因此,实际上位图字节数据的数组长度等于像素点个数乘以 4,在 for 循环中我们也针对这一特性进行了相应处理。

通过将每一点的红、绿、蓝值进行平均,然后再将生成的平均值相同地赋予该像素点的红、绿、蓝值,就能形成灰度效果,最后通过 putImageData() 方法来重新绘制图片即可,代码如下:

// ... 省略前面代码
img.onload = (e) => {
	// ... 省略前面代码
    for(var i = 0; i < pixelLen * 4; i += 4) {
   		// ... 省略前面代码
        var grey = parseInt((redC + greenC + blueC) / 3);  // 平均后获取灰度值
        img.data[i] = grey; // 改变红色值
        img.data[i + 1] = grey; // 改变绿色值
        img.data[i + 2] = grey; // 改变蓝色值
    }

    ctx.putImageData(img, 0, 0, 800, 800);  // 重新绘制图片
}

此时,则会形成灰度效果,如下图

Canvas系列之滤镜效果

Canvas第二次绘制图片-灰度效果

透明度的控制只需要修改第四个字节单位对应的数值即可,该数值的范围为0~256,0代表完全透明,256代表完成不透明。例如:

// ... 省略前面代码
img.onload = (e) => {
	// ... 省略前面代码
    for(var i = 0; i < pixelLen * 4; i += 4) {
   		// ... 省略前面代码
        img.data[i + 3] = 128;	// 透明度50%
    }
    // ... 省略前面代码
}

Canvas系列之滤镜效果

Canvas第三次绘制效果-增加透明度

由此,通过控制图片中每个像素4个数据的值,即可达到滤镜的效果,是不是 so easy!

参考文献:

《HTML5 基础知识、核心技术与前沿案例》 刘欢 编著

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 #HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 #HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 #HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 #HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 #HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 #HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 #HTML / CSS
You might like
PHP取进制余数函数代码
2012/01/19 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
在Python的循环体中使用else语句的方法
2015/03/30 Python
python3.x实现发送邮件功能
2018/05/22 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
Order by的几种用法
2013/06/16 面试题
linux面试题参考答案(3)
2012/09/13 面试题
大学毕业生推荐信
2014/07/09 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
一年级小学生评语大全
2014/12/25 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers