黑松山资源网 Design By www.paidiu.com
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 获取到图片的像素信息,而获取这些信息可以通过 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 基础知识、核心技术与前沿案例》 刘欢 编著
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行
- 黑神话悟空上品蝎太子精魄获取方法一览|上品蝎太子精魄收集攻略
- 银霞.1977-《台北66电影原声带》台湾复刻版[WAV+CUE]
- 银霞.1980-《你那好冷的小手》台湾珍藏纪念版[WAV+CUE]