JS里DataURL、File、Blob及canvas对象间互相转换的方法函数收藏


  • :
  • 04-03 21:55
  • :
  • 62次
  • :
  • 0条
  • 1赞

简介本文提供了在js里,DataURL、File、Blob、canvas这四个对象之间互相转换的方法。

这是站长在网上看到,搜集过来的,非常有用:

1》:canvas转换为dataURL :

var canvas = document.createElement("canvas");
var imgsrc = canvas.toDataURL('image/jpeg',0.8);//第二个参数指图片质量

2》:file/Blob对象转换为dataURL:

file对象其实也是blob对象,所以两者转换为dataURL的方法一样:

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);
});

3》:dataURL转换为Blob对象、dataURL转换为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');

4》:dataURL图片数据绘制到canvas:

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

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

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

原文来自:http://blog.csdn.net/cuixiping/article/details/45932793



您正在找的文章可能是: