JS在浏览器中base64、url、blob互相转换

在平时开发的时候，我们在处理文件，尤其是图片的时候，经常会跟base64、url、blob(file)这三种形式的内容打交道。

base64格式一般都是以data:image/jpeg;base64,这种类似形式打头的一串很长的字符串。

url一般以服务器地址或者路径（形如http://xxx.jpg或者/static/xxx.jpg）为主，也会有浏览器本地地址（形如blob:http://这种）。

blob一般是浏览器中的一种对象类型，file类型也是其一种。

如何互相进行转换？

base64到blob：

比如png格式的base64图片转成blob类型：

其他格式的图片类似，于是可以写一个通用的图片接口：

blob转本地url：

blob转base64：

url转blob：

有了以上接口就可以三种格式互相转换了，不过url转blob和blob转base64是异步的操作，此外url还分服务器端url和浏览器本地url，需要自己使用时区分清楚。