The Javascript__java between Dataurl and File,blob,canvas objects

Canvas Convert to Dataurl (get Dataurl from canvas)

var dataurl = Canvas.todataurl (' image/png ');
var dataurl2 = Canvas.todataurl (' image/jpeg ', 0.8);

Convert file object to Dataurl, Blob object to Dataurl

The file object is also a Blob object, which is treated the same.

function Readblobasdataurl (BLOB, callback) {
    var a = new FileReader ();
    A.onload = function (e) {callback (e.target.result);};
    A.readasdataurl (BLOB);
}
Example:
readblobasdataurl (BLOB, function (dataurl) {
    console.log (dataurl);
});
Readblobasdataurl (file, function (dataurl) {
    console.log (dataurl);
});

Dataurl Convert to Blob object, Dataurl to file object

File inherits from a blob, extending some attributes (file name, modification time, path, and so on). In most scenarios, you can use a Blob object.
Compatibility: Edge Browser does not support the file object constructor, that is, the edge can not be new file ().

function Dataurltoblob (dataurl) {
    var arr = dataurl.split (', '), MIME = Arr[0].match (/:(. *?); [1],
        BSTR = Atob (arr[1]), n = bstr.length, U8arr = new Uint8array (n);
    while (n--) {
        U8arr[n] = bstr.charcodeat (n);
    }
    return new Blob ([U8arr], {type:mime});
}
function Dataurltofile (dataurl, filename) {
    var arr = dataurl.split (', '), MIME = Arr[0].match (/:(. *?); [1],
        BSTR = Atob (arr[1]), n = bstr.length, U8arr = new Uint8array (n);
    while (n--) {
        U8arr[n] = bstr.charcodeat (n);
    }
    return new File ([U8arr], filename, {type:mime});
}
Test:
var blob = Dataurltoblob (' data:text/plain;base64,ywfhywfhyq== ');
var file = dataurltofile (' data:text/plain;base64,ywfhywfhyq== ', ' test.txt ');

dataurl picture data drawn to canvas

First constructs the image object, SRC is Dataurl, the picture onload then draws to canvas

var img = new Image ();
Img.onload = function () {
    canvas.drawimage (img);
};
IMG.SRC = Dataurl;

file,blob picture file data is drawn to canvas

Or first convert to a URL, and then construct the image object, src for dataurl, picture onload after drawing to canvas

Using the above Readblobasdataurl function, the File,blob object gets the URL of the Dataurl format and then draws the Dataurl picture data to the canvas

Readblobasdataurl (file, function (dataurl) {
    var img = new Image ();
    Img.onload = function () {
        canvas.drawimage (img);
    };
    IMG.SRC = Dataurl;
});

Different methods are used to construct different types of URLs (Dataurl, Objecturl (Bloburl), Filesystemurl). This is not a dataurl, just for example.

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 the browser support for sandboxed file systems (currently chrome only). Canvas is converted to a BLOB object and sent using Ajax

After you convert to a Blob object, you can upload an image file using Ajax.

Get Dataurl from canvas first, then convert Dataurl to Blob object

var dataurl = Canvas.todataurl (' image/png ');
var blob = Dataurltoblob (dataurl);
Use Ajax to send
var fd = new FormData ();
Fd.append ("image", blob, "image.png");
var xhr = new XMLHttpRequest ();
Xhr.open (' POST ', '/server ', true);
Xhr.send (FD);

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