Binary operation related types and methods in JS

BLOB Data Objects

MDN Official explanation Blob object: A Blob object is a class file object that contains read-only raw data. The data in a BLOB object does not necessarily have to be native form in JavaScript. The file interface is based on a blob, inherits the functionality of the Blob, and the extension supports local files on the user's computer.

There are several ways to create a Blob object, you can call the Blob constructor, you can use the slice () method on an existing Blob object to cut out another Blob object, and you can call the Toblob method on the canvas object.

In fact, blobs are one of the general terms of computers, the full name of writing: BLOB (binary large object), which represents a binary large object .

In the actual Web application, the Blob is more of the image binary form of the upload and download, although can achieve almost arbitrary file binary transmission

var xhr = new XMLHttpRequest();    xhr.open("get", "mm1.jpg", true);xhr.responseType = "blob";xhr.onload = function() {    if (this.status == 200) {        var blob = this.response;  // this.response也就是请求的返回就是Blob对象        var img = document.createElement("img");        img.onload = function(e) {          window.URL.revokeObjectURL(img.src); // 清除释放        };        img.src = window.URL.createObjectURL(blob);//创建对象URL        eleAppend.appendChild(img);        }}xhr.send();

BLOBs are a very important feature in web development-creating BLOB URLs. (The example above is from understanding Domstring, Document, FormData, Blob, File, Arraybuffer data types).

Not all images can be requested in blob form, because the nature of the Blob is Ajax, with a certain cross-domain limitation. XHR2 supports cross-resource sharing and also requires a access-control-allow-origin setting that allows requests from that domain name. (CSS3 Font-face Property in Firefox browser, if the font file cross-domain (including cross-subdomain), is not displayed, but also by setting the Access-control-allow-origin property resolved)

There are two ways to build a Blob object
Use the old method to create the Blob object.

The old method uses Blobbuilder to create a Blob instance, and uses a append () method to insert the string (or ArrayBuffer or Blob, which is used here as a string) and, once the data is inserted successfully, you can use the GetBlob () party method to set a mime.

<script>    var builder = new BolbBuilder();    builder.append("Hello World!");    var blob = builder.getBlob("text/plain");  </script>  

New method to create BLOB objects

The new method can be created directly from the constructor of the Blob ().
The object has two properties
The size of the data contained in the Size:blob object. Bytes in the unit. Read-only
Type: A string that indicates the MIME type of the data that the Blob object is wrapped in (such as Image/jpeg), which is an empty string if the type is unknown. Read-only

<script>    var blob = new Blob(["Hello World!"],{type:"text/plain"});  </script>  var myBlob = new Blob(arrayBuffer)

Where two parameters mean: Parts represents an array that contains the data that will be added to the Blob object. An array element can be any number of Arraybuffer, Arraybufferview (typed array), BLOB, or Domstring object
Properties represents an object that sets some attributes of a Blob object and currently supports only one type attribute, which represents the type of blob

Blob objects have a very important method –slice (), the implementation of this method in firebox is called Mozslice (), the implementation in Chrome is called Webkitslice (). The function is to achieve the segmentation of the file. The main usage of the method

blob.slice(start,end,contentType);

Where contenttype represents the MIME type of the new Blob object, which will be the value of the new Blob object's Type property, which defaults to an empty string.

The FileReader type enables reading of BLOB data. Here's an introduction about the FileReader type.
The FileReader type implements an asynchronous file-reading mechanism that allows FileReader to be imagined as XMLHttpRequest, except that he reads the file system rather than the remote server. In order to read the file data, FileReader provides the following methods.

Readastext (file, encoding): reads the file as plain text and saves the read text in the result property.
Readasdataurl (file): reads the file and saves the file as a data URI in the result property
Readasbinarystring (file) (deprecated): reads a file and saves a string in the result property, with each character in the string representing one byte
Readasarraybuffer (file): reads the file and saves a arraybuffer containing the contents of the file in the result property.

Because the read process is asynchronous, FileReader also provides several events. The three most useful events are progress, error, and load, which indicate whether any new data has been read, whether an error has occurred, and whether the entire file has been read.

Window.onload = function () {var fileslist = document.getElementById ("Files-list"); Eventutil.addhandler (fileslist, "Change", function (event) {var info = "", Output = Document.gete Lementbyid ("Output"), progress = document.getElementById ("Progress"), files = Eventutil.gett            Arget (event). files, type = "Default", reader = new FileReader ();                if (/image/.test (Files[0].type)) {Reader.readasdataurl (files[0]);            Type = "image";                } else {Reader.readastext (files[0]);            Type = "Text"; } reader.onerror = function () {output.innerhtml = "Could not read file, error code is" + Reader            . Error.code;            }; reader.onprogress = function (event) {if (event.lengthcomputable) {progress.innerhtml = E                vent.loaded + "/" + event.total;     }       };                Reader.onload = function () {var html = "";                        Switch (type) {case "image": html = "

Arraybuffer Object

Arraybuffer represents the raw buffer for binary data, which is used to store data for various typed arrays. Arraybuffer are fixed-length containers that are common to binary data. Because its internal implementations are not the same as arrays, Arraybuffer is usually contiguous memory.

The meaning of the existence of Arraybuffer is that it is written in memory as a data source, fixed in length, and perpetual. So, when we have to deal with the binary data in this arraybuffer, for example, 8-bit, 16-bit, 32-bit conversion, this data will not be changed, and three conversions share the data

Note that the arraybuffer itself cannot be read and written, and requires the use of a typed array or DataView object to interpret the original buffer

The difference between a Blob object and a arraybuffer is that it provides a MIME type as metadata in addition to raw bytes. But it is still not directly read and written.

Typed arrays

The typed array (Typed array) is a new concept in JS that is designed to access the raw binary data.

Types of type arrays have

16-bit signed integer 16-bit unsigned integer 32-bit signed integer 32-bit unsigned integer 32-bit floating-point/tr>64-bit floating-point number/tr>

Name	Size (in bytes)	Description
Int8array	1	8-bit signed integer
Uint8array	1	8-bit unsigned integer
Int16array	2
Uint16array	2
Int32array	4
Uint32array	4
Float32array	4
Float64array	8

In essence, typed arrays are the same as arraybuffer, but typed arrays are read-write, and arraybuffer are just data sources. This means that the data exists in Arraybuffer, and the typed array simply provides a certain type of read-write interface.

Because the typed array directly accesses the fixed memory, it is fast, faster than the traditional array, because the normal JS array uses the hash lookup method. At the same time, typed arrays are inherently processing binary data, which has inherent advantages for XMLHttpRequest2, canvas, WebGL and other technologies.

If you have used canvas's getimagedata/putimagedata, you will find that it gives you a uint8clampedarray, which is much faster than JS's native array. Makes it possible to make high-speed pixel manipulation of the canvas

The Arraybuffer object itself can be constructed. For example:

var buf = new ArrayBuffer(32);

Syntax for

ArrayBuffer ArrayBuffer(length[可以是很大的数]);

Obtaining binary data

Common ways to get binary data in Web pages are: Via XMLHttpRequest 2, via file and BLOB related interfaces
by XMLHttpRequest 2
The XHR2 interface is almost the same as XHR, and when the Xhr.responsetype = ' Arrraybuffer ' is specified, the xhr.response of the request result can be obtained from the callback that successfully obtains the data, Then you can follow your own hospital to construct various typed arrays for access
Responsetype can also have BLOB values, and you can get BLOB objects with Xhr.response.

References: Understanding Domstring, Document, FormData, Blob, File, arraybuffer data types
Introduction to binary operations in JS
Binary arrays
Small Tip:base64:URL background image and Web page performance optimization
Mobile front-image compression upload practice
Node-canvas implementation of Baidu map personalized Basemap Drawing

Binary operation related types and methods in JS