Файл который не может быть просмотрен в браузере графическое изображение база данных

Обновлено: 07.07.2024

Если вы блогер, занимаетесь веб-дизайном, фотографией или имеете другие причины получать предельно подробные данные об изображении без его сохранения на компьютер, то придется воспользоваться специализированными плагинами, доступными для браузеров Firefox и Google Chrome.

Зачем просматривать данные изображения прямо в браузере?

Если картинка уже сохранена на компьютере, то получить информацию о ней можно с помощью встроенных средств операционной системы, кликнув правой кнопкой мыши по фото и выбрав в контекстном меню пункт Свойства – Подробнее . При этом большинству редакторов и фотографов желательно получать подобные данные ещё до того, как будет принято решение о сохранении изображения на компьютер или нужно узнать дату съемки. Это позволит избежать захламления компьютера неподходящими по тем или иным параметрам изображениями, которые в конечном итоге удалять и тратить на это дополнительное время.

С помощью специализированных плагинов для наиболее популярных браузеров (мы рассмотрим соответствующие расширения для Mozilla Firefox и Google Chrome) вы сможете узнать о:

Размере картинки в пикселях.
Альтернативном тексте изображения (это будет особенно полезно для SEO-специалистов).
Фактическом размере изображения в мегапикселях.
URL-адресе изображения.
Данных EXIF.

Последний параметр будет доступен, если с изображением связаны какие-то данные. Они помогут узнать, как было сделано фото и получить полезную дополнительную информацию (модель камеры, модель объектива, разрешение, дата съемки и т д.).

Владея этим данными, можно будет загружать только те картинки, которые будут соответствовать всем необходимым требованиям, а не проводить спустя какое-то время дополнительную ревизию файлов, сохраненных на ПК.

По-хорошему получение таких данных можно сделать стандартной функцией, доступной в любом браузере по умолчанию, но пока этого нет, на помощь приходят плагины и расширения, который устанавливаются дополнительно.

Как можно просмотреть данные изображения прямо в браузере?

Для этого и устанавливаются дополнительные плагины, которые демонстрируют свойства изображения. Они, по сути, дублируют и расширяют системные возможности операционной системы Windows, но при этом они позволяют получать информацию о картинках ещё до их сохранения на компьютер. В плане управления все подобные плагины интуитивно понятны и просты, о наиболее популярных и эффективных расширениях подобного рода мы расскажем ниже.

Как правильно использовать плагин Exif Viewer для браузера Firefox

Для начала установите плагин Exif Viewer , в браузер Mozilla Firefox. После успешного завершения установки и активации плагина перейдите в раздел Меню – Дополнения – Расширения.

После этого будет достаточно открыть на веб-странице любую интересующую картинку, кликнуть по ней правой кнопкой мыши и выбрать в контекстном меню пункт Exif Viewer. В новом окне можно будет поставить галочки по объёму информации и формату её предоставления.

Все что нужно делается буквально в один клик – навели курсор мыши на картинку и открыли с помощью правой кнопки мыши контекстное меню нужного изображения. Фактически все можно делать по аналогии с получением информации о картинках, сохраненных на ПК.

Гистограмма включается галочкой в крайнем справа окне меню расширения и предоставляет три окна со спектрами.

Обратите внимание, что данный плагин демонстрирует только данные EXIF, если их нет, то простите. Как правило мессенджеры автоматически вырезают эту информацию.

Краткий обзор аналогичных плагинов для браузера Google Chrome

Для браузера Google Chrome существуют аналогичные расширения, которые помогают получить информацию о картинке прямо в браузере. Это аналоги Exif Viewer:

Viewer Pro
Exponator Live!
Exif Viewer Classic

Давайте посмотрим, как установить и пользоваться плагином Exponator Live !. Для начала найдите этот плагин в магазине расширений для Google Chrome и установите его, кликнув по кнопке « Установить ». После этого перейдите в меню Дополнительные инструменты – Расширения и проверьте, включен ли плагин Exponator Live!.

После активации данного плагина вы сможете наводить курсор на любую картинку в интернете, и если у неё сохранены EXIF (Exchangeable Image File Format) данные, то они будут продемонстрированы прямо в контекстном окне.

Чуть больше информации предоставляет расширение для браузера Google Chrome под названием EXIF Viewer Pro , которое работает аналогично плагину Exif Viewer для браузера Firefox.

