Quelle est la différence entre un ArrayBuffer et un Blob ?

Question

Je suis en train de lire http://www.html5rocks.com/en/tutorials/file/xhr2/ et d'essayer de comprendre la différence entre un ArrayBuffer et un Blob .

Les deux conteneurs ne sont-ils pas composés de bits ? Par conséquent, les deux conteneurs ne pourraient-ils pas être considérés de plusieurs manières (comme des morceaux de 32 bits, des morceaux de 16 bits, etc.) ?

Answer 1

Résumé

A moins que vous doivent avoir la capacité d'écrire/éditer (en utilisant un ArrayBuffer ), alors Blob est probablement le meilleur format .

Détail

Cette question m'est venue d'un différents page html5rocks. et j'ai trouvé Commentaires de @Bart van Heukelom pour être utile, donc je voulais les élever à une réponse ici.

J'ai également trouvé des ressources utiles spécifiques à ArrayBuffer y Blob des objets. En résumé : malgré l'accent mis sur Blob être immuable/"données brutes Blob les objets sont facile à travailler .

Ressources qui comparent / contrastent ArrayBuffer vs Blob :

• Mutabilité

  • un ArrayBuffer peut être modifié (par exemple, avec un DataView )
  • a Blob es immuable

• Source / Disponibilité en mémoire

  • Citation : Bart van Heukelom :

  • Un ArrayBuffer est dans la mémoire, disponible sur pour la manipulation.
  • Un Blob peut se trouver sur le disque, dans la mémoire cache et à d'autres endroits. pas facilement disponible

• Couche d'accès

  • ArrayBuffer exigera une couche d'accès comme tableaux typés
  • Blob peut être passé directement dans d'autres fonctions comme window.URL.createObjectURL comme le montre l'exemple suivant URL de l'OP .
    • Cependant, comme Mörre souligne vous pouvez encore avoir besoin File -interfaces liées et des API comme FileReader pour travailler avec un Blob.

• Convertir

  • Vous pouvez convertir Blob a ArrayBuffer et vice versa, ce qui répond à la question du PO. "Les deux récipients ne sont-ils pas composés de bits ?"
  • ArrayBuffer peut être généré à partir d'un Blob [en utilisant le FileReader 's readAsArrayBuffer méthode](https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsArrayBuffer()) ou le méthode asynchrone const arrayBuffer = await blob.arrayBuffer() (merci à @Darren G)
  • Blob peut être généré à partir d'un ArrayBuffer. comme le souligne @user3405291 new Blob([new Uint8Array(data)]); montré dans cette réponse

• Utilisation dans d'autres bibliothèques

  • jsZip ; (new JSZip()).loadAsync(...) accepte les deux ArrayBuffer y Blob : String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise

• Comment le protocole gère-t-il ArrayBuffer et Blob ?

  • Websocket (alias WS / WSS)
    • Utilisez le de webSocket binaryType propriété (pouvant avoir les valeurs "arraybuffer" ou "blob") pour "contrôler le type de données binaires reçues sur la connexion WebSocket".
  • XmlHttpRequest (alias XHR)
    • Utilisez le de xhr responseType propriété pour "changer le type de réponse attendu du serveur" (les valeurs valides incluent "arraybuffer", "blob", et d'autres comme "document", "json", et "text")

    • la propriété de la réponse contiendra le corps de l'entité en fonction de responseType comme un ArrayBuffer, un Blob, un Document, un JSON ou une chaîne.

Autres documents utiles :

• ArrayBuffer

En ArrayBuffer est utilisé pour représenter un tampon de données binaires brutes générique, de longueur fixe de données binaires brutes. Vous pouvez consulter le site ne peut pas directement manipuler le contenu d'un d'un site ArrayBuffer Au lieu de cela, vous créez l'un des objets de type tableau ou a DataView qui représente le tampon dans un format spécifique, et utiliser cela pour lire et écrire le contenu du tampon.

• Blob

A Blob représente un objet de type fichier de immuable les données brutes. Blob représenter des données qui ne sont pas nécessairement dans un format natif de JavaScript natif de JavaScript. Le site File interface est basé sur Blob , héritant du blob et l'étend pour prendre en charge les fichiers du système de l'utilisateur.

Answer 2

C'est expliqué sur la page.

Tampon de tableau

Un ArrayBuffer est un conteneur générique de longueur fixe pour les données binaires. Ils sont très pratiques si vous avez besoin d'un tampon généralisé de données brutes, mais la véritable puissance de ces systèmes réside dans le fait que vous pouvez créer des "vues" des données sous-jacentes en utilisant des tableaux typés JavaScript. . En fait, plusieurs vues peuvent être créées à partir d'une seule source ArrayBuffer. Par exemple, vous pouvez créer un tableau d'entiers de 8 bits qui partage le même ArrayBuffer qu'un tableau d'entiers de 32 bits existant à partir des mêmes données. Les données sous-jacentes restent les mêmes, nous créons simplement des représentations différentes de celles-ci.

BLOB

Si vous souhaitez travailler directement avec un Blob et/ou n'avez pas besoin de manipuler les octets du fichier, utilisez xhr.responseType='blob' :

Answer 3

Si vous avez affaire à quelque chose qui s'apparente davantage à un fichier immuable pouvant être récupéré, stocké ou servi comme un fichier via HTTP, un Blob présente une caractéristique utile : blob.type ( Documentation sur l'API Web , Documentation sur Nodejs ). Cela renvoie un type MIME (tel que image/png ) que vous pouvez utiliser pour votre en-tête HTTP Content-Type lorsque vous servez le blob.