형식화된 배열

형식화된 배열 API를 통해 웹 응용 프로그램은 광범위한 이진 파일 형식을 사용하고  Internet Explorer 10에서 이미 지원되는 파일의 이진 콘텐츠를 직접 조작할 수 있습니다. 형식화된 배열을 사용하여 네트워크 프로토콜, 이진 파일 형식 및 원시 그래픽 버퍼 같은 원본의 이진 데이터를 처리할 수 있습니다. 형식화된 배열은 잘 알려진 바이트 레이아웃의 메모리 내 이진 데이터를 관리하는 데도 사용할 수 있습니다.

형식화된 배열 지원은 JavaScript, XMLHttpRequest, 파일 API, 스트림 API 등 Internet Explorer 10 전체에 추가되었습니다.

Typed arrays을 사용하면 형식화된 특정 보기를 통해 데이터의 원시 이진 콘텐츠를 확인할 수 있습니다. 예를 들어 한 번에 한 바이트씩 원시 이진 데이터를 확인하려는 경우 Uint8Array(Uint8은 1바이트라고 하는 8비트 부호 없는 정수 값을 설명함)를 사용할 수 있습니다. 부동 소수점 숫자 배열로 원시 데이터를 읽으려는 경우 Float32Array(Float32는 부동 소수점 숫자라는 32비트 IEE754 부동 소수점 값을 설명함)를 사용할 수 있습니다. 다음 형식이 지원됩니다.

배열 형식요소 크기 및 설명
Int8Array8비트 부호 있는 정수
Uint8Array8비트 부호 없는 정수
Int16Array16비트 부호 있는 정수
Uint16Array16비트 부호 없는 정수
Int32Array32비트 부호 있는 정수
Uint32Array32비트 부호 없는 정수
Float32Array32비트 IEEE754 부동 소수점 숫자
Float64Array64비트 IEEE754 부동 소수점 숫자

 

ArrayBuffer 개체

각 배열 형식은 ArrayBuffer에 대한 보기입니다. ArrayBuffer는 원시 이진 데이터에 대한 참조이지만 데이터와 직접 상호 작용하는 방법은 제공하지 않습니다. ArrayBuffer의 TypedArray 보기를 만들면 이진 콘텐츠를 읽고 쓸 수 있습니다.

다음 예제에서는 새 ArrayBuffer를 처음부터 만들고 해당 콘텐츠를 몇 가지 방법으로 해석합니다.


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

이렇게 하면 형식화된 배열을 바이트 수준 구성 요소에서 부동 소수점 숫자 만들기 등의 작업에 사용하거나 효율성 또는 데이터 형식 상호 운용성을 위해 매우 구체적인 데이터 레이아웃이 필요한 데이터 구조를 작성하는 데 사용할 수 있습니다.

DataView 개체

형식화된 배율은 기본적으로 브라우저에서 지원되지 않는 사용자 지정 이진 파일 형식의 콘텐츠를 읽고 렌더링해야 하는 중요한 새 시나리오를 가능하게 합니다. 이전에 이 항목에서 소개된 다양한 배열 형식 외에도 형식화된 배열은 구조화되지 않은 방법으로 ArrayBuffer의 콘텐츠를 읽고 쓰는 데 사용할 수 있는 DataView 개체도 제공합니다. 이 개체는 일반적으로 여러 데이터 형식으로 구성된 새 파일 형식을 읽는 데 적합합니다.

다음 예제에서는 DataView 개체를 사용하여 너비, 높이, DPI, 색 농도의 픽셀당 비트 수 등의 정보가 포함된 PCX 이미지 파일 헤더를 읽습니다.


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

이 예제와 비슷한 코드를 사용하여 브라우저에서 광범위한 새 데이터 형식을 렌더링하는 지원을 추가할 수 있습니다. 여기에는 사용자 지정 이미지 형식, 추가 동영상 파일 형식 또는 도메인별 맵 데이터 형식과 같은 예제가 포함됩니다.

XHR 및 파일 API를 사용하여 이진 데이터 가져오기

서버의 파일에 액세스할 수 있도록 XMLHttpRequest API가 다양한 "responseType" 지원을 통해 확장되었습니다. "arraybuffer" responseType은 요청된 서버 리소스의 콘텐츠를 JavaScript에 ArrayBuffer 개체로 제공합니다. "blob", "text" 및 "document" 응답 형식도 지원됩니다.


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

대부분의 경우 사용자가 웹 메일 응용 프로그램의 메일 첨부 파일 등으로 파일을 제공합니다. 파일 APIinput 요소, 바탕 화면에서 웹 사이트로 파일 끌어서 놓기, BLOB 또는 파일을 제공하는 기타 원본 등을 통해 제공된 파일 내용을 읽는 도구를 웹 개발자에게 제공합니다. FileReader 개체는 파일 내용을 ArrayBuffer로 읽어 오는 데 사용되며, XHR 개체처럼 비동기로 실행되어 디스크를 읽을 때 사용자 인터페이스 응답이 차단되지 않도록 합니다.


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

샘플 및 자습서

형식화된 배열

Internet Explorer 테스트 드라이브 데모

이진 파일 검사기

IEBlog 게시물

형식화된 배열을 사용하여 이진 데이터 작업

사양

형식화된 배열 사양

 

 

표시:
© 2014 Microsoft