Выбираете нужную картинку, представленную на веб-странице, кликните по ней правой кнопкой мыши и в контекстном меню выберите пункт « Посмотреть EXIF ». После этого вы увидите два блока информации:

В первом информационном блоке, кроме самого фото вы увидите Image Location, Image Size и другие параметры при их наличии. Гистограмма, в свою очередь, поможет фотографам, а также тем, кто хочет им стать. Она состоит из трёх горизонтальных окон со спектральным анализом.

На сегодняшний день расширение EXIF Viewer Pro предоставляет пользователям браузера Google Chrome максимум информации об изображении еще до сохранения на компьютере, кроме того в нём предусмотрена удобная для рядового пользователя гистограмма в трех фазах. Также важно, что здесь доступен полный спектр данных EXIF, а информацию о размере изображения и его локации вы получите в любом случае.

Выводы и советы

Если вам необходимо получить максимум данных о фотографиях и картинках в онлайн режиме прямо в браузере, то обязательно используйте специализированные расширения. Согласитесь, это гораздо быстрее, чем собрать коллекцию из сотен, а то и тысяч изображений, а потом перебирать их с помощью встроенных инструментов Windows.

Также советуем пользоваться несколькими браузерами и, соответственно, несколькими плагинами для получения EXIF -данных. Таким образом, можно на лету собирать больше информации, независимо от браузера, которым пользуетесь сейчас, и не сохранять на компьютер неподходящие картинки и фото.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!

Пожалуйста, оставьте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, подписки, дизлайки, лайки!

Не удалось открыть «XYZ.jpg», так как найден неизвестный или недействительный маркер JPEG.

Кто-нибудь знает в чем проблема или есть обходной путь?

Возможно, это не файл JPEG? В Firefox вы можете щелкнуть правой кнопкой мыши изображение и просмотреть его свойства, чтобы подтвердить тип файла. Сделайте снимок экрана своего браузера (нажмите PrintScreen или используйте стороннюю программу), а затем вставьте его в пустое изображение в Photoshop. Если изображение большое, может потребоваться сшивание. Возможно, эти другие приложения обнаружили, что файл на самом деле не JPEG, а, например, PNG.

использование Irfanview Чтобы открыть изображение, если это не JPEG, Irfanview скажет вам и спросит, хотите ли вы изменить расширение на правильное.

Вы также можете сохранить его как BMP от Irfanview, он должен открыться в любом приложении.

По общему признанию это немного заумно, но откройте файл в шестнадцатеричном редакторе. В шестнадцатеричном редакторе все примеры файлов данного графического типа всегда начинаются с одинаковых символов. Если ваш файл не начинается с

это не .jpg. Измените расширение соответственно. Если это на самом деле является .jpg, то есть другая проблема.

Вот список распространенных типов файлов:

Это замечательно. Я быстро обнаружил, что фотография, которая работала онлайн как "JPEG", была фактически файлом PNG. Теперь фотошоп счастлив!

Если вы используете Windows, нет необходимости в стороннем программном обеспечении.

Щелкните правой кнопкой мыши по изображению, нажмите «Изменить», чтобы открыть его с помощью MS Paint. Когда курсор мыши находится на реальном изображении, нажмите Ctrl + S, чтобы сохранить его. Затем закройте MS Paint. Теперь вы можете открыть его с помощью Photoshop.

Насколько я знаю, это самый быстрый способ.

Кроме того, это не только Gmail, но и Яндекс.Почта и WhatsApp Web. Я предполагаю, что они не проверяют фактический формат, всегда сохраняя изображение с расширением JPG.

Маленькая картинка выглядит на 5к мониторе жутко и размазано. Я обычно употребляю слово "мыльное кинцо".

4к картинка с двойным уменьшением размера изображения в браузере, по отношению к оригинальному размеру на 5к мониторе уже выглядит вполне достойно. Но весит зачастую много и для мобильного девайса, или обычного планшета это избыточно.

Чтобы смасштабировать такое изображение до определенного размера по экрану телефона или планшета, девайс пользователя производит огромную работу и time to Interactive растёт, что играет отрицательную роль на UX, понижая продажи.

Как быть? Где золотая середина?

Предложение решения проблемы от WHATWG:

