Everything about JS and binary

[Connection]

This article from Douban community http://www.douban.com/note/225494734/

1. http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/
This article is better than me.

2. For some convenient libraries, you can directly view aurora. js. In order to parse audio files, this project has made great efforts...

Https://github.com/ofmlabs/aurora.js

[Preface]
JS is actually a well-known weak type language. So in general, it is not a serious field of programming, and it has not been noticed until recently. WEB 2.0 and many new technologies are emerging. Put it into the category of serious programming.

Here we mainly record the JS recently encountered. in academic terms, it should be said that it is a series of improvements to the language library level launched by the EMSCRIPT standard, W3C, HTML5, and GOOGLE.

Reasons for increasing binary requirements are as follows: WEBSCOKET transmission requirements, file api processing of files and binary BLOB objects, and WEBGL requirements for a large amount of binary data, CAVANS urgently need to process binary objects and XHR2 needs to process new binary objects. JS Binary-related matters.

* PS: it is strongly recommended to read the original draft and standard documentation. Of course, the address of the draft will be provided here.

[Directory]
I. XHR2
Ii. FILE API
1. FILE LIST
2. FILE
3. FILEREADER
Iii. BLOB URL
Iv. TYPED ARRAY
1. BUFFER
2. ArrayView
3. DataView
4. Blob and arraybuffer
5. arraybuffer and arraybufferView
V. WEBSCOKET
Vi. WEBGL

[XHR2]
Http://www.html5rocks.com/en/tutorials/file/xhr2/
Http://www.w3.org/TR/XMLHttpRequest/#the-responsetype-attribute

The new XHR2 syntax has many improvements. The details are not described in detail. For more information, see the draft.
// Obtain the string column of a file
VargetArrayBuffer = function (url ){
Var resourceUrl = url | "http://img1.douban.com/pics/nav/lg_main_a10.png ";
Var deferred = $. Deferred ();
Var promise = deferred. promise ();
Var xhr = new XMLHttpRequest ();
Xhr. open ('get', resourceUrl, true );

// Response type arraybuffer-XMLHttpRequest 2
Xhr. responseType = 'arraybuffer ';
Xhr. onerror = function (e ){
Deferred. reject (xhr, e );
}

Xhr. onload = function (e ){
If (xhr. status = 200 ){
Deferred. resolve (xhr );
}
};
Xhr. send ();
Return promise;
}
The defferd object of JQ is used here and can be ignored. The main modification is that xhr. responseType can be set to arraybuffer or blob.

[File api]

1. There is mainly a File List to express the objects in any <input type = 'file'>, file inheritance and Blob parent class, and the length and File name attributes inherit the Slice operation.

2. File indicates a file object in <input type = File>. Note that the File here appears to be from user input and cannot be created out of thin air.

3. The Blob object is the parent class of the File and will be mainly interested in Slice and split operations.

4. FileReader () read/write class, mainly responsible for reading and writing files | Blob objects
Http://www.w3.org/TR/FileAPI/#readAsDataURL

Var loadBlobToBase64 = function (blob ){
Var deferred = $. Deferred ();
Var promise = deferred. promise ();

Var reader = new FileReader ();
Reader. onload = function (){
Deferred. resolve (reader. result );
}
Reader. readAsDataURL (blob );
Return promise;
}
A useful operation is to read and write a File or Blob object into a BASE64 encoded DataURL, readAsText (), and readAsArrayBuffer ()

[Url api/blob uri]
Http://www.w3.org/TR/FileAPI/#url

This is easy to understand. In the standard, it is also described in the file api draft.

Var url = window. webkitURL. createObjectURL (blob );
Console. log (url );

The output is blob: xxxx-xxx -- xxx # frament...

Simply put, you can use the FileReader () Class in the File API to assign a large Blob, readAsDataURL, or binary File to img src or another one.

You can also dump blob to blob url. The official expression is ObjectURL.

How to Understand?

This URL is a memory-level pointer, but can be called by webpages. Its behavior is similar to that of common files from servers.

A 200 status code or 500 status code can be destroyed.

[Typed Array]
Http://www.khronos.org/registry/typedarray/specs/latest/

This is the core part of the entire set of APIs. In fact, without understanding this part, it is difficult to perform any effective operations and conversions on data.

In my understanding.

1. Buffer
Http://www.khronos.org/registry/typedarray/specs/latest/#5
Var a = new ArrayBuffer (8 );
Create a new ArrayBuffer (8); The 8bit is a unit, uint8. I want 8 bytes.

This is a memory-level expression, A buf.

2. View
Http://www.khronos.org/registry/typedarray/specs/latest/#7
AppendBuffer = function (buffer1, buffer2 ){
Var tmp = new Uint8Array (buffer1.byteLength + buffer2.byteLength + 4 );
Tmp. set (new Uint8Array (buffer1), 0 );
Tmp. set (new Uint8Array (buffer2), buffer1.byteLength );
Return tmp;
}

New Uint8Array actually creates a ref, pointer. It can point to an existing buf, so here a New tem is created, and its size is the sum of the two buf + 4.

In the second sentence, enter a new Typed ArrayView starting from 0, and the pointer is initialized with buffer1.
The third sentence is to enter buffer2 content from the end.

Here to be modified.

3. DataView
Http://www.khronos.org/registry/typedarray/specs/latest/#8
Https://developer.mozilla.org/en/JavaScript_typed_arrays/DataView

Omitted

4. Blob and arraybuffer
Http://www.w3.org/TR/FileAPI/#dfn-BlobPropertyBag
The famous article that constructs BLOB, instead of BUILD, refers to the previous non-abolished API, Blobuilder. That method is very inefficient and error-prone (I wrote a blue screen in JS ....)

Therefore, the correct construction method is:

Var blob = new Blob ([new_buffer], {type: "image/png "});

After an ArrayBuffer object is input and the mime type is given, an appropriate object can be constructed.

Var url = window. webkitURL. createObjectURL (blob );

Then, you can use the method mentioned earlier to construct the blob url for to call.

5. arraybuffer and arraybufferView
Http://www.khronos.org/registry/typedarray/specs/latest/#6
This confused me for a while, and I did not understand it until I saw an example of the complex data structure in the draft.

To put it simply:
AppendBuffer = function (buffer1, buffer2 ){
Var tmp = new Uint8Array (buffer1.byteLength + buffer2.byteLength + 4 );
Tmp. set (new Uint8Array (buffer1), 0 );
Tmp. set (new Uint8Array (buffer2), buffer1.byteLength );
Return tmp;
}

In the preceding example, the returned tmp is actually an arraybufferView object, not the buffer itself.

When constructing a new BLOB, all Uin8Array objects will have an attribute, namely the buffer attribute.

To obtain the content of the object indicated by the pointer, access this attribute.
Var blob = new Blob ([tmp. buffer], {type: "image/png "});

If you want to operate tmp and construct it as a BLOB object, you can directly use arrayBuffer. If the input is a TypedArrayView ?, You don't have to worry about it. Access its. buffer attribute to obtain the ArrayBuffer attribute.