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 获取url传值和base64转成blob对象

获取url传值方法: function getRequestParams() { var url = location.search; // 获取url中"?"符后的字串 if(url.inde...
  • shangazhe
  • shangazhe
  • 2017年01月18日 14:35
  • 2469

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

function convertImgDataToBlob(base64Data) { var format = "image/jpeg"; ...
  • yu17310133443
  • yu17310133443
  • 2017年03月01日 15:25
  • 4263

图片base64与blob互转

/** * base64 转 blob 对象,文件上传 * 转载自:http://blog.csdn.net/hsany330/article/details/52575459 * @param ...
  • u010861514
  • u010861514
  • 2017年07月29日 15:12
  • 1702

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

image --> file download blob --> file download blob --> image 动态创建font-family ws.onmessage = fun...
  • yunhengyin
  • yunhengyin
  • 2016年08月05日 10:56
  • 7466

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

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

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
  • 1976

通过转成Blob文件下载base64图片(兼容IE)

// ------------------------ base64 转 Blob ,并装到数组中 --------------------------------------------- ...
  • qq_39759115
  • qq_39759115
  • 2017年11月25日 16:26
  • 161

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

原文链接:http://blog.csdn.net/cuixiping/article/details/45932793 链接:http://www.jianshu.com/p/6e40750fb7...
  • wabiaozia
  • wabiaozia
  • 2017年01月04日 15:43
  • 629

canvas.toDataURL() dataURL转化blob 失败

1、   var img = new Image(); img.crossOrigin="anonymous"; img...
  • gufeilong
  • gufeilong
  • 2016年09月29日 19:35
  • 1655

base64图片转file文件提交

/**  * @param base64Codes  *            图片的base64编码  */ function sumitImageFile(base64Codes){  ...
  • wang_long_989
  • wang_long_989
  • 2016年09月14日 10:57
  • 5159
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DataURL与File,Blob,canvas对象之间的互相转换的Javascript
举报原因:
原因补充:

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