es6之数组操作
1.计算机存储数据是二进制的,每位只能存0或1
2.每种语言的数字的存储都有不同位的, 常见的有每8,16,32位代表一个数字.
n bit, 即n位数,存一个数字的范围是: 无符号:0 到 2的n次方-1; 有符号位是 -2的n/2次方 到 2的n/2-1次方;
3 js里, 所有的数字, 都默认是32位的.
比如var a = 0; 这个0在内存中占了32位空间, 虽然只要1位就可以表示. 究其原因, 就是为了内存更加模块化管理.
4 js中intArray数组中可以对数字进行不同位数的设置. 分为8/ 16/ 32三个大小的空间等级.
ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区; 它通常由intArray来操作.
例子: 将图片变成黑白
一个图片是由多个像素点组成的, 每个像素点都由四个数字组成,分别是rgba
如果将彩色照片所有像素点的rgb 三个值都设置为 各像素点rgb三者平均值, 那么图片就变成了黑白色了.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 .wrap, .wrap>* { 10 /* height: 150px; */ 11 } 12 .button{ 13 word-wrap: break-word; 14 writing-mode: vertical-lr; 15 writing-mode: tb-lr; 16 background: #ccc; 17 display: inline-block; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="wrap"> 23 <img src="./img/a.png" alt=""> 24 <div class="button">转换成黑白图片</div> 25 <div class="canvas"> 26 <canvas width="300" height="300"></canvas> 27 </div> 28 </div> 29 30 31 <script> 32 var btn = document.getElementsByClassName("button")[0]; 33 btn.onclick = function(){ 34 var canvas = document.getElementsByTagName("canvas")[0]; 35 var ctx = canvas.getContext("2d"); 36 var img = document.getElementsByTagName("img")[0]; 37 ctx.drawImage(img,0,0); 38 var data = ctx.getImageData(0,0,img.width,img.height).data; //获取像素数据信息 39 console.log(data); 40 for(var i = 0; i < data.length; i+=4){ 41 var avg = (data[i] + data[i+1] +data[i + 2])/3 ; 42 data[i] = data[i+1] = data[i+1]= avg; 43 44 } 45 46 ctx.putImageData(new ImageData(data, img.width,Image.height),0,0);//重绘canvas 47 } 48 49 </script> 50 </body> 51 </html>
