JavaScript: Blob
Прочел подраздел 2.3 «Blob» третьей части учебника по JavaScript.
Для меня эта статья оказалась настолько объемной в плане нового, что ее разбор вылился в целый ряд постов:
1. Браузер: настройка загрузки файлов
2. Капля: от фантастического ужаса до программирования
3. HTML: новые и старые особенности работы со ссылкой
4. Как работает кодирование Base64
5. Как работает кодирование Base64, окончание
6. Сказка про двоичные данные, кодировку Windows-1251 и Юникод
Blob - это встроенный объект в языке JavaScript. Он представляет кусок двоичных данных с типом. С его помощью мы имеем доступ к двоичному содержимому любого файла. Можем в скрипте формировать файлы, а затем заставлять браузер запускать загрузку этого файла на компьютер пользователя.
Кроме изложенного в предыдущих постах для понимания этого подраздела потребуется знакомство с еще несколькими понятиями дополнительно.
То, что URL - это строка, определяющая адрес ресурса (файла) в интернете, я уже знаю довольно давно. Для работы с этой строкой в скриптах на языке JavaScript был создан веб-API (объект, содержащий набор функций, переменных и констант для определенной работы), который тоже назвали «URL». В обсуждаемом подразделе учебника используется этот веб-API «URL».
https://developer.mozilla.org/en-US/docs/Web/API/URL
В подразделе рассматриваются два способа работы с куском двоичных данных, используя веб-API «URL» и встроенный объект FileReader. При работе первым способом созданный кусок двоичных данных с типом сохраняется в памяти компьютера пользователя, как отдельный файл. Для доступа к нему используется адрес URL, начинающийся на «blob:». Для идентификации куска двоичных данных в памяти компьютера пользователя используется так называемый UUID. UUID - это стандарт идентификации, а также, собственно, сам уникальный идентификатор. Этот стандарт позволяет создавать идентификаторы, которые будут гарантированно уникальны, даже если их будут создавать разные программы, действующие абсолютно независимо друг от друга (конечно, если эти программы используют данный стандарт).
https://ru.wikipedia.org/wiki/UUID
При работе вторым способом созданный кусок двоичных данных с типом помещается не в память компьютера пользователя, а в сам текст (строку) адреса URL. Такой адрес URL начинается с «data:», еще такие адреса называют «Data URL». При этом кусок двоичных данных трансформируется в текст (так как он должен храниться в тексте адреса URL) с помощью кодирования Base64 (я его разбирал в двух постах, см. ссылки выше).
Пример текста (строки) адреса URL при работе первым способом:
blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
Здесь 1e67e00e-860d-40a5-89ae-6ab0cbee6273 - это универсальный идентификатор стандарта UUID. Сам он не содержит данных, а является лишь идентификатором, связанным с данными, хранящимися в памяти компьютера пользователя. Один и тот же скрипт при разных запусках HTML-страницы, содержащей его, формирует разные UUID. То есть при каждом обновлении такой HTML-страницы идентификатор UUID тоже будет меняться. Это можно увидеть на практике, взяв код примера с этим способом из обсуждаемого подраздела учебника.
Пример текста (строки) адреса URL при работе вторым способом:
data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7
В этом случае данные содержатся именно в этом URL. Вот эти данные:
R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7
При этом способе браузеру придется для использования этих данных (загрузки на компьютер пользователя) сначала раскодировать их, так как они закодированы способом Base64.
Каждый из этих двух способов имеет свои плюсы и минусы, они отмечены в подразделе учебника. Конечно, первый способ является предпочтительным.
Еще в обсуждаемом подразделе учебника рассмотрен способ создания в скрипте изображений с помощью HTML-элемента canvas (по-русски «холст») и загрузки их на компьютер пользователя одним из вышеописанных двух способов. По идее, используя это, можно создать простой графический редактор онлайн.
Для меня эта статья оказалась настолько объемной в плане нового, что ее разбор вылился в целый ряд постов:
1. Браузер: настройка загрузки файлов
2. Капля: от фантастического ужаса до программирования
3. HTML: новые и старые особенности работы со ссылкой
4. Как работает кодирование Base64
5. Как работает кодирование Base64, окончание
6. Сказка про двоичные данные, кодировку Windows-1251 и Юникод
Blob - это встроенный объект в языке JavaScript. Он представляет кусок двоичных данных с типом. С его помощью мы имеем доступ к двоичному содержимому любого файла. Можем в скрипте формировать файлы, а затем заставлять браузер запускать загрузку этого файла на компьютер пользователя.
Кроме изложенного в предыдущих постах для понимания этого подраздела потребуется знакомство с еще несколькими понятиями дополнительно.
То, что URL - это строка, определяющая адрес ресурса (файла) в интернете, я уже знаю довольно давно. Для работы с этой строкой в скриптах на языке JavaScript был создан веб-API (объект, содержащий набор функций, переменных и констант для определенной работы), который тоже назвали «URL». В обсуждаемом подразделе учебника используется этот веб-API «URL».
https://developer.mozilla.org/en-US/docs/Web/API/URL
В подразделе рассматриваются два способа работы с куском двоичных данных, используя веб-API «URL» и встроенный объект FileReader. При работе первым способом созданный кусок двоичных данных с типом сохраняется в памяти компьютера пользователя, как отдельный файл. Для доступа к нему используется адрес URL, начинающийся на «blob:». Для идентификации куска двоичных данных в памяти компьютера пользователя используется так называемый UUID. UUID - это стандарт идентификации, а также, собственно, сам уникальный идентификатор. Этот стандарт позволяет создавать идентификаторы, которые будут гарантированно уникальны, даже если их будут создавать разные программы, действующие абсолютно независимо друг от друга (конечно, если эти программы используют данный стандарт).
https://ru.wikipedia.org/wiki/UUID
При работе вторым способом созданный кусок двоичных данных с типом помещается не в память компьютера пользователя, а в сам текст (строку) адреса URL. Такой адрес URL начинается с «data:», еще такие адреса называют «Data URL». При этом кусок двоичных данных трансформируется в текст (так как он должен храниться в тексте адреса URL) с помощью кодирования Base64 (я его разбирал в двух постах, см. ссылки выше).
Пример текста (строки) адреса URL при работе первым способом:
blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
Здесь 1e67e00e-860d-40a5-89ae-6ab0cbee6273 - это универсальный идентификатор стандарта UUID. Сам он не содержит данных, а является лишь идентификатором, связанным с данными, хранящимися в памяти компьютера пользователя. Один и тот же скрипт при разных запусках HTML-страницы, содержащей его, формирует разные UUID. То есть при каждом обновлении такой HTML-страницы идентификатор UUID тоже будет меняться. Это можно увидеть на практике, взяв код примера с этим способом из обсуждаемого подраздела учебника.
Пример текста (строки) адреса URL при работе вторым способом:
data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7
В этом случае данные содержатся именно в этом URL. Вот эти данные:
R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7
При этом способе браузеру придется для использования этих данных (загрузки на компьютер пользователя) сначала раскодировать их, так как они закодированы способом Base64.
Каждый из этих двух способов имеет свои плюсы и минусы, они отмечены в подразделе учебника. Конечно, первый способ является предпочтительным.
Еще в обсуждаемом подразделе учебника рассмотрен способ создания в скрипте изображений с помощью HTML-элемента canvas (по-русски «холст») и загрузки их на компьютер пользователя одним из вышеописанных двух способов. По идее, используя это, можно создать простой графический редактор онлайн.