js實現圖片資源、blob、base64的各類場景轉換

文件轉babase64

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

View Code

/**
 * 獲取指定文件的base64編碼
 * @param  object   File       Blob 或 File 對象       這裏是file對象
 * @param  Function callback   返回數據的回調函數
 * @return string              返回base64編碼
 */
function getBase64(File,callback){
    var reader = new FileReader();                  //IE10+
    var AllowImgFileSize = 2100000;                 //上傳圖片最大值(單位字節)（ 2 M = 2097152 B ）超過2M上傳失敗
    var File = File||$("#file").get(0).files[0];    //獲取上傳的文件對象
    /*
        FileList {0: File, 1: File, length: 2} 多個文件
        File:{name: "fan.jpg", lastModified: 1559019043288, lastModifiedDate: Tue May 28 2019 12:50:43 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 3346145, type: "image/jpeg"}
        FileList {0: File, 1: File, length: 2}  單個文件
     */
    if (File) {

        //讀取指定的 Blob 或 File 對象  觸發loadend 事件 並將圖片的base64編碼賦值給result
        reader.readAsDataURL(File);
        //reader.readAsText(File)
        //異步通訊 回調函數返回
        reader.onload = function (e) {
           //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64碼部分（可選可不選，須要與後臺溝通）
           if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                alert( '上傳失敗，請上傳不大於2M的圖片！');
                return;
            }else{
                var base64Data=reader.result;
                //返回base64編碼
                callback(base64Data);
            }
        }
    }  
  
}

base64轉換爲file對象

function Base64toFile(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轉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 });
}

View Code

/*2:轉bob*/
/**
 * 將以base64的圖片url數據轉換爲Blob
 * @param base64    用url方式表示的base64圖片數據
 * @return blob     返回blob對象           
 */
function convertBase64UrlToBlob(base64){
    var type =base64.split(",")[0].match(/:(.*?);/)[1];//提取base64頭的type如 'image/png'     
    var bytes=window.atob(base64.split(',')[1]);//去掉url的頭，並轉換爲byte (atob:編碼 btoa:解碼)

    //處理異常,將ascii碼小於0的轉換爲大於0 
    var ab = new ArrayBuffer(bytes.length);//通用的、固定長度(bytes.length)的原始二進制數據緩衝區對象
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob( [ab] , {type :type});
}

Blob轉base64

function blobToBase64(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}