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制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 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中显示格式化的用户输入
2006/10/09 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
JS中style属性
2006/10/11 Javascript
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
javascript 播放器 控制
2007/01/22 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python秒算24点实现及原理详解
2019/07/29 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python map比for循环快在哪
2020/09/21 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
应届电子商务毕业自荐书范文
2014/02/11 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书