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

 

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

 

 

你可能感兴趣的:(前端,javascript,开发语言,vue)