稚久|从图片裁剪来聊聊前端二进制( 二 ) 最开始的一个小需求前两天项目中有个小

DataView视图是一个可以从二进制ArrayBuffer对象中读写多种数值类型的底层接口。

setint8() 从DataView起始位置以byte为计数的指定偏移量（byteOffset）处存储一个8-bit数（一个字节）
getint8() 从DataView起始位置以byte为基数的指定偏移量（byteOffset）处获取一个8-bit数（一个字节）

调用new DataView(buffer, [, byteOffset [, byteLength]])示例

let buffer = new ArrayBuffer(2);console.log(buffer.byteLength); // 2let dataView = new DataView(buffer);dataView.setInt(0, 1);dataView.setInt(1, 2);console.log(dataView.getInt8(0)); // 1console.log(dataView.getInt8(1)); // 2console.log(dataView.getInt16(0)); // 258

TypedArray另一种TypedArray视图，与DataView视图的一个区别是，它不是一个构造函数，而是一组构造函数，代表不同的数据格式。
TypedArray对象描述了一个底层的二进制数据缓存区（binary data buffer）的一个类数组视图（view）。
但它本身不可以被实例化，甚至无法访问，你可以把它理解为接口，它有很多的实现。
实现方法类型单个元素值的范围大小（bytes）描述Int8Array-128 to 12718 位二进制有符号整数Uint8Array0 to 25518 位无符号整数Int16Array-32768 to 32767216 位二进制有符号整数Uint16Array0 to 65535216 位无符号整数
示例

const buffer = new ArrayBuffer(8);console.log(buffer.byteLength); // 8const int8Array = new Int8Array(buffer);console.log(int8Array.length); // 8const int16Array = new Int16Array(buffer);console.log(int16Array.length); // 4

BlobBlob是用来支持文件操作的。简单的说：在JS中，有两个构造函数 File 和Blob, 而File继承了所有Blob的属性。
所以在我们看来， File对象可以看作一种特殊的Blob对象。
上面说了， File对象是一种特殊的Blob对象，那么它自然就可以直接调用Blob对象的方法。让我们看一看Blob具体有哪些方法，以及能够用它们实现哪些功能:

是的，我们这里更加倾向于实战中的应用～
atob 和 btoabase64 相信大家都不会陌生吧（不知道的看这里[2]）,最常用的操作可能就是图片转 base64 了吧?
在之前要在字符串跟base64之间互转,我们可能需要去网上拷一个别人的方法,而且大部分情况下,你没有时间去验证这个方法是不是真的可靠,有没有bug 。
从IE10+浏览器开始，所有浏览器就原生提供了Base64编码解码方法。
Base64 解码var decodedData = http://kandian.youth.cn/index/window.atob(encodedData);Base64 编码var encodedData = http://kandian.youth.cn/index/window.btoa(stringToEncode);Canvas中的ImageData对象关于Canvas ，这里我就不做过多介绍了，具体可参考canvas 文档[3]
今天主要说一下Canvas中的ImageData对象（也是为下面的那个图片裁剪的项目做一些基础知识的铺垫～）

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：