base64,file和Blob的轉換

前端工程師們可能平時沒太在乎圖片傳輸的格式，由於基本都傳的是file類型給後臺。實際上，有些業務場景須要將圖片格式作一個相互轉換。

轉換總結以下：

一、 base64轉換爲Blob

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 });
}
複製代碼

二、Blob/file 轉爲base64

參數：blob或file
function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}複製代碼

三、base64轉換爲file

function dataURLtoFile(dataurl, filename) {//將base64轉換爲文件
        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});
}複製代碼

四、圖片轉換爲base64

function getImgToBase64(url,callback){//將圖片轉換爲Base64
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}複製代碼