blob 轉成 dataURL
blob 和 file 都可以使用，從 blob 讀取資料的唯一方式就是使用 FileReader。
functionblobtoDataURL(blob,callback){
varfr=newFileReader();
fr.onload=function(e){
callback(e.target.result);
};
fr.readAsDataURL(blob);
}
blobtoDataURL(blob,function(dataURL){
console.log(dataURL);
});
dataURL 繪製到 canvas
新增一個 image 和 canvas，image src 屬性帶入 dataURL，然後用 canvas drawImage 繪製剛才新增的 image。之後就可以用 canvas 來幫 image 做很多事，例如裁切、縮放、打字、畫線條等等。
varimg=newImage(),
canvas=document.createElement('canvas'),
ctx=canvas.getContext('2d');
img.onload=function(){
ctx.drawImage(img);
};
img.src=dataURL;
canvas 轉成 dataURL
這個最簡單。
canvas.toDataURL();// 預設會轉成 image/png
canvas.toDataURL('image/jpeg',0.8);// 可指定 jpeg 品質
canvas 轉成 blob
目前只有 Firefox 支援，其他瀏覽器可使用canvas-to-blob.js
canvas.toBlob(function(blob){
console.log(blob);
},"image/jpeg",0.8);
dataURL 轉成 blob
資源來源：stackoverflow
functiondataURItoBlob(dataURI){
// convert base64/URLEncoded data component to raw binary data held in a string
varbyteString;
if(dataURI.split(',')[0].indexOf('base64')>=0)
byteString=atob(dataURI.split(',')[1]);
else
byteString=unescape(dataURI.split(',')[1]);
// separate out the mime component
varmimeString=dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to a typed array
varia=newUint8Array(byteString.length);
for(vari=0;i<byteString.length;i++){
ia[i]=byteString.charCodeAt(i);
}
returnnewBlob([ia],{type:mimeString});
}
