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对象、dataURL转换为File对象

File继承于Blob,扩展了一些属性(文件名、修改时间、路径等)。绝大多数场景下,使用Blob对象就可以了。
兼容性:Edge浏览器不支持File对象构造函数,也就是Edge里不能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图片数据绘制到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:01
  • 86501

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

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

js blob对象互转

引用: http://blog.csdn.net/oscar999/article/details/36373183
  • tangcc110
  • tangcc110
  • 2018-01-20 22:13:23
  • 341

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

function convertImgDataToBlob(base64Data) { var format = "image/jpeg"; ...
  • yu17310133443
  • yu17310133443
  • 2017-03-01 15:25:12
  • 5225

file保存成blob

1 model private Blob xlsfile; public Blob getXlsfile() {   return xlsfile;  }  public void setX...
  • xia_xi_long
  • xia_xi_long
  • 2017-07-24 16:09:30
  • 104

base64与Blob互转以及Blob下载

当下载canvas生成的base64图片,当图片过大时会失败。这是我们可以把base64图片转成Blob二进制文件再下载~ //**dataURL to blo...
  • qq_39759115
  • qq_39759115
  • 2017-11-24 15:05:53
  • 599

图片base64与blob互转

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

js 获取url传值和base64转成blob对象

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

base64图片转file文件提交

/**  * @param base64Codes  *            图片的base64编码  */ function sumitImageFile(base64Codes){  ...
  • wang_long_989
  • wang_long_989
  • 2016-09-14 10:57:02
  • 5973

将file类型的文件转换为blob,将blob类型转换为file

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • qq_25506739
  • qq_25506739
  • 2017-03-10 11:47:33
  • 555
收藏助手
不良信息举报
您举报文章:DataURL与File,Blob,canvas对象之间的互相转换的Javascript
举报原因:
原因补充:

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