FileReader 与 window.URL.createObjectURL

Question

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

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

Answer 1

有区别。

1次

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

2）内存使用

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

3）支持

• 来自 IE 10 和所有现代浏览器的createObjectURL

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

  在我看来，最好使用 blob url（通过createObjectURL ），它更高效、更快，但如果您使用许多对象 url，则需要通过revokeObjectURL (to free memory) 释放这些 url 。 例如，您可以在 Image onload 处理程序中调用 URL.revokeObjectURL，Image 对象将保留图像数据，而不会丢失它，Nahuel Greco (c)。