Tableaux typés

L’API des tableaux typés permet aux applications Web d’utiliser une grande variété de formats de fichier binaire et de manipuler directement le contenu binaire des fichiers déjà pris en charge par  Internet Explorer 10. Vous pouvez utiliser les tableaux typés pour traiter des données binaires provenant de sources telles que les protocoles réseau, les formats de fichier binaire et les tampons de graphiques bruts. Les tableaux typés permettent également de gérer les données binaires en mémoire avec les dispositions d’octets courantes.

La prise en charge des tableaux typés a été ajoutée à tous les niveaux d’Internet Explorer 10 : dans JavaScript, dans XMLHttpRequest, dans l’API de fichier et dans l’API de flux.

Typed arrays fournissent un moyen de consulter le contenu binaire de données via un affichage d’un type spécifique. Par exemple, si nous voulons examiner nos données binaires brutes octet par octet, nous pouvons utiliser un tableau Uint8Array (Uint8 représente une valeur entière non signée 8 bits, appelée octet). Si nous voulons lire les données brutes sous forme de tableau de nombres à virgule flottante, nous pouvons utiliser un tableau Float32Array (Float32 représente une valeur à virgule flottante IEE754 32 bits, couramment appelée nombre à virgule flottante). Les types suivants sont pris en charge :

Type de tableauTaille et description de l’élément
Int8ArrayEntier signé 8 bits
Uint8ArrayEntier non signé 8 bits
Int16ArrayEntier signé 16 bits
Uint16ArrayEntier non signé 16 bits
Int32ArrayEntier signé 32 bits
Uint32ArrayEntier non signé 32 bits
Float32ArrayNombre à virgule flottante IEEE754 32 bits
Float64ArrayNombre à virgule flottante IEEE754 64 bits

 

Objet ArrayBuffer

Chaque type de tableau est une vue d’un ArrayBuffer. L’ArrayBuffer est une référence aux données binaires brutes mais il ne permet pas d’interagir directement avec les données. Le fait de créer une vue TypedArray de l’ArrayBuffer donne accès en lecture et écriture au contenu binaire.

L’exemple suivant crée entièrement un nouvel ArrayBuffer et interprète son contenu de différentes manières :


// Create an 8 byte buffer
var buffer = new ArrayBuffer(8);


// View as an array of Uint8s and put 0x05 in each byte
var uint8s = new Uint8Array(buffer);
for (var i = 0; i < 8; i++) {
    uint8s[i] = 5; // fill each byte with 0x05
}

 
// Inspect the resulting array
uint8s[0] === 5; // true - each byte has value 5
uint8s.byteLength === 8; // true - there are 8 Uint8s


// View the same buffer as an array of Uint32s 
var uint32s = new Uint32Array(buffer);

 
// The same raw bytes are now interpreted differently
uint32s[0] === 84215045 // true - 0x05050505 == 84215045

En effet, les tableaux typés peuvent être utilisés pour des tâches, telles que la création de valeurs à virgule flottante à partir de leurs composants au niveau de l’octet, ou pour créer des structures de données nécessitant une disposition spécifique afin d’améliorer leur efficacité ou l’interopération avec différents formats de données.

Objet DataView

Grâce aux tableaux typés, un nouveau scénario important est rendu possible : celui de lire et de rendre le contenu des formats de fichier binaire personnalisés qui ne sont pas nativement pris en charge par le navigateur. En plus des différents types de tableau présentés précédemment dans cette rubrique, les tableaux typés fournissent un objet DataView qui peut être utilisé pour lire et écrire le contenu d’un ArrayBuffer de façon non structurée. Cela est idéal pour lire de nouveaux formats de fichier, qui sont en général constitués de données hétérogènes.

L’exemple suivant utilise l’objet DataView pour lire un en-tête de fichier d’image PCX, qui comporte des informations comme la largeur, la hauteur, le nombre de points par pouce et le nombre de bits par pixel de la profondeur de couleur.


var buffer = getPCXFileContents();
var reader = new DataView(buffer);

 
// Read the header of the PCX file
var header = {}

 
// The first section is single bytes 
header.manufacturer = reader.getUint8(0);
header.version = reader.getUint8(1);
header.encoding = reader.getUint8(2);
header.bitsPerPixel = reader.getUint8(3);


// The next section is Int16 values, each in little-endian
header.xmin = reader.getInt16(4, true);
header.ymin = reader.getInt16(6, true);
header.xmax = reader.getInt16(8, true);
header.ymax = reader.getInt16(10, true);
header.hdpi = reader.getInt16(12, true);
header.vdpi = reader.getInt16(14, true);

Vous pouvez utiliser du code similaire à cet exemple pour prendre en charge le rendu d’une grande variété de nouveaux formats de données dans le navigateur. Par exemple, des formats d’image personnalisés, d’autres formats de fichier vidéo ou des formats de données de carte spécifiques à un domaine.

Obtention de données binaires avec XHR et l’API de fichier

Pour accéder à des fichiers sur le serveur, l’API XMLHttpRequest a été étendue pour prendre en charge divers « responseType » (types de réponse). Le responseType de l’« arraybuffer » fournit le contenu de la ressource de serveur demandée à JavaScript en tant qu’objet ArrayBuffer. Les types de réponses « blob », « texte » et « document » sont également pris en charge.


function getServerFileToArrayBufffer(url, successCallback) {
    // Create an XHR object
    var xhr = new XMLHttpRequest();


    xhr.onreadystatechange = function () { 
        if (xhr.readyState == xhr.DONE) {
            if (xhr.status == 200 && xhr.response) {
                // The 'response' property returns an ArrayBuffer
                successCallback(xhr.response);
            } else {
                alert("Failed to download:" + xhr.status + " " + xhr.statusText);
            }
        }
    }

 
    // Open the request for the provided url 
    xhr.open("GET", url, true);


    // Set the responseType to 'arraybuffer' for ArrayBuffer response 
    xhr.responseType = "arraybuffer";

	 
    xhr.send();
}

Dans de nombreux cas, les fichiers sont fournis par l’utilisateur, par exemple, sous forme de pièce jointe à un message dans une application de messagerie Web. L’API de fichier offre aux développeurs Web les outils nécessaires pour lire le contenu des fichiers fournis via un élément d’entrée, le déplacement des fichiers du Bureau au site Web ou toute autre source fournissant des blobs ou des fichiers. L’objet FileReader permet de lire le contenu d’un fichier dans un ArrayBuffer et, comme l’objet XHR, il est asynchrone pour que la lecture depuis le disque n’empêche pas l’interface utilisateur de répondre.


function readFileToArrayBuffer(file, successCallback) {
    // Create a FileReader 
    var reader = new FileReader();


    // Register for 'load' and 'error' events
    reader.onload = function () {
        // The 'result' property returns an ArrayBuffer for readAsArrayBuffer 
        var buffer = reader.result;
        successCallback(buffer);
    }


    reader.onerror = function (evt) {
        // The error code indicates the reason for failure
        if (evt.target.error.name == "NotReadableError") {
            alert("Failed to read file: " + file.name);
        }
    }


    // Begin a read of the file contents into an ArrayBuffer
    reader.readAsArrayBuffer(file);
}

Exemples et didacticiels

Tableaux typés

Démonstrations du site Internet Explorer Test Drive

Binary File Inspector

Billets IEBlog

Utilisation de données binaires à l’aide de tableaux typés

Spécification

Typed Array Specification

 

 

Afficher:
© 2014 Microsoft