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

Source: Internet
Author: User
Tags file url

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.