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

较新，但还不是标准。性能有区别吗？

Answer 1

有区别。

1. 时间

• createObjectURL

  同步执行（立即）

• FileReader.readAsDataURL

  异步执行（一段时间后）

2. 内存使用情况

• createObjectURL

  返回带有哈希的url，并将对象存储在内存中，直到文档触发卸载事件（例如文档关闭）或执行

  revokeObjectURL

• FileReader.readAsDataURL

  返回包含许多字符的

  base64

  ，并且使用比blob url更多的内存，但是当你不使用它时从内存中删除（通过垃圾收集器）

3. 支持

• createObjectURL

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

• FileReader.readAsDataURL

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

对我来说，最好使用blob url（通过

createObjectURL

），它更高效、更快，但如果你使用很多对象url，你需要 通过

revokeObjectURL

释放这些网址（以释放内存）。

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

Answer 2

有两个主要区别：

1. FileReader

   以 URL 形式获取实际数据，其中可以包含长的 base64 编码字符串。另一方面，

   URL.createObjectURL

   创建一个短 URL，该 URL 在文档可用时可用，但之后将无法使用（与

   FileReader

   中的数据不同，它可以粘贴到任何内容中，包括存储在

   localStorage

   中）或发送到某个地方）。

2. FileReader

   是异步的，而

   URL.createObjectURL

   是同步