Làm thế nào để đi từ Blob để ArrayBuffer

Question

tôi đang học Blobs, và tôi nhận thấy rằng khi bạn có một ArrayBuffer, bạn có thể dễ dàng chuyển đổi này cho một người Blob như sau:

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

Các câu hỏi tôi có bây giờ là, là nó có thể đi từ một Blob đến một ArrayBuffer?

Answer 1

Bạn có thể sử dụng FileReader để đọc Blob làm ArrayBuffer.

Edit: gia tăng một phiên bản ngắn:

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

Dưới đây là một ví dụ nữa:

// 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 

này đã được thử nghiệm trong giao diện điều khiển của Chrome 27, Firefox 20 và Safari 6.

Đây cũng là bản trình diễn trực tiếp mà bạn có thể chơi với: http://jsfiddle.net/potatosalad/FbaM6/

tham khảo:

• https://developer.mozilla.org/en-US/docs/DOM/FileReader#readAsArrayBuffer()
• http://www.w3.org/TR/FileAPI/#dfn-readAsArrayBuffer

Answer 2

Chỉ cần để bổ sung cho ông @potatosalad câu trả lời.

Bạn không thực sự cần truy cập vào chức năng phạm vi để có được những kết quả trên onload gọi lại, bạn có thể tự do làm những việc sau trên kiện tham số:

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

Tại sao điều này tốt hơn? Bởi vì sau đó chúng tôi có thể sử dụng chức năng mũi tên mà không làm mất bối cảnh

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