現在的專案中對於圖片的處理很多，對於圖片的URL轉Base64或者Base64轉檔案流很是不好處理，下面我總結了這兩種方法互轉的程式碼，希望對你有所幫助。

圖片URL 轉Base64

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}
var imgLink = "你的圖片URL";
var tempImage = new Image();
tempImage.crossOrigin = "*";
tempImage.onload = function(){
var base64 = getBase64Image(tempImage);
    console.log(base64);
}
tempImage.src = imgLink;
 

上面的程式碼其實對於大家並不是很陌生，最主要的事先有canvas把你所需要的圖片畫出來，然後利用toDataURL把圖片轉成Base64，看到這裡是不是覺得其實很簡單並沒有自己想的那麼難！

Base64轉二進位制檔案流

function dataURLtoBlob(baseurl) {
    let arr = baseurl.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
    });
}
 

上面這段程式碼就是講你得到的Base64轉成二進位制流的方法，這裡面split() match() 這兩個方法不用說了很簡單，其中atob()方法可能有一部分同學會覺得很陌生，其實這就是window提供的一種解碼方法：

atob()方法

WindowOrWorkerGlobalScope.atob() 函式對已經使用base-64編碼編碼的資料字串進行解碼。您可以使用該btoa()方法對可能導致通訊問題的資料進行編碼和傳輸，然後將其傳輸並使用該atob()方法再次解碼資料。例如，您可以對控制字元（如 ASCII 值0到 31）進行編碼，傳輸和解碼。

想要深入瞭解的同學可以去度娘一下！下面就是charCodeAt()這方法其實也是很簡單下面說一下他的作用以及用法：

charCodeAt()定義和用法

charCodeAt() 方法可返回指定位置的字元的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。

方法 charCodeAt() 與 charAt() 方法執行的操作相似，只不過前者返回的是位於指定位置的字元的編碼，而後者返回的是字元子串。

到這裡大家就可以開開心心的把你的Base64轉成你的二進位制檔案流了！