Используйте blobURL, который вы создаете, используя URL.createObejctURL(blob);.
В комментариях вы заявляете, что у вас есть опасения по поводу поддержки браузера и использования памяти (вы даже говорите об утечке памяти ...).
Поддержка браузера
Только несколько версий Chrome поддерживали объект FileReader, но не поддерживали URL.createObjectURL (IIRC, существовавший до версии 14).Internet Explorer добавил поддержку в IE10, так же, как они сделали для объекта Blob и FileReader.
Использование памяти
BlobURL - это просто указатель на данные, которые уже находятся в памяти или только на диске.Указатель не имеет веса в памяти.
С другой стороны, dataURL - это строковое представление двоичных данных.Он весит примерно на 34% больше, чем данные, которые он представляет (потому что двоичный файл должен быть сопоставлен с более безопасными символами).
Теперь, чтобы нарисовать изображение, которое находится на другом конце URI,
- для blobURI, браузер будет непосредственно анализировать его и генерировать растровое изображение из него => памятииспользование ~ 2.5x размера изображения (как если бы оно было загружено с сервера).
- для dataURI, браузер сначала анализирует строку (но не может от нее избавиться), чтобы получить доступ к двоичному формату (1,34x + 1x), затем анализирует ее и генерирует растровое изображение изit (+ 2.5x => 4.84x).
Не только это, но если вы собираетесь назначить этот dataURI в нескольких местах, то это будет в 1,34 раза больше данных каждый раз, когда вы просто копируете строкуи учитывая, насколько сложно кешировать dataURI, вы в конечном итоге используете много памяти для представления одних и тех же двоичных данных ...
Утечки памяти?
Нет.Нет утечек памяти.Просто, когда BlobURL ссылается на Blob, этот Garb не может быть собран с помощью GarbageCollector до тех пор, пока blobURL не был отозван.Но, учитывая, что время жизни blobURL связано с документом, который его создал, он все равно умрет при следующем обновлении.
Кроме того, если вы имеете дело с данными, которые приходят с диска пользователя, то blobURL на самом деле простоуказатель и никакие данные не хранятся в памяти.
Существует только несколько вариантов использования метода readAsDataURL FileReader, и если вы не уверены, что должны его использовать, просто используйтеblobURL.