canvas轉(zhuǎn)換為dataURL (從canvas獲取dataURL)
var dataurl = canvas.toDataURL('image/png');
var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);
File對(duì)象轉(zhuǎn)換為dataURL棺弊、Blob對(duì)象轉(zhuǎn)換為dataURL
File對(duì)象也是一個(gè)Blob對(duì)象剧蚣，二者的處理相同搜变。
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轉(zhuǎn)換為Blob對(duì)象、dataURL轉(zhuǎn)換為File對(duì)象
File繼承于Blob，擴(kuò)展了一些屬性（文件名延都、修改時(shí)間蒸甜、路徑等）棠耕。絕大多數(shù)場(chǎng)景下，使用Blob對(duì)象就可以了柠新。
兼容性：Edge瀏覽器不支持File對(duì)象構(gòu)造函數(shù)窍荧，也就是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圖片數(shù)據(jù)繪制到canvas
先構(gòu)造Image對(duì)象恨憎，src為dataURL蕊退，圖片onload之后繪制到canvas
var img = new Image();
img.onload = function(){
canvas.drawImage(img);
};
img.src = dataurl;
File,Blob的圖片文件數(shù)據(jù)繪制到canvas
還是先轉(zhuǎn)換成一個(gè)url，然后構(gòu)造Image對(duì)象憔恳，src為dataURL瓤荔，圖片onload之后繪制到canvas
利用上面的 readBlobAsDataURL 函數(shù)，由File,Blob對(duì)象得到dataURL格式的url钥组，再參考 dataURL圖片數(shù)據(jù)繪制到canvas
readBlobAsDataURL(file, function (dataurl){
var img = new Image();
img.onload = function(){
canvas.drawImage(img);
};
img.src = dataurl;
});
不同的方法用于構(gòu)造不同類型的url (分別是 dataURL, objectURL(blobURL), filesystemURL)输硝。這里不一一介紹，僅以dataURL為例者铜。
filesystemURL不是指本地文件URL的形式(file:///….), 而是格式類似于 filesystem:http://... 的一種URL腔丧，支持沙盒文件系統(tǒng)的瀏覽器支持(目前僅Chrome)支持。
Canvas轉(zhuǎn)換為Blob對(duì)象并使用Ajax發(fā)送
轉(zhuǎn)換為Blob對(duì)象后作烟，可以使用Ajax上傳圖像文件愉粤。
先從canvas獲取dataurl, 再將dataurl轉(zhuǎn)換為Blob對(duì)象
var dataurl = canvas.toDataURL('image/png');
var blob = dataURLtoBlob(dataurl);
//使用ajax發(fā)送
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
