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

问题描述

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

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).

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

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?

推荐答案

有区别.

1. 时间

• createObjectURL 同步执行(立即)
• FileReader.readAsDataURL 异步执行(一段时间后)
• createObjectURL is synchronously executed (immediately)
• FileReader.readAsDataURL is asynchronously executed (after some time)
1. 内存使用
• createObjectURL 返回带有哈希值的 url，并将对象存储在内存中，直到文档触发卸载事件(例如文档关闭)或执行 revokeObjectURL
• FileReader.readAsDataURL 返回包含许多字符的 base64，并且比 blob url 使用更多的内存，但在您不使用它时从内存中删除(通过垃圾收集器)
• 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)
1. 支持
• createObjectURL 来自 IE 10 和所有现代浏览器
• FileReader.readAsDataURL 来自 IE 10 和所有现代浏览器
• createObjectURL from IE 10 and all modern browsers
• FileReader.readAsDataURL from IE 10 and all modern browsers

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

For 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).

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

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屋！