package-lock.json的作用

相对图片做一个灰度转换，在网上找到这么一个方法，但是不太清楚原理，搜索一下大概了解了就做个简单的记录：
方法：

 var c=document.getElementById("myCanvas");
 #获取h5的canvas属性
 var ctx=c.getContext("2d");
 #返回一个对象，该对象提供了用于在画布上绘图的方法和属性
 var image_data=document.getElementById("img");
 #读取图片
 ctx.drawImage(image_data,0,0);
 #将图片绘制到画板
 var imgData=ctx.getImageData(0,0,image_data.width,image_data.height);
    // 反转颜色
    for (var i=0;i<imgData.data.length;i+=4)
    {
        imgData.data[i]=255-imgData.data[i];
        imgData.data[i+1]=255-imgData.data[i+1];
        imgData.data[i+2]=255-imgData.data[i+2];
        imgData.data[i+3]=255;
    }
    ctx.putImageData(imgData,0,0);

重点说明下imgData.data.length属性:

data 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。

所以一张100*100的图片的imgData.data.length大小应该是
100*100*4=40000