Typisierte Arrays

Mit der API für typisierte Arrays können Webanwendungen eine Vielzahl von Binärdateiformaten verwenden und den Binärinhalt von Dateien direkt bearbeiten, die bereits von  Windows Internet Explorer 10 unterstützt werden. Mit typisierten Arrays können Sie Binärdaten aus Quellen wie Netzwerkprotokollen, Binärdateiformaten und unformatierten Grafikpuffern verarbeiten. Sie können typisierte Arrays auch verwenden, um speicherinterne Binärdaten mit bekannten Bytelayouts zu verwalten.

Die Unterstützung von typisierten Arrays wurde in Internet Explorer 10 durchgehend umgesetzt: in JavaScript, in XMLHttpRequest, in der Datei-API und in der Streams-API.

Typed arrays ermöglichen das Anzeigen von unformatiertem binären Dateninhalt in einer bestimmten typisierten Ansicht. Wenn Sie beispielsweise die unformatierten Binärdaten Byte für Byte betrachten möchten, können Sie das Uint8Array verwenden (Uint8 beschreibt einen 8-Bit-Ganzzahlwert ohne Vorzeichen, der üblicherweise als Byte bezeichnet wird). Wenn Sie die Rohdaten als Array von Gleitkommazahlen lesen möchten, können Sie ein Float32Array verwenden (Float32 beschreibt einen 32-Bit-IEE754-Gleitkommawert, der üblicherweise als Gleitkommazahl bezeichnet wird). Die folgenden Typen werden unterstützt:

ArraytypElementgröße und -beschreibung
Int8Array8-Bit-Ganzzahl mit Vorzeichen
Uint8Array8-Bit-Ganzzahl ohne Vorzeichen
Int16Array16-Bit-Ganzzahl mit Vorzeichen
Uint16Array16-Bit-Ganzzahl ohne Vorzeichen
Int32Array32-Bit-Ganzzahl mit Vorzeichen
Uint32Array32-Bit-Ganzzahl ohne Vorzeichen
Float32Array32-Bit-IEEE754-Gleitkommazahl
Float64Array64-Bit-IEEE754-Gleitkommazahl

 

Das ArrayBuffer-Objekt

Jeder Arraytyp ist eine Ansicht für einen ArrayBuffer. Der ArrayBuffer ist ein Verweis auf die unformatierten Binärdaten. Eine direkte Interaktion mit den Daten ist darüber jedoch nicht möglich. Durch das Erstellen einer TypedArray-Ansicht des ArrayBuffer können Sie in die binären Inhalte schreiben und daraus lesen.

Im folgenden Beispiel wird ein ArrayBuffer vollständig neu erstellt, und der Inhalt wird auf unterschiedliche Weise interpretiert:


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

Auf diese Weise können typisierte Arrays beispielsweise verwendet werden, um Gleitkommawerte aus den zugehörigen Komponenten auf Byte-Ebene oder Datenstrukturen zu erstellen, die aus Gründen der Effizienz oder Interoperabilität mit einem Datenformat ein sehr spezifisches Layout erfordern.

Das DataView-Objekt

Mit typisierten Arrays wird ein wichtiges neues Szenario realisiert: das Lesen und Rendern von Inhalten benutzerdefinierter Binärdateiformate, die vom Browser normalerweise nicht unterstützt werden. Zusätzlich zu den zahlreichen Arraytypen, die bereits in diesem Thema vorgestellt wurden, beinhalten typisierte Arrays auch ein DataView-Objekt, mit dem der Inhalt eines ArrayBuffer-Elements unstrukturiert gelesen und geschrieben werden kann. Dies ist eine gute Möglichkeit, um neue Dateiformate zu lesen, die häufig aus heterogenen Datenbeständen zusammengesetzt sind.

Im folgenden Beispiel wird der Header einer PCX-Bilddatei mit dem DataView-Objekt gelesen. Dieser enthält Informationen wie Breite, Höhe, DPI und Farbtiefe (Bits-pro-Pixel).


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);

Mithilfe von Code wie im Beispiel können Sie Ihren Browser mit Unterstützung für das Rendern zahlreicher neuer Datenformate ausstatten. Dazu gehören u. a. benutzerdefinierte Bildformate, zusätzliche Videodateiformate oder domänenspezifische Kartendatenformate.

Abrufen von Binärdaten mit XHR und der Datei-API

Die XMLHttpRequest-API wurde erweitert, um den Zugriff auf verschiedene Arten von responseType zu ermöglichen. Der responseType "arraybuffer" stellt den Inhalt der angeforderten Serverressource als ArrayBuffer-Objekt für JavaScript bereit. Die Antworttypen "blob", "text" und "document" werden ebenfalls unterstützt.


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();
}

Die Dateien werden häufig vom Benutzer bereitgestellt, beispielsweise als Anlage zu einer E-Mail in einer Webmailanwendung. Die Datei-API beinhaltet Tools für Webentwickler zum Lesen des Inhalts von Dateien, die über ein input-Element bereitgestellt werden, per Drag & Drop vom Desktop in eine Website gezogen werden oder aus einer anderen Quelle für BLOBs oder Dateien stammen. Mit dem FileReader-Objekt wird der Inhalt einer Datei in einen ArrayBuffer gelesen. Analog zum XHR-Objekt handelt es sich dabei um einen asynchronen Vorgang, um zu verhindern, dass durch das Lesen vom Datenträger eine Antwort von der Benutzeroberfläche blockiert wird.


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);
}

Beispiele und Lernprogramme

Typisierte Arrays

Demos für die Internet Explorer-Testversion

Binary File Inspector

IEBlog-Beiträge

Verwenden von Binärdaten mit typisierten Arrays

Spezifikation

Spezifikation für typisierte Arrays

 

 

Anzeigen:
© 2014 Microsoft