js图片 视频预览 URL createObjectURL()

不少业务场景须要搞定图片/视频上传，同时又要求可以快速预览效果，避免图片或视频稍大或请求响应较慢，使用createObjectURL()本地预览实用性更加。

1、什么是URL.createObjectURL()

URL.createObjectURL() 静态方法会建立一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和建立它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

来源: MDN

简单的理解一下就是将一个file或Blob类型的对象转为UTF-16的字符串，并保存在当前操做的document下。

扩展1： UTF-8与UTF-16与GBK到底有啥区别， 都是 可变长度的编码方式 经过对Unicode码值进行对应规则转换后，编码保持到内存/文件中

细提及来就是另外一个故事了，不要在乎细节。

2、URL.createObjectURL()有什么用

固然是本篇主题的预览功能了。

等等。预览用FileReader.readAsDataURL(file)转base64搞定啊。

好的，下一话题。

3、URL.createObjectURL()与FileReader.readAsDataURL()

若是你会用FileReader.readAsDataURL(file)方法，那能够往下读类比一下二者优劣。

1. 返回值

   • FileReader.readAsDataURL(file)能够获得一段base64的字符串。
   • URL.createObjectURL(file)能够获得当前文件的一个内存URL。

2. 内存使用

   • FileReader.readAsDataURL(file)的返回值是转化后的超长base64字符串(长度与要解析的文件大小正相关)。
   • URL.createObjectURL(file)的返回值虽然是字符串，可是是一个url地址。

3. 内存清理

   • FileReader.readAsDataURL(file)依照JS垃圾回收机制自动从内存中清理。
   • URL.createObjectURL(file)存在于当前doucment内，清除方式只有unload()事件或revokeObjectURL()手动清除 。

4. 执行机制

   • FileReader.readAsDataURL(file)经过回调的形式返回，异步执行。
   • URL.createObjectURL(file)直接返回，同步执行。

5. 兼容性

   • 兼容性兼容IE10以上，其余浏览器均支持。

6. 其余

   • FileReader.readAsDataURL(file)当多个文件同时处理时，须要每个文件对应一个新的FileReader对象。

     

   • URL.createObjectURL(file)依次返回无影响。

---

整体来讲

URL.createObjectURL(file)获得本地内存容器的URL地址，方便预览，屡次使用须要注意手动释放内存的问题，性能优秀。 FileReader.readAsDataURL(file)胜在直接转为base64格式，能够直接用于业务，无需二次转换格式。

关于使用canvas截取视频第一帧的问题，下篇再来。

---

附1：Base64 to Blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
复制代码