图片转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文件流
}
复制代码