Comment passer de Blob à ArrayBuffer

j'étudiais les Blobs, et j'ai remarqué que quand vous avez un ArrayBuffer, vous pouvez facilement le convertir en Blob comme suit:

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

la question que j'ai maintenant est, est-il possible de passer d'un Blob à un ArrayBuffer?

77
demandé sur Voles 2013-03-11 19:05:17

3 réponses

vous pouvez utiliser FileReader pour lire Blob comme un ArrayBuffer .

voici un bref exemple:

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

voici un exemple plus long:

// 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(event) {
    arrayBufferNew = event.target.result;
    uint8ArrayNew  = new Uint8Array(arrayBufferNew);

    // warn if read values are not the same as the original values
    // arrayEqual from: /q/how-to-check-if-two-arrays-are-equal-with-javascript-duplicate-56713/"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

cela a été testé dans la console de Chrome 27-69, Firefox 20-60, et Safari 6-11.

voici aussi une démonstration en direct avec laquelle vous pouvez jouer: https://jsfiddle.net/potatosalad/FbaM6 /

mise à jour 2018-06-23: merci à Klaus Klein pour le Conseil sur event.target.result versus this.result

référence:

113
répondu potatosalad 2018-06-23 14:25:01

juste pour compléter la réponse de M. @potatosalad.

vous n'avez pas réellement besoin d'accéder à la fonction scope pour obtenir le résultat sur le onload callback, vous pouvez librement faire ce qui suit sur le événement paramètre:

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

Pourquoi c'est mieux? Parce que nous pouvons alors utiliser la fonction flèche sans perdre le contexte

var fileReader = new FileReader();
fileReader.onload = (event) => {
    this.externalScopeVariable = event.target.result;
};
fileReader.readAsArrayBuffer(blob);
12
répondu Klaus Klein 2017-10-02 13:03:23

ou vous pouvez utiliser L'API fetch

fetch(URL.createObjectURL(myBlob)).then(res => res.arrayBuffer())

Je ne sais pas quelle est la différence de performances, et cela apparaîtra également sur votre onglet Réseau dans DevTools.

3
répondu Arlen Beiler 2018-08-09 03:00:21