js中url、base64、blob、字符串等相互转换方法---有关系图，最全总结

事情的起因是这样的，这周在工作时，调用了一个图片转灰度透明的接口，返回来的是一个image字段不是一个url地址，是一个base64编码的字符串，和后端沟通的时候，也明白了为什么返回base64编码，而不是一个url地址，因为后端处理完前端发送过的图片后，根本没存入数据库中，也就没有url地址了，调用的图片转灰度接口，只是一个工具接口而已，并不会产生服务器级别的操作，所以处理完后直接返回一个base64的编码

一般来说，图片在后端的存储方式分为两种：

• 可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;
• 将图片转换成二进制流或base64，直接存储到数据库的 Image 类型字段中.

对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。
对于第二种存储方式，我们前端需要将二进制流交由 blob 对象处理，然后通过 blob 的 API 生成临时 URL 赋值给 src 属性来显示。或者将base64直接赋值给src属性

我觉得没人会用第二种吧，毕竟采用第二种方式存储图片，需要的空间太大了，如果前端得到的是base64或者二进制串就得通过一些方法，把格式转换成能展示出图片的编码格式了，一不做二不休，干脆总结一下常用的格式转换方法把

一般来说前端展示图片会通过三种方式： url、base64、blob

url: 一般来说，图片的显示还是建议使用url的方式比较好。

let base64Str = "http://xxxxxx"	
$("#img").attr("src",base64Str)

base64： 如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。如果图片像loading或者小图标，小图片这样的，大小极小，但又占据了一次HTTP请求，而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了！

let base64Str = "data:image/png;base64,iVBORw0KG.....AAAAElFTkSuQmCC"	
$("#img").attr("src",base64Str)

blob: 当后端返回特定的图片二进制流的时候，前端用blob容器接收二进制流，再通过 URL.createObjectURL生成一个临时blob展示地址

 let blob = new Blob([图片二的进制流],{
   type:'image/jpeg'})
 let url = URL.createObjectURL(blob)  //创建URL,
 $("#img").attr("src",url)

字符串、url、base64、blob（File）的相互转换

总结出一张我自己画的图：后续发现新东西会持续补充

如果想要更加详细的关系，可参考这张图

url 转 base64

原理： 利用canvas.toDataURL的API转化成base64

function urlToBase64(url) {
   
      return new Promise ((resolve,reject) => {
   
        let image = new Image();
        image.onload = function() {
   
          let canvas = document