发布日期：2025-01-03 18:00 点击次数：142
一般来说前端展示图片会通过三种方式： url、base64、blob
1.url: 一般来说，图片的显示还是建议使用url的方式比较好。
2.base64： 如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。如果图片像loading或者小图标，小图片这样的，大小极小，但又占据了一次HTTP请求，而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了！
3.blob: 当后端返回特定的图片二进制流的时候，前端用blob容器接收二进制流，再通过 URL.createObjectURL(blob)生成一个临时blob展示地址
关系图
url 转 base64
原理： 利用canvas.toDataURL的API转化成base64
使用
blob 转 url
原理： 利用URL.createObjectURL为blob对象创建临时的URL
blob 转 base64
原理： 利用fileReader的readAsDataURL，将blob转为base64
使用
base64 转 Blob
原理： Uint8Array，ArrayBuffer构造
或者
使用：
或者，利用fetch（推荐）
字符串 和 base64 之间互转
原理：atob 和 btoa
而且大部分浏览器都支持 除了 IE9-btoa 方法不支持中文和特殊字符，否则会报错
所以保险起见,在转换之前还是 encodeURIComponent/encodeURI一下吧, 当然别忘了在 atob 后,再 decodeURIComponent/decodeURI回来。
总结
到此这篇关于js实现base64、url和blob之间相互转换的三种方式的文章就介绍到这了,更多相关js base64 url blob相互转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:js中base64、url和blob之间相互转换的3种方式(详细代码)
