Scribd
Upload
32 views29 pages

London Js Binary

This document discusses binary data in JavaScript, including: 1. Using ArrayBuffers and TypedArrays like DataView and Uint8Array to work with binary data. 2. File APIs like FileReader to read local files as ArrayBuffers. 3. XMLHttpRequest Level 2 and FormData to upload/download ArrayBuffers and Files via HTTP.

Uploaded by

Javier Cureño Guzmán
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views29 pages

London Js Binary

This document discusses binary data in JavaScript, including: 1. Using ArrayBuffers and TypedArrays like DataView and Uint8Array to work with binary data. 2. File APIs like FileReader to read local files as ArrayBuffers. 3. XMLHttpRequest Level 2 and FormData to upload/download ArrayBuffers and Files via HTTP.

Uploaded by

Javier Cureño Guzmán
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Binary data in JavaScript

LondonJS 2013
Kornel Lesiński
1. Create or download
and edit any file

2. ???

3. Profit!
TypedArray

ArrayBuffer

File
Transferable WebWorker

ArrayBuffer
TypedArray

ArrayBuffer

File
XMLHttpRequest 2
+
Blob FormData

ArrayBuffer
FileReader File
TypedArray

ArrayBuffer

File
ArrayBufferView

TypedArray DataView

Uint8Array Int32Array Float64Array


Int32Array

Uint8Array

ArrayBuffer

DataView Float64Array
DataView TypedArray

dv = new DataView(buf) arr = new Uint32Array(buf)


val = dv.getUint32(4) val = arr[1]

arr2 = new Int8Array(buf)


val = dv.getInt8(0) val = arr2[0]
DataView TypedArray

var bytes = new Uint8Array(buf)


bytes[0] = 0x13
bytes[1] = 0x37

new DataView(buf) new Uint16Array(buf)[0]


.getUint16(0)

0x1337 0x3713
Endian
00000000 00000001 = 1
00000000 00000010 = 2
00000000 00000011 = 3
00010011 00110111 = 0x1337
00010011 00110111 = 0x1337

11101100 11001000

00110111 00010011 = 0x37, 0x13


0x13,0x37

0x1337 0x3713

Big Endian Little Endian


Network Byte Order Host Byte Order*

Motorola (PowerPC) Intel (x86)


Number literals iOS/Android ARM
new DataView(buf).getUint16(0, true)
var data = new Uint8Array(100);
var source = data.subarray(50, 100);

data.set(source, 0);
<input type=file>

var file = input.files[0];


var reader = new FileReader();

reader.onload = function() {
var arraybuffer = reader.result;
var dv = new DataView(arraybuffer);
console.log(dv.getUint32(0));
}

reader.readAsArrayBuffer(file);
var data = new Uint8Array(100);

var blob = new Blob([data],


{type:"application/octet-stream"});

var a = document.createElement("a");
a.download = "test.blob";
a.href = URL.createObjectURL(blob);
a.click();
<input type=file>

var file = input.files[0];


var img = new Image();

img.src = URL.createObjectURL(file);
document.body.appendChild(img);
var blob = new Blob(["hello world"]);

var form = new FormData();


form.append("file", blob);

var xhr = new XMLHttpRequest();


xhr.open("POST", "/form");
xhr.send(form);

xhr.open("PUT", "/file");
xhr.send(blob);
var xhr = new XMLHttpRequest();

xhr.responseType = "arraybuffer";
xhr.onload = function() {
var arraybuffer = this.response;
}

xhr.open("GET", "/file");
xhr.send();
$ hexdump -C file.png

89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 |.PNG........IHDR|
00 00 06 cb 00 00 04 a2 08 03 00 00 00 c4 24 27 |..............$'|
c3 00 00 00 04 67 41 4d 41 00 00 b1 8f 0b fc 61 |.....gAMA......a|
05 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 |.....sRGB.......|
00 c0 50 4c 54 45 0e 2e 00 10 6f e4 8b 8c df 40 |..PLTE....o....@|
43 4b 02 42 e0 b2 51 cf 63 42 21 68 0b cf c8 9b |CK.B..Q.cB!h....|
77 a1 5f 31 b9 82 5d 5c 9c bb 7f b5 d5 9e 16 00 |w._1..]\........|
31 8a ae cd af 9d 15 a2 e0 ba d2 e2 00 82 be cc |1...............|
var dv = new DataView(png_arraybuffer);
var offset = 8; // header
var txt = new TextDecoder();

while(offset < dv.byteLength) {


var len = dv.getUint32(offset);
var chunk_id = new Uint8Array(dv.buffer,
offset+4, 4);
var name = txt.decode(chunk_id);
console.log("Chunk", name, len);
offset += 4+4+4+len;
}
-webkit-
10 4
• http://www.w3.org/TR/file-upload/

• http://www.khronos.org/registry/typedarray/specs/latest/

• https://developer.mozilla.org/en-US/docs/DOM/FileReader

• http://www.html5rocks.com/en/tutorials/file/xhr2/

• http://encoding.spec.whatwg.org/#api
The End\0

@pornelski

You might also like