解决图片、视频地址加密问题

 

const getImgUrl = async () => {
      const imgUrl = '远程链接地址'
      const response = await fetch(imgUrl)
      //取出blob二进制
      const blob = await response.blob()
      //url转为类似blob:http://localhost:9587/cf3265b9-75eb-4722-8e11-5048dec2564d
      //赋值给需要展示的地方
      const url = URL.createObjectURL(blob)
}

利用fetch或者xhr都可以，实现思路:

1、远程链接

2、fetch下载图片转二进制流

3、用URL.createObjectURL(blob)创建一个 DOMString

   （与FileReader.readAsDataURL(file)相似文末解释）

切记：需要在页面卸载之前 （例：vue 中 beforeDestroy） 去释放掉所创建的DOMString

释放方法: URL.revokeObjectURL()

主要区别

1. 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
2. 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

执行时机：

1. createObjectURL是同步执行（立即的）
2. FileReader.readAsDataURL是异步执行（过一段时间）

内存使用：

1. createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
2. FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
3. 兼容性方面两个属性都兼容ie10以上的浏览器。

优劣对比：

1. 使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
2. 如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL