javascript - FileReader 与 window.URL.createObjectURL

Question

我正在构建一个移动网站，我想使用 Camera API 来拍照。图片应显示在网站上并上传到服务器。根据introduction to the Camera API on MDN可以使用 FileReader 或 window.URL.createObjectURL 在网站上访问和显示图像。我 tested这些可能的解决方案在 iPad(Safari 和 Chrome)和 Android 平板电脑(Chrome 和 Firefox)上成功运行。

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

Answer 1

有区别。

1. 时间

• createObjectURL 同步执行(立即)
• FileReader.readAsDataURL 异步执行(一段时间后)

1. 内存使用情况

• createObjectURL 返回带哈希的 url，并将对象存储在内存中，直到文档触发卸载事件(例如文档关闭)或执行 revokeObjectURL
• FileReader.readAsDataURL 返回包含许多字符的 base64，并且使用比 blob url 更多的内存，但是当你不使用它时从内存中删除(通过垃圾收集器)

1. 支持

• createObjectURL 来自 IE 10 和所有现代浏览器
• FileReader.readAsDataURL 来自 IE 10 和所有现代浏览器

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

例如，您可以在图像加载处理程序中调用 URL.revokeObjectURL，图像对象将保留图像数据而不会丢失它，Nahuel Greco (c)。