FileReader vs. window.URL.createObjectURL

FileReader vs. window.URL.createObjectURL

本文关键字：createObjectURL URL window vs FileReader      更新时间：2023-09-26

我正在构建一个移动网站，我想使用相机API拍照。图像应显示在网站上，并上传到服务器。根据MDN上Camera API的介绍，可以通过FileReader或window.URL.createObjectURL访问并在网站上显示图像。我用iPad (Safari和Chrome)和Android平板电脑(Chrome和Firefox)成功地测试了这些可能的解决方案。

FileReader和window.URL.createObjectURL有什么区别?我认为window.URL.createObjectURL较新，但还不是标准。在性能上有什么不同吗?

有区别

    间>
  • createObjectURL同步执行(立即)
  • FileReader.readAsDataURL异步执行(一段时间后)
  • 内存使用
    • createObjectURL返回url和哈希值，并将对象存储在内存中，直到文档触发卸载事件(例如文档关闭)或执行revokeObjectURL
    • FileReader.readAsDataURL返回base64，包含许多字符，并使用比blob url更多的内存，但从内存中删除，当你不使用它(由垃圾收集器)
    • createObjectURL从ie10和所有现代浏览器
    • FileReader.readAsDataURL从ie10和所有现代浏览器

    对我来说，最好使用blob url(通过createObjectURL)，它更高效，更快，但如果你使用许多对象url，你需要通过revokeObjectURL释放这些url(以释放内存)。

    例如，可以调用URL。imageonload处理程序中的revokeObjectURL和Image对象将保留图像数据，而不会丢失它，Nahuel Greco (c)

    • 相关文章：