Dataurl and File,blob,canvas objects convert JavaScript to each other

Canvas converted to Dataurl (get dataurl from canvas)

var dataurl = canvas.toDataURL(‘image/png‘);

Convert file object to Dataurl, 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 dataURItoBlob(dataURI) {    var arr = dataURI.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1];    returnnew Blob([atob(arr[1])], {type:mime});}//test:var blob = dataURItoBlob(‘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

varnewfunction(){    canvas.drawImage(img);};img.src = 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);    };    img.src = 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 URL formatted similar to support for filesystem:http://... 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 = dataURItoBlob(dataurl);//使用ajax发送varnew FormData();fd.append("image""image.png");varnew XMLHttpRequest();xhr.open(‘POST‘‘/server‘true);xhr.send(fd);

Reprint please retain source http://blog.csdn.net/cuixiping/article/details/45932793

Dataurl and File,blob,canvas objects convert JavaScript to each other