Matrizes digitadas

A API de matrizes digitadas permite aos aplicativos Web usar uma ampla gama de formatos de arquivos binários e manipular diretamente o conteúdo dos arquivos que já têm suporte no  Internet Explorer 10. Você pode usar matrizes digitadas para manipular dados binários de fontes como protocolos de rede, formatos de arquivos binários e buffers de elementos gráficos brutos. As matrizes digitadas também podem ser usadas para gerenciar dados binários na memória com layouts de byte tradicionais.

O suporte para matrizes digitadas foi adicionado em todo o Internet Explorer 10: no JavaScript, no XMLHttpRequest, na API de Arquivos e na API de Fluxos.

O Typed arrays fornece uma maneira de visualizar conteúdo binário bruto por um modo de exibição digitado específico. Por exemplo, para analisar dados binários brutos um byte por vez, é possível usar um Uint8Array (Uint8 descreve um valor de inteiro não assinado de 8 bits, geralmente conhecido como um byte). Para ler os dados brutos como uma matriz de números de pontos flutuantes, é possível usar um Float32Array (Float32 descreve um valor de ponto flutuante IEE754 de 32 bits, geralmente conhecido como um número de ponto flutuante). Os seguintes tipos têm suporte:

Tipo de matrizTamanho e descrição do elemento
Int8ArrayInteiro assinado de 8 bits
Uint8ArrayInteiro não assinado de 8 bits
Int16ArrayInteiro assinado de 16 bits
Uint16ArrayInteiro não assinado de 16 bits
Int32ArrayInteiro assinado de 32 bits
Uint32ArrayInteiro não assinado de 32 bits
Float32ArrayNúmero de ponto flutuante IEEE754 de 32 bits
Float64ArrayNúmero de ponto flutuante IEEE754 de 64 bits

 

O objeto ArrayBuffer

Cada tipo de matriz é uma exibição sobre um ArrayBuffer. ArrayBuffer é uma referência aos dados binários brutos, mas não fornece uma maneira direta de interagir com os dados. A criação de uma exibição TypedArray de ArrayBuffer fornece acesso para leitura e gravação no conteúdo binário.

O exemplo a seguir cria um novo ArrayBuffer do zero e interpreta seu conteúdo de algumas maneiras diferentes:


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

Desse modo, matrizes digitadas podem ser usadas para tarefas como criação de valores de ponto flutuante a partir de seus componentes em nível de byte ou para a criação de estruturas de dados que requerem um layout de dados muito específico para fins de eficiência ou interoperação de formatos de dados.

O objeto DataView

As matrizes digitadas permitem uma importante nova aplicação, que é ler e renderizar conteúdos de formatos de arquivos binários personalizados que não têm suporte nativo no navegador. Além dos diversos tipos de matrizes descritos anteriormente neste tópico, as matrizes digitadas também fornecem um objeto DataView que pode ser usado para ler e gravar o conteúdo de um ArrayBuffer de maneira não estruturada. Isso é útil para a leitura de novos formatos de arquivo, que geralmente são compostos de combinações heterogêneas de dados.

O exemplo a seguir usa o objeto DataView para ler o cabeçalho de um arquivo de imagem PCX, que inclui informações como largura, altura, DPI e profundidade de cor em bits por 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);

Você pode usar um código semelhante ao deste exemplo para adicionar suporte para renderizar uma ampla gama de novos formatos de dados no navegador. Isso inclui exemplos como formatos de imagem personalizados, formatos de arquivo de vídeo adicionais ou formatos de dados de mapas específicos de domínio.

Obtendo dados binários com a API de Arquivo ou XHR

Para acessar arquivos do servidor, a API XMLHttpRequest foi ampliada com suporte para diversos responseTypes. O responseType “arraybuffer” fornece o conteúdo do recurso de servidor solicitado para o JavaScript como um objeto ArrayBuffer. Também há suporte para os tipos de resposta “blob,” “texto” e “documento”.


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

Em muitos casos, os arquivos são fornecidos pelo usuário. Por exemplo, como um anexo de um email em um aplicativo de email da Web. A API de Arquivo oferece aos desenvolvedores da Web ferramentas para ler o conteúdo de arquivos fornecidos por um elemento input, pela ação de arrastar e soltar arquivos da Área de Trabalho em um site ou qualquer outra fonte que forneça blobs ou arquivos. O objeto FileReader é usado para converter o conteúdo de um arquivo em um ArrayBuffer e, assim como o objeto XHR, é assíncrono para garantir que a leitura do disco não impeça a resposta da interface do usuário.


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

Amostras e tutoriais

Matrizes digitadas

Demonstrações do Test Drive do Internet Explorer

Inspetor de arquivos binários

Postagens no blog do IE

Trabalhando com dados binários usando matrizes digitadas

Especificação

Especificação de Matriz Digitada

 

 

Mostrar:
© 2014 Microsoft