圖片轉base64的幾種方法

因爲要把圖片轉成base64，因此總結了一些用法

方法一：使用btoa

btoa() 方法用於建立一個 base-64 編碼的字符串。
該方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符來編碼字符串。
base-64 解碼使用方法是 atob() 。

window.btoa(str)
複製代碼

// 將獲取到的圖片流文件轉成base64
const img = 'data:image/jpeg;base64,' + arrayBuffer2Base64(arrayBufferFile)
複製代碼

下面兩個方法是同樣的，只是循環數據的方法不同而已

function arrayBuffer2Base64 (value) {
    return window.btoa(new Uint8Array(value).reduce(function (data, byte) {
        return data + String.fromCharCode(byte);
    }, ''))
},
function arrayBufferToBase64 (buffer) {
    var binary = ''
    var bytes = new Uint8Array(buffer)
    var len = bytes.byteLength
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
    }
    return window.btoa(binary)
}
複製代碼

這個比較簡潔，不過圖片太大會內存溢出。

btoa(String.fromCharCode(...new Uint8Array(buffer)))
複製代碼

方法二 canvas處理

function getBase64Image(img,width,height) { // width、height調用時傳入具體像素值，控制大小 ,不傳則默認圖像大小
    var canvas = document.createElement("canvas");
    canvas.width = width ? width : img.width;
    canvas.height = height ? height : img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL();
    return dataURL;
}
複製代碼

方法三 fileReader

var reader = new FileReader();
imgUrlBase64 =reader.readAsDataURL(file);
reader.onload = function(e)
{
   reader.result; // 讀取到的base64文件流
}
複製代碼