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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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
example2.php
2006/10/09 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
layui实现三级联动效果
2019/07/26 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
用python与文件进行交互的方法
2018/03/01 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Python如何定义有可选参数的元类
2020/07/31 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
采购经理岗位职责
2014/02/16 职场文书
《假如》教学反思
2014/04/17 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
人大调研汇报材料
2014/08/14 职场文书
改革共识倡议书
2014/08/29 职场文书
高考学习决心书
2015/02/04 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python