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>

相关推荐