Preview image: Blob or FileReader? [duplicate]

Question

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?

Answer 1

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

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

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