FileReader与window.URL.createObjectURL [英] FileReader vs. window.URL.createObjectURL

问题描述

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

FileReader 和 window.URL.createObjectURL ？我认为 window.URL.createObjectURL 是较新的，但不是标准。有没有差别的表现？

解决方案

< h2> 1）time

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

  2）内存使用情况
  
  $ ul $ b $ li $ createObjectURL 并将对象存储在内存中，直到文档触发卸载事件（例如文档关闭）或执行 revokeObjectURL



• FileReader。 readAsDataURL 返回包含许多字符的 base64 ，并且使用比blob url更多的内存，但是当你不使用它时，收藏家）

3）支持

• 从IE 10和所有现代浏览器都可以使用 createObjectURL
  

• FileReader.readAsDataURL 从IE 10和所有现代的浏览器中，我们最好使用blob url（通过 createObjectURL ），效率更高，速度也更快，但是如果使用多个对象url，则需要
  通过 revokeObjectURL 释放这些url（以释放内存）。
  例如，您可以在Image onload处理程序中调用URL.revokeObjectURL，而Image对象将保留图像数据，而不会丢失它，Nahuel Greco（c）。

  / li>
  

I'm building a mobile website and I'd like to use the Camera API to take photos. The images should be displayed on the website and uploaded to a server. According to the introduction to the Camera API on MDN the images can be accessed and displayed on the website using FileReader or window.URL.createObjectURL. I tested these possible solutions successfully with an iPad (Safari and Chrome) and an Android tablet (Chrome and Firefox).

What is the difference between FileReader and window.URL.createObjectURL? I think window.URL.createObjectURL is newer but not a standard yet. Is there a difference in the performance?

解决方案

There is difference.

1) time

• createObjectURL is synchronously executed (immediately)
• FileReader.readAsDataURL is asynchronously executed (after some time)

2) memory usage

• createObjectURL returns url with hash, and store object in memory until document triggers unload event (e.g. document close) or execute revokeObjectURL
• FileReader.readAsDataURL returns base64 that contains many characters, and use more memory than blob url, but removes from memory when you don't use it (by garbage collector)

3) support

• createObjectURL from IE 10 and all modern browsers

• FileReader.readAsDataURL from IE 10 and all modern browsers

  From me, is better to use blob url's (via createObjectURL), it is more efficient and faster, but if you use many object urls, you need to release these urls by revokeObjectURL (to free memory). For example, you can call URL.revokeObjectURL inside an Image onload handler and the Image object will keep the image data, without losing it, Nahuel Greco (c).

这篇关于FileReader与window.URL.createObjectURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！