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