Tweet
Tweet

Slide 1

Slide 1 text

Binary data in JavaScript LondonJS 2013 Kornel Lesiński

Slide 2

Slide 2 text

1. Create or download and edit any file 2. ??? 3. Profit!

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

File ArrayBuffer TypedArray

Slide 5

Slide 5 text

ArrayBuffer Transferable WebWorker

Slide 6

Slide 6 text

File ArrayBuffer TypedArray

Slide 7

Slide 7 text

ArrayBuffer Blob File FileReader FormData XMLHttpRequest 2 +

Slide 8

Slide 8 text

File ArrayBuffer TypedArray

Slide 9

Slide 9 text

ArrayBufferView TypedArray DataView Uint8Array Int32Array Float64Array

Slide 10

Slide 10 text

ArrayBuffer Uint8Array Int32Array Float64Array DataView

Slide 11

Slide 11 text

TypedArray DataView arr = new Uint32Array(buf) val = arr[1] dv = new DataView(buf) val = dv.getUint32(4) arr2 = new Int8Array(buf) val = arr2[0] val = dv.getInt8(0)

Slide 12

Slide 12 text

new DataView(buf) .getUint16(0) var bytes = new Uint8Array(buf) bytes[0] = 0x13 bytes[1] = 0x37 0x3713 0x1337 new Uint16Array(buf)[0] TypedArray DataView

Slide 13

Slide 13 text

Endian

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

00010011 00110111 = 0x1337 00110111 00010011 = 0x37, 0x13 00010011 00110111

Slide 16

Slide 16 text

0x3713 0x1337 0x13,0x37 Little Endian Motorola (PowerPC) Number literals Big Endian Intel (x86) iOS/Android ARM Network Byte Order Host Byte Order*

Slide 17

Slide 17 text

new DataView(buf).getUint16(0, true)

Slide 18

Slide 18 text

var data = new Uint8Array(100); var source = data.subarray(50, 100); data.set(source, 0);

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

var file = input.files[0]; var img = new Image(); img.src = URL.createObjectURL(file); document.body.appendChild(img);

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

var xhr = new XMLHttpRequest(); xhr.responseType = "arraybuffer"; xhr.onload = function() { var arraybuffer = this.response; } xhr.open("GET", "/file"); xhr.send();

Slide 24

Slide 24 text

$ 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...............|

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

-webkit-

Slide 27

Slide 27 text

10 4

Slide 28

Slide 28 text

• 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

Slide 29

Slide 29 text

@pornelski The End\0