如何去从Blob到ArrayBuffer

我正在研究Blob,我注意到当你有一个ArrayBuffer时,你可以很容易地将它转换成一个Blob,如下所示:

var dataView = new DataView(arrayBuffer); var blob = new Blob([dataView], { type: mimeString }); 

我现在的问题是,是否有可能从一个Blob到一个ArrayBuffer?

您可以使用FileReaderBlob读为ArrayBuffer

编辑:添加一个简短的版本:

 var arrayBuffer; var fileReader = new FileReader(); fileReader.onload = function() { arrayBuffer = this.result; }; fileReader.readAsArrayBuffer(blob); 

这是一个更长的例子:

 // ArrayBuffer -> Blob var uint8Array = new Uint8Array([1, 2, 3]); var arrayBuffer = uint8Array.buffer; var blob = new Blob([arrayBuffer]); // Blob -> ArrayBuffer var uint8ArrayNew = null; var arrayBufferNew = null; var fileReader = new FileReader(); fileReader.onload = function(progressEvent) { arrayBufferNew = this.result; uint8ArrayNew = new Uint8Array(arrayBufferNew); // warn if read values are not the same as the original values // arrayEqual from: http://stackoverflow.com/questions/3115982/how-to-check-javascript-array-equals function arrayEqual(a, b) { return !(a<b || b<a); }; if (arrayBufferNew.byteLength !== arrayBuffer.byteLength) // should be 3 console.warn("ArrayBuffer byteLength does not match"); if (arrayEqual(uint8ArrayNew, uint8Array) !== true) // should be [1,2,3] console.warn("Uint8Array does not match"); }; fileReader.readAsArrayBuffer(blob); fileReader.result; // also accessible this way once the blob has been read 

这在Chrome 27,Firefox 20和Safari 6的控制台中进行了testing。

这里还有一个你可以玩的现场演示: http : //jsfiddle.net/potatosalad/FbaM6/

参考:

只是补充@potatosalad先生的答案。

您实际上并不需要访问函数范围来获取onloadcallback的结果,您可以在event参数中自由地执行以下操作:

 var arrayBuffer; var fileReader = new FileReader(); fileReader.onload = function(event) { arrayBuffer = event.target.result; }; fileReader.readAsArrayBuffer(blob); 

为什么这样更好? 因为那么我们可以使用箭头函数而不会丢失上下文

 var fileReader = new FileReader(); fileReader.onload = (event) => { this.externalScopeVariable = event.target.result; }; fileReader.readAsArrayBuffer(blob);