<img src="clock-demo-thumb-200.jpg" alt="Clock" srcset="clock-demo-thumb-200.jpg 200w, clock-demo-thumb-400.jpg 400w" sizes="(max-width: 600px) 200px, 50vw" /> <picture> <source media="(min-width: 1024px)" srcset="foo-large.jpg 1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" /> <source srcset="foo@2x.jpg 2x, foo.jpg 1x" /> <img src="foo.jpg" alt="Bar" /> </picture> Какие популярные (и нет) форматы изображений, используемых в web-браузерах мы знаем и в чём их преимущества и недостатки?

Предположим, что отдав пользователю google chrome webp фотографию, вместо jpeg, мы значительно сэкономим его и свои ресурсы, а также ускорим у него наш сайт. Но пользователи Edge обрадуются например jpeg xr. И как быть?

Возможный вариант решения проблемы - определять на сервере браузер пользователя по user-agent или загружать картинки через JS. Остановимся пока на этом. Углубляться в реализацию не будем. Обсудим ещё некоторые моменты, которым можно уделить внимание.

Если у пользователя простой экран 1000х1000, с невысоким PPI, на котором требуется отобразить фотографию размера 500х500. Его браузерный DPR (Device Pixel Ratio) - составляет 1. Гораздо разумнее будет отдать ему картинку размером 500x500.

1. это полностью его устроит, задействовав все возможности его дисплея

2. это сэкономит наш и его трафик

3. его девайс быстро справится с задачей масштабирования, так как её попросту можно будет пропустить, а значит изображение отобразиться максимально корректно и быстро, освободив поток документа для других задач.

Если же пользователь предпочитает более качественный монитор и его браузер имеет Device Pixel Ratio 2 и выше, то грамотно было бы отдать ему картинку шириной 500 умножить на его DPR (1000 для dpr === 2). Браузеру пользователя не потребуется "размазывать" изображение по пикселям и пользователь увидит качественную картинку.

Как определить DPR?

1. через javascript window.devicePixelRatio || 1

2. оставить это браузеру через srcset атрибут (старый браузер автоматически задействует src):

3. через заголовок DPR (имеет ограниченную поддержку браузеров)

На выходе сразу скажу что самым оптимальным на данный момент лично я считаю именно вариант с window.devicePixelRatio.

Какие проблемы нужно решить при отдаче изображения

в каком формате и с какой степенью сжатия пользователю отдать изображение?
с какой шириной должна быть картинка?
бонус - с каким приоритетом картинка должна загружаться и в какой момент?

С первыми двумя проблемами лично я справляюсь при помощи CDN. Многие CDN умеют работать с изображениями, но существуют также и специализированные CDN для изображений. Мой любимый, проверенный временем CDN для изображений это imgix. Вы можете поиграть со своими фотографиями в песочнице

With imgix you can resize and process images in real-time with with simple URL commands. Enter an…

Для работы с фотографиями я использую собственные компоненты, часто под react. На входе компонент принимает атрибут src. На выходе даёт тег <div><img /></div>. Первоначально <div> имеет фиксированную ширину, рассчитанную заранее и задний план, залитый цветом, например серым.

Тег img обязательно должен иметь width и желательно height, установленные через CSS или атрибут style. Во первых это понижает нагрузку на поток документа, а во вторых это снижает подёргивания во время первоначального рендеринга. Также хорошим тоном будет поставить alt для каждого изображения, если вам не безразличны пользователи с плохим зрением.

Первоначальный width может быть "резиновым". И уже с загрузкой javascript можно поменять его на рассчитанный.

Для вычисления height относительно width необходимо знать соотношение сторон загружаемого изображения.

Зная соотношение сторон, например 1.5, можно построить div с таким CSS для первоначального рендеринга:

Первым делом загрузим максимально сжатую, заблюреную версию изображения. Если вы будете использовать imgix, то это можно выразить например как набор параметров q=20&w=60&blur=60&auto=format,compress&cs=strip

Однако, в этом случае существует большая проблема: у всех ваших пользователей имеется в распоряжении только один сервер, но каждый из них хочет выполнить какие-то действия. Это может вызвать увеличение расхода ресурсов сервера или даже вывести ваш сервер из строя из-за огромного количества запросов.

Вторая причина, по которой вы все еще выполняете вышеуказанные действия на сервере, заключается в том, что вы просто еще не прочитали данную статью и не знаете всех возможностей современных браузеров. Не волнуйтесь! Мы откроем вам все их секреты и тайны.

