FileReader vs. window.URL.createObjectURL

Question

FileReader vs. window.URL.createObjectURL

Buduję mobilną stronę internetową i chciałbym używać API aparatu do robienia zdjęć. Obrazy powinny być wyświetlane na stronie internetowej i przesyłane na serwer. Zgodnie z wprowadzeniem do API kamery na MDN obrazy mogą być dostępne i wyświetlane na stronie internetowej za pomocą FileReader lub window.URL.createObjectURL. I przetestowałem Te możliwe rozwiązania z powodzeniem z iPadem (Safari i Chrome) i tabletem z Androidem (Chrome i Firefox).

Jaka jest różnica między FileReader a window.URL.createObjectURL? Myślę, że {[1] } jest nowsza, ale nie jest jeszcze standardem. Czy jest jakaś różnica w wydajności?

15

javascript file-upload

Author: nightlyop, 2015-07-31

Source

1 answers

score 41 · Accepted Answer

Jest różnica.

1) CZAS

createObjectURL jest wykonywany synchronicznie (natychmiast)
FileReader.readAsDataURL jest wykonywane asynchronicznie (po pewnym czasie)

2) Wykorzystanie pamięci

createObjectURL zwraca adres url z Hashem i przechowuje obiekt w pamięci, dopóki dokument nie wywoła zdarzenia unload (np.]}
FileReader.readAsDataURL zwraca base64, który zawiera wiele znaków i używa więcej pamięci niż adres blob, ale usuwa z pamięci, gdy nie używasz go (by garbage collector)

3) wsparcie

createObjectURL z IE 10 i wszystkich nowoczesnych przeglądarek
FileReader.readAsDataURL z IE 10 i wszystkich nowoczesnych przeglądarek

Ode mnie lepiej jest użyć adresów blob (via createObjectURL), jest bardziej wydajny i szybszy, ale jeśli używasz wielu adresów URL obiektów, musisz uwolnij te adresy URL przez revokeObjectURL (do wolnej pamięci) . na przykład możesz wywołać URL.revokeObjectURL wewnątrz procedury pobierania obrazu i obiektu obrazu zachowa dane obrazu, nie tracąc go, Nahuel Greco (c).