前端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低水平相比,他可以操纵和修改这些二进制值,这两个也可以相互转化的。