Данную тему можно разделить на три части: прошлое, настоящее и будущее.

Прошлое. ActiveX

В прошлом существовало только два браузера: Netscape и IE. Однажды Microsoft решил порадовать пользователей IE и добавил невероятную для того времени функциональность, которая позволяла коду, написанному на языке JavaScript, обмениваться информацией с операционной системой Windows. Данный способ получил название ActiveX.

Описанная технология может применяться даже сегодня в последней версии браузера IE (по умолчанию, ActiveX отключен). Не будем долго останавливаться на этой теме, поскольку ActiveX актуален только для IE, и пользователю необходимо проделать много необычных действий со своим браузером для того, чтобы запустить сценарий, который содержит ActiveXObjects.

В разделе, посвященном настоящему времени, мы поговорим об API для работы с файлами и Drag-and-Drop, а также о некоторых интересных примерах.

Самая же увлекательная часть содержится в разделе о “будущем”, где будут раскрыты все секреты файловой системы в браузере. Давайте приступим к изучению возможностей браузеров.

Настоящее. Управление добавленными файлами

Существует два способа передать файл в современный браузер (IE10+):

1) Input тег с типом “file”;

2) Перетянуть файлы на какой-либо элемент DOM-модели.

Старые добрые времена с элементом Input

Первый вариант может использоваться даже в старых браузерах. Единственное отличие в том, что мы не можем получить содержимое файлов в IE9 и более ранних версий. Это означает, что для выполнения некоторых действий нам все еще необходимо использовать сервер. Чтобы получить файлы, выбранные пользователем, нам нужно добавить обработчик события “change” и проверять свойство “files” данного элемента при вызове функции-обработчика.

", data1 = document.getElementById("demo1_fileData"); document.getElementById("demo1_fileElement").addEventListener("change", function(e)< var file = this.files ? this.files[0] : < name: this.value >, fileReader = window.FileReader ? new FileReader() : null; if (file)< if (fileReader)< fileReader.addEventListener("loadend", function(e)< data1.innerHTML = tamplate.replace("<>", file.name).replace(">", file.size).replace(">", e.target.result.substring(0, 10)); >, false); fileReader.readAsText(file); > else < data.innerHTML = tamplate.replace("<>", file.name).replace(">", "Don`t know").replace(">", "This browser isn`t smart enough!"); > > >, false);Как видите, здесь мы использовали метод “readAsText” объекта “FileReader”, чтобы получить содержимое файла. У него также есть методы, которые читают файл(файлы) и возвращают результаты в различных форматах.

Будьте внимательны, используя метод “readAsBinaryString”, поскольку он не поддерживается браузером IE версий 10-11.

Возможно, вы также хотите контролировать процесс чтения файла, отобразить индикаторы прогресса или ожидания, или прервать его, если файлы слишком объемные. Специально для вас у FileReader есть такие события как onprogress, onabort, onloadstart, onloadend, onerror, а также метод abort, который останавливает процесс чтения и выдает ошибку, которая может быть обработана.

В данном примере мы немного исправили функциональность для IE9, у которого нет возможности чтения файлов. Из информации о выбранном файле (множественный выбор не поддерживается) мы можем получить только его имя, которое хранится в свойстве “value” элемента input.

Перетащи меня в браузер!

Это был старый способ добавления файлов в браузер. Он мог использоваться даже в IE6 (addEventListener поддерживается в IE9+), с некоторыми изменениями. В современных браузерах (IE10+) существует другой способ добавления файлов. Все, что нужно сделать, это повесить обработчик события “drop” на любой элемент веб-страницы. Это может быть как специальный элемент с текстом внутри, так и просто body. После этого пользователь может перетащить какой-либо файл в элемент, на котором висит обработчик события “drop”. Выбранный файл можно найти в свойстве “dataTransfer” объекта события. Давайте посмотрим на демо:

Несколько важных замечаний по этому демо:

1) Прежде всего, вам не стоит проверять, поддерживает ли ваш браузер событие “ondrop”, поскольку используется IE9. Он поддерживает данное событие, но не имеет свойства dataTransfer.

2) Если вы хотите поймать событие “ondrop”, вам необходимо добавить обработчик события “ondragover” и вызвать функцию preventDefault. По умолчанию, браузер попытается загрузить этот файл или отобразить его на странице (если это рисунок или PDF файл), и вам нужно его остановить.

