DataURL与File,Blob,canvas对象之间的互相转换
canvas转换为dataURL
1 | var dataurl = canvas.toDataURL('image/png'); |
File对象、Blob对象转换为dataURL
File对象也是一个Blob对象，二者的处理相同。1
2
3
4
5
6
7
8
9
10
11
12function 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对象
1 | function dataURLtoBlob(dataurl) { |
dataURL图片数据绘制到canvas
先构造Image对象，src为dataURL，图片onload之后绘制到canvas1
2
3
4
5var 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
1 | readBlobAsDataURL(file, function (dataurl){ |
Canvas转换为Blob
1 | var dataurl = canvas.toDataURL('image/png'); |
Blob转换为File
1 | function blobToFile(theBlob, fileName){ |
可以使用File构造器1
var file = new File([myBlob], "name");
##dataUrl转换为File
如果想用Ajax传递，不需要使用File，使用Blob即可1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19function 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});
}
var dataurl = 'data:text/plain;base64,aGVsbG8gd29ybGQ=';
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("file", blob, "hello.txt");
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server.php', true);
xhr.onload = function(){
alert('upload complete');
};
xhr.send(fd);
可以使用fetch将url转化为File
代码很简洁（可在chrome和firefox中使用）1
2
3
4
5
6
7
8
9
10//load src and convert to a File instance object
//work for any type of src, not only image src.
//return a promise that resolves with a File instance
function srcToFile(src, fileName, mimeType){
return (fetch(src)
.then(function(res){return res.arrayBuffer();})
.then(function(buf){return new File([buf], fileName, {type:mimeType});})
);
}
例子1：转化为File对象1
2
3
4
5
6
7
8srcToFile(
'data:text/plain;base64,aGVsbG8gd29ybGQ=',
'hello.txt',
'text/plain'
)
.then(function(file){
console.log(file);
})
例子2：转化为File对象并发送到服务器1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17srcToFile(
'data:text/plain;base64,aGVsbG8gd29ybGQ=',
'hello.txt',
'text/plain'
)
.then(function(file){
console.log(file);
var fd = new FormData();
fd.append("file", file);
return fetch('/server.php', {method:'POST', body:fd});
})
.then(function(res){
return res.text();
})
.then(console.log)
.catch(console.error)
;
参考：
