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?
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:
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);
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.