DataURL与File,Blob,canvas对象之间的互相转换的Javascript

原创 2015年05月27日 01:14:54

canvas转换为dataURL (从canvas获取dataURL)

var dataurl = canvas.toDataURL('image/png');
var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);

File对象转换为dataURL、Blob对象转换为dataURL

File对象也是一个Blob对象,二者的处理相同。

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转换为Blob对象

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});
}
//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');

dataURL图片数据绘制到canvas

先构造Image对象,src为dataURL,图片onload之后绘制到canvas

var img = new Image();
img.onload = function(){
    canvas.drawImage(img);
};
img.src = dataurl;

File,Blob的图片文件数据绘制到canvas

还是先转换成一个url,然后构造Image对象,src为dataURL,图片onload之后绘制到canvas

利用上面的 readBlobAsDataURL 函数,由File,Blob对象得到dataURL格式的url,再参考 dataURL图片数据绘制到canvas

readBlobAsDataURL(file, function (dataurl){
    var img = new Image();
    img.onload = function(){
        canvas.drawImage(img);
    };
    img.src = dataurl;
});

不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍,仅以dataURL为例。

filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种URL,支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。

Canvas转换为Blob对象并使用Ajax发送

转换为Blob对象后,可以使用Ajax上传图像文件。

先从canvas获取dataurl, 再将dataurl转换为Blob对象

var dataurl = canvas.toDataURL('image/png');
var blob = dataURLtoBlob(dataurl);
//使用ajax发送
var fd = new FormData();
fd.append("image", blob, "image.png");
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.send(fd);

转载请保留来源 http://blog.csdn.net/cuixiping/article/details/45932793

相关文章推荐

[JS进阶] JS 之Blob 对象类型

Blob 是什么? 这里说的是一种Javascript的对象类型。 oracle 中也有类似的栏位类型。 在 [JS进阶] HTML5 之文件操作(file) 这一篇中用到了File对象,而实际...
  • oscar999
  • oscar999
  • 2014年11月30日 21:23
  • 72412

js关于blob与其它对象的转换和下载--草稿

image --> file download blob --> file download blob --> image 动态创建font-family ws.onmessage = fun...

data类型的Url格式:把小数据直接嵌入到Url中

原文地址:   data类型的Url格式:把小数据直接嵌入到Url中 所谓"data"类型的Url格式,是在RFC2397中提出的,目的对于一些“小”的数据,可以在网页中直接...

data类型的Url格式:把小数据直接嵌入到Url中

所谓"data"类型的Url格式,是在RFC2397中提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个点,...

JavaScript——图片base64编码转化成blob对象

function convertImgDataToBlob(base64Data) { var format = "image/jpeg"; ...

javascript将base64编码的图片数据转换为file并提交

/** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ va...

canvas.toDataURL() dataURL转化blob 失败

1、   var img = new Image(); img.crossOrigin="anonymous"; img...

JavaScript 图片URL转DataURL,DataURL转Blob

问题描述封装WebUploader,想实现信息修改的功能,就是一条记录可能有多个图片字段,每个字段又有可能有多张图片。当修改记录的时候,需要把图片字段中已经有的图片显示出来,实现旋转角度的功能,最重要...

DataURL与File,Blob,canvas对象之间的互相转换的Javascript

canvas转换为dataURL (从canvas获取dataURL)var dataurl = canvas.toDataURL(‘image/png’); var dataurl2 = canv...
  • dahuzix
  • dahuzix
  • 2016年03月07日 11:59
  • 1816

关于 HTML5 的文件上传处理,兼容,以及 BLOB 对象的使用

目前 HTML5 已经逐渐普及并成为主流,与之相关的 Single Page App 技术也逐渐被广泛应用起来,加上 Canvas 等等新的工具的支持,在前端可以做的事情可谓是非常多。 但是...
  • moonpure
  • moonpure
  • 2016年01月05日 13:45
  • 15975
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DataURL与File,Blob,canvas对象之间的互相转换的Javascript
举报原因:
原因补充:

(最多只允许输入30个字)