|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2021-8-11 11:10 编辑
有没有被77的高B格标语震到?!
Canvas不仅能够绘制各种图形、文本、位图还可以直接对像素进行复杂的运算和处理。
简单说,就像图像处理一样,加个滤镜阿、模糊阿、各种LoMo阿。
老规矩还是先创建一个Canvas容器,想复习下的(请点这里)上代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>鱼C工作室</title>
- <style type="text/css">
- html,body{
- height: 100%;
- margin: 333px;
- }
- </style>
- </head>
- <body>
- <canvas id="fishcCanvas" width="1000" height="999">大兄弟,你的浏览器咋不支持Canvas呢?</canvas>
- <script type="text/javascript">
- var canvas = document.getElementById("fishcCanvas");
- var context = canvas.getContext("2d");
- </script>
- </body>
- </html>
复制代码
接下来就从本地加载一张图片吧,就用Fishc官方图片
FishC.zip
(550.16 KB, 下载次数: 40, 售价: 2 鱼币)
利用function()来加载图片
- var img = new Image();
- img.src = "FishC.png";
- img.onload = function () {
- context.drawImage(img,0,0);
- }
复制代码
效果图:
因为在canvas声明中,设置宽高足够,所以图片可以正确显示。
如果初始设置canvas宽高不足,那么可以通过设置 context.drawImage()来增大。
例如,context.drawImage(img.0,0,xxxx,xxxx);来保证加载图片正常显示。
在开始玩弄像素前,还需要从Canvas中获取位图的像素信息。
利用getImageData()方法来获取包含每个像素点颜色的字节数据
- img.onload = function () {
- context.drawImage(img,0,0,530,530);
- img = context.getImageData(0,0,530,530);
- }
复制代码
使用getImageData()方法获取了位图的像素节数据后,就可以将这些值传给img对象。
这样就有了可以用来处理的数据流了。
获得这些数据后,就可以开始Hi了
遍历这些数据,得到每个像素的R、G、B、Alpha(透明度)。
这个就是位图的四通道RGBA。
例如有一个800 * 800的位图,就意味:
☆共有800 * 800个像素点。
☆每个像素点都有4个值(R,G,B,A)。
☆整个位图字节数据的长度就是800 * 800 * 4 。
因为这幅图片是(528*528),凑个整统一设置为530*530。
所以循环的长度就是530 *530 *4
- var pixcount = 530 * 530;
- for(var i = 0 ;i < pixcount * 4 ; i += 4)
- {
- var myRed = img.data[i]; //红色
- var myGreen = img.data[i +1 ] //绿色
- var myBlue = img.data[i + 2] //蓝色
- var myAlpha = img.data[i + 3]//透明度
- }
复制代码
每个像素点的数据都是4位,所以遍历条件就是4位一跳,即( i += 4)
现在已尽遍历所有的位图的所有像素点的所有值。
然后就可以拿着这些值,愉快的搞事情了~
例如生成灰色图,只要对每个像素点的RGB值都计算平均值,然后把这个值在赋予RGB就可以了。
最后,再把新数据,通过context.putImageData()重绘出来即可
- for(var i = 0 ;i < pixcount * 4 ; i += 4)
- {
- /*其他*/
- var myGray = parseInt((myRed + myGreen + myBlue) / 3);//均值获得灰度值
- img.data[i] = myGray;
- img.data[i+1]=myGray;
- img.data[i+2]=myGray;
- }
-
复制代码
效果图:
例如半透明,就是第四位值都是128
- for(var i = 0 ;i < pixcount * 4 ; i += 4)
- {
- /*其他*/
- img.data[i+3] = 128;
- }
- context.putImageData(img,0,0);
复制代码
效果图:
这位鱼油,如果喜欢本帖子,请订阅 专辑-->( 传送门)( 不喜欢更要订阅 )
官方 Web 课程:
|
评分
-
查看全部评分
|