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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 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 类相关函数的使用详解
2013/05/10 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python五子棋游戏的设计与实现
2019/06/18 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
个人找工作求职简历的自我评价
2013/10/20 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
竞聘演讲稿
2014/04/24 职场文书
学校四群教育实施方案
2014/06/12 职场文书
特岗教师个人总结
2015/02/10 职场文书
高温慰问简报
2015/07/21 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
导游词之清晏园
2019/11/22 职场文书
Python 阶乘详解
2021/10/05 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang