图片URL转Base64，Base64转二进制文件流

现在的项目中对于图片的处理很多，对于图片的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转成你的二进制文件流了！