免费发布信息
微信公众号
当前位置: 首页 » 帮助中心 » 常见问题 » 正文

在html5中Canvas实现滤镜效果?前端滤镜案例分享!

   来源:黔优网时间:2024-12-18 13:50:24 浏览量:0

在前端开发中我们会遇到很多不同的问题和一些兼容性方面的问题,那么今天小编就为大家带来一个有关于:“在html5中Canvas怎么实现滤镜效果?前端滤镜案例分享! ”这方面的相关内容分享给大家!

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

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

<canvas 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 获取到图片的像素信息,而获取这些信息可以通过 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 基础知识、核心技术与前沿案例》 刘欢 编著

以上就是有关于:“在html5中Canvas怎么实现滤镜效果?前端滤镜案例分享! ”这方面的相关内容,除此之外对于html5这方面的相关内容我们还可以在W3Cschool中进行学习!

 
 
没用 0举报 收藏 0
免责声明:
黔优网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优网官方立场,请读者仅做参考。本文标题:在html5中Canvas实现滤镜效果?前端滤镜案例分享!,本文链接:https://www.qianu.com/help/111107.html,欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法信息,请您立即点此【投诉举报】并提供有效线索,也可以通过邮件(邮箱号:kefu@qianu.com)联系我们及时修正或删除。
 
 

 

 
推荐图文
推荐帮助中心