您现在的位置是：网站首页> 编程资料编程资料

Canvas系列之滤镜效果canvas学习和滤镜实现代码用canvas实现图片滤镜效果附演示

2023-10-12 369人已围观

简介 Canvas 真的是一个神奇的东西，不仅能够绘制各种图形、文本和位图，还能够对位图进行复杂的像素运算和处理。因此像滤镜这些东西，其实 Canvas 也可以来实现。本文介绍了Canvas滤镜的实现，感兴趣的可以参考了解下

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

首先，我们需要有一个 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 获取到图片的像素信息，而获取这些信息可以通过 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第二次绘制图片-灰度效果

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

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

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

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

参考文献：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：canvas学习总结三之绘制路径-线段html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

下一篇：canvas 橡皮筋式线条绘图应用方法canvas线条的属性详解HTML5 canvas基本绘图之绘制线条HTML5 Canvas的常用线条属性值总结HTML5 Canvas基本线条绘制的实例教程HTML5 Canvas——用路径描画线条实例介绍html5 canvas里绘制椭圆并保持线条粗细均匀的技巧

您现在的位置是：网站首页> 编程资料编程资料

Canvas系列之滤镜效果canvas学习和滤镜实现代码用canvas实现图片滤镜效果附演示

相关内容

点击排行

本栏推荐

猜你喜欢