Typearray, ArrayBuffer, Blob, File, Dataurl, canvas convert each other

Original Address:http://www.shihua.im/2015/12/29/20151229_arrayBuffer/http://blog.csdn.net/cuixiping/article/details/45932793

Blob to ArrayBuffer

var New Blob ([data], {type: ' Text/plain '}); var New  function(e) {    callback (e.target.result);

Reader.readasarraybuffer (BLOB);

ArrayBuffer to Blob

var New ArrayBuffer (+); var New Blob ([buffer]);       // note must be wrapped []

ArrayBuffer to Uint8

The Uint8 array can visually see the value of each byte in the Arraybuffer (1 bytes = = 8 bits). In general, we will be able to access the bytes in the Arraybuffer by turning it into an array of type UINT.

var New ArrayBuffer (+); var New Uint8array (buffer);

Uint8 to ArrayBuffer

We Uint8 arrays to visually see the values of each byte in Arraybuffer (1 bytes = = 8 bits). In general, we will be able to access the bytes in the Arraybuffer by turning it into an array of type UINT.

var New Uint8array (); var

Array to ArrayBuffer

var arr = [0x15,0xff,0x01,0x00,0x34,0xab,0x11]; var New Uint8array (arr); var buffer = Uint8.buffer;

Gets/sets the value corresponding to the Arraybuffer

A string of Arraybuffer can be "understood" as a number of values, taking the following value as an example,

According to the protocol on the server side, this stream of data is in the following format:
1 unsign Byte (1 bytes) + 1 unsign int (4 bytes) + 1 unsign Short (2 bytes)

vararr = [0x01,0x02,0x00,0x00,0x00,0x00,0x03];varU8 =NewUint8array (arr);varAB =U8.buffer;console.log (AB);//AB is the Arraybuffer to be parsedvarU8 =NewUint8array (AB, 0, 1);//(Arraybuffer, the starting point of the byte resolution, the length of the parsing)varVal_byte = u8[0];console.log (val_byte);//parsing unsign int//since the parsing starting point of Uint32array must be an integer multiple of 4, and in the stream the starting point of the data is 1, so choose to "crop" (slice) out to parse the stream fragment, and then use Uint32 to parse the fragmentvarU32buff = Ab.slice (1, 5);varU32 =NewUint32array (u32buff);varVal_uint = u32[0];console.log (val_uint);//parsing unsign ShortvarU16buff = Ab.slice (5, 7);varU16 =NewUint16array (u16buff);varVal_short = u16[0];console.log (val_short);

Typearray to Array

function Uint8array2array (u8a) {    var arr = [];      for (var i = 0; i < u8a.length; i++) {        arr.push (u8a[i]);    }     return arr;}

Canvas converted to Dataurl

var png = Canvas.todataurl (' image/png '); var jpg = canvas.todataurl (' image/jpeg ', 0.8);

Convert File, Blob object to Dataurl

The file object is also a Blob object, with the same processing.

function Readblobasdataurl (BLOB, callback) {    varnew  FileReader ();     function (e) {callback (e.target.result);};    A.readasdataurl (BLOB);} // Example: function (dataurl) {    function  (dataurl) {    console.log (dataurl);});

Dataurl Convert to Blob object

function Dataurltoblob (dataurl) {    var arr = dataurl.split (', '), MIME = Arr[0].match (/:(. *); [1],     New Uint8array (n);      while (n--) {        = bstr.charcodeat (n);    }     return New Blob ([U8arr], {type:mime});} // Test: var blob = Dataurltoblob (' data:text/plain;base64,ywfhywfhyq== ');

Dataurl picture data drawn to canvas

The image object is constructed first, SRC is Dataurl, and the picture onload is drawn to the canvas

var New  function() {    = Dataurl;

File,blob picture file data is drawn to canvas

Convert to a URL first, then construct the image object, SRC is Dataurl, and the picture onload is drawn to the canvas

Using the Readblobasdataurl function above, the URL of the Dataurl format is obtained from the File,blob object, and then the Dataurl image data is drawn to the canvas

function (dataurl) {    varnew  Image ();     function () {        canvas.drawimage (img);    };     = dataurl;});

Different methods are used to construct different types of URLs (Dataurl, Objecturl (Bloburl), Filesystemurl, respectively). This is not described here, but only in the case of Dataurl.

Filesystemurl does not refer to the form of a local file URL (file:///...), but rather a format similar to filesystem:http://... A URL that supports browser support for sandboxed file systems (currently chrome only).

Canvas converted to BLOB object and sent using Ajax

After converting to a BLOB object, you can upload an image file using Ajax.

Get Dataurl from canvas before converting Dataurl to blob object

var dataurl = Canvas.todataurl (' image/png '); var blob = Dataurltoblob (dataurl); // Send using Ajax var New FormData (); Fd.append ("image", blob, "Image.png"); var New XMLHttpRequest (); Xhr.open (true); Xhr.send (FD);

Typearray, ArrayBuffer, Blob, File, Dataurl, canvas convert each other