Поддержка старых версий браузеров: в таких браузерах, как IE9, вы можете поместить элемент input из предыдущих примеров на текущем элементе, растянуть его, установить для него прозрачность равную 100%, и изменить текст на следующий: “Кликните и выберите файл”. Когда пользователь кликнет на этот элемент, он увидит обычный диалог для выбора файлов. Подобное решение подходит также для планшетов и телефонов, у которых нет возможности разделить экраны и перетягивать элементы между ними.

Перетащи меня из браузера!

Предыдущий пример мог вызвать следующий вопрос о функциональности drag-and-drop: “Можем ли мы перетащить файлы из браузера на компьютер?” Ответ будет “Да”, но работает это только в браузере Chrome. Тем не менее, это отличная функция для вашей веб страницы, и мы должны ее испробовать. В следующем примере вам нужно перетянуть картинку в формате PDF на свой компьютер, и она будет сохранена как PDF файл.

Перетащите эту картинку из браузера на ваш рабочий стол

Как уже было сказано, перетащить файл можно только из браузера Chrome. Однако, проблемой это не является, поскольку это не основная функциональность вашего веб-приложения, а просто отличное дополнение для пользователей Chrome, которая может быть благополучно заменена обычной ссылкой для загрузки нужного файла.

“Все течет, все изменяется … и … дважды в одну и ту же реку войти невозможно”. (Гераклит)

Теперь мы можем получить файлы и их содержимое в формате JavaScript. Но что мы можем с ними делать? Как мы можем их изменить? Вот в чем вопрос.

Прежде всего, мы можем работать с текстом. Когда мы прочитаем файл как текстовую строку, мы получим все его текстовое содержимое и сможем его парсить. Например, пользователь может перетянуть новый CSS файл, и вы сможете сразу применить его на своей странице. Или, если это файл со статьей, которую нужно опубликовать, вы можете его прочитать, применить какие-либо стили к заголовкам и поместить его в текстовый редактор на вашей странице.

Примером также может быть парсинг файла в формате excel. Вам не нужно посылать его на сервер, конвертировать в JSON и отправлять обратно. Это можно сделать на клиентской стороне, не тратя времени на запрос и ожидание ответа сервера. Уже есть библиотеки для парсинга xls и xlsx файлов, которые вы можете найти здесь: XLS и XLSX.

Еще один способ использования файлов и их содержимого в JavaScript – это работа с двоичными данными. Это могут быть рисунки, видео или какие-либо другие файлы. Если мы хотим обрабатывать двоичные данные, нам нужно использовать новые свойства JavaScript, такие как объект Blob и типизированные массивы. Мы не будем углубляться в эту тему, потому что она слишком большая и заслуживает отдельной статьи.

Объект Blob – это объект, который выглядит, как обычный файл на JavaScript, и содержит необработанные данные. Конструктор такого объекта принимает два параметра – данные и объект с его опциями. В состав данных могут входить ArrayBuffer, типизированный массив, объект Blob или строки. Это все те данные, которые будут храниться в новом объекте Blob. Опции включают в себя тип данных.

У каждого объекта Blob есть тип и свойства, которые задают его размеры, а также метод “slice”. Все данные, которые содержатся в данном объекте Blob, можно разделить с помощью метода “slice”. Этот метод возвращает новый объект Blob, который содержит в себе отделенную часть данных.

Типизированные массивы и буферы используются для хранения двоичных данных фиксированной длины и определенного типа (Int8Array или Int32Array).

Все это позволяет нам делать занимательные вещи на клиентской стороне, например, сжимать файлы. Эта библиотека позволяет применить алгоритм Deflate ко всем выбранным файлам, и собрать их в один zip файл. Кроме того, она использует Web Workers, чтобы описанный процесс протекал в фоновом режиме.

Еще один пример обработки файла, содержащего двоичные данные, это PDF.js. Это проект, который находится в открытом доступе и используется для отображения на веб-странице документов в формате PDF. Все, что вам нужно сделать, это передать ему массив двоичных данных, и он отрисует содержимое PDF-документа на странице.

Будущее. Создайте свою файловую систему с блэкджеком и… всеми причитающимися атрибутами

Теперь мы знаем, как получать файлы и изменять их. Настало время раскрыть секрет хранения файлов. Да-да, речь идет именно о создании и хранении папок и файлов внутри браузера.

Во время написания этой статьи данная функциональность поддерживалась только браузерами Chrome и Opera. Опять-таки, это не такая уж важная проблема, поскольку данная возможность может использоваться как дополнительный инструмент для кэширования файлов в вашем браузере. Давайте более детально рассмотрим ее API.

Прежде всего, нам нужно запросить объект файловой системы с помощью метода webkitRequestFileSystem . Он принимает 4 параметра: тип, размер, функция, которая будет вызвана в случае успешной обработки запроса, и функция, которая будет вызвана при возникновении ошибки.

В браузере имеются два типа файловой системы: временная и постоянная. Первая может быть создана без запроса разрешения пользователя. Вы просто ее создаете и затем используете. Однако, если ваш браузер столкнется с какой-либо проблемой, как, например, недостаток памяти, он удалит все хранящиеся в нем данные. Поэтому данный тип хранения информации может быть использован только для кэширования данных, которые можно восстановить.

Еще один тип файловой системы – постоянный. Браузер никогда не удалит файлы, хранящиеся в ней. Тем не менее, если вы запросите данный тип файловой системы без разрешения пользователя, она не будет работать.

Для того, чтобы запросить разрешение пользователя на использование постоянного хранилища, нам нужно вызвать метод navigator.webkitPersistentStorage.requestQuota .

Константы обоих типов файловых систем хранятся в объекте window: window.TEMPORARY или window.PERSISTENT . Второй параметр – это нужный нам размер хранилища в байтах.

Теперь мы можем создать наше первое хранилище вместимостью 1Гб:

Временная файловая система:

Постоянная файловая система:

Как видите, мы используем много обработчиков ошибок, которые должны отлавливать ошибки, связанные с созданием хранилищ. Объект FileError содержит полный список типов ошибок:

Итак, теперь у нас есть доступ к хранилищу, и мы можем создать нашу первую папку и файл, и сохранить их. После того, как запрос на использование постоянного хранилища (так же, как и в случае с временным) одобрен, мы получаем объект файловой системы в качестве первого аргумента функции, возвращаемой при успешном выполнении запроса.

Данный объект имеет интерфейс следующего вида:

Как видите, для создания, перемещения, удаления и получения файлов и директорий используются специальные методы. Полученный нами объект “fs” ссылается на корневой каталог файловой системы браузера.

Данный каталог и все другие каталоги, которые мы будем создавать, представлены интерфейсом DirectoryEntry. Все файлы данной файловой системы представлены интерфейсом FileEntry. Мы будем использовать методы getFile и getDirectory для того, чтобы создать файлы и папки и получить их.

Первый параметр данных методов – это файл или путь к нему. Этот путь может быть как абсолютным, так и относительным. Второй параметр – это объект с действиями, которые выполняются в случае, если в указанной директории файл отсутствует. Данный параметр может иметь свойства “create” и “exclusive”.

Если свойству “create” задано значение “true”, будет создан новый файл или директория, а старый файл будет переписан. Если же мы для данного свойства зададим значение “false”, методы вернут объект FileEntry или выдадут ошибку, если файла не существует. Если задано свойство “exclusive” со значением “true”, файлы не будут переписаны.

Для того, чтобы различить файлы и папки, у каждого из двух интерфейсов есть флаги: isDirectory и isFile. Кроме того, существует специальный класс FileWriter, который служит для добавления содержимого в файл. Его необходимо запрашивать у браузера для каждого файла, который нужно изменить. Давайте добавим несколько файлов:

После этого вы увидите опцию “FileSystem” на вкладке “Resources” раздела DevTool. Здесь отображаются все созданные файлы и хранилища.

Данные файлы мы также можем получить по специальному внутреннему URL браузера, который может быть установлен в качестве атрибута “src” тега IMG. Он начинается с слова “filesystem:” и выглядит вот так: “filesystem:/persistent/files/newFile.txt”.

Чтобы получить URL, мы использовали метод “toURL”. Теперь у нас есть вся необходимая информация для того, чтобы создать веб-приложение для кэширования аудио и видео файлов, которое позволяет слушать и смотреть их без подключения к интернету. Прежде всего, загрузим двоичный файл. Затем, мы сохраним его в постоянном хранилище и запустим.

Сохраните песню, отключите Интернет и наслаждайтесь музыкой))

Сохранить в браузер (может занять некоторое время)ИгратьУдалить песню из браузера

Читайте также: