前端 ArrayBuffer 与 Blob 互转

首先说一点基础知识：

responseType 可选的参数有："text"、"arraybuffer"、"blob" 或 "document"；

对应的返回数据为 DOMString、ArrayBuffer、Blob、Document；默认参数为"text"。

前端请求二进制数据的时候需要设置数据响应格式：xhr.responseType = "arraybuffer"；

写法如下：

var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'arraybuffer'
xhr.onload = function(e) {
    buffer = xhr.response
    console.log(buffer)
};
xhr.send()

arraybuffer与blob的区别

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。

Blob (binary large object)，他表示一个不可变、原始数据的类文件对象，

blob类型只有slice方法，用于返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。
 
对比发现，ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。

所以说，ArrayBuffer相比Blob更接近真实的二进制，更底层。

arraybuffer与blob 相互转换

ArrayBuffer转Blob

// arraybuffer转blob很方便，作为参数传入就行了。

var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer])

Blob转ArrayBuffer

此处需要借助fileReader对象:

var blob = new Blob([1,2,3,4,5])
var reader = new FileReader()

reader.onload = function() {
    console.log(this.result)
}
reader.readAsArrayBuffer(blob)

// 控制台输出的则是ArrayBuffer的数据了。

ArrayBuffer和Blob一样，都是二进制数据的容器，而ArrayBuffer相比更为底层，他可以去操作去修改这些二进制值，这两者之间也是可以互转的。