javascript - FileReader与window.URL.createObjectURL

我正在建立一个移动网站，我想使用Camera API拍照。这些图像应显示在网站上并上传到服务器。根据introduction to the Camera API on MDN，可以使用FileReader或window.URL.createObjectURL访问图像并将其显示在网站上。我通过iPad(Safari和Chrome)和Android平板电脑(Chrome和Firefox)成功实现了这些可能的解决方案。
FileReader和window.URL.createObjectURL有什么区别？我认为window.URL.createObjectURL是更新的，但还不是标准。性能上有区别吗？

最佳答案

有区别。

1次

createObjectURL(立即)同步执行

FileReader.readAsDataURL是异步执行的(一段时间后)

2)内存使用

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

FileReader.readAsDataURL返回包含许多字符的base64，并且比blob url使用更多的内存，但是当您不使用它时(由垃圾收集器将其从内存中删除)

3)支持

IE 10和所有现代浏览器中的

createObjectURL

IE 10和所有现代浏览器中的

FileReader.readAsDataURL
对我来说，最好使用blob url(通过createObjectURL)，效率更高，速度更快，但是如果您使用许多对象url，则需要
通过revokeObjectURL释放这些url(以释放内存)。
例如，您可以在Image onload处理程序中调用URL.revokeObjectURL，并且Image对象将保留图像数据而不会丢失，即Nahuel Greco(c)。