Что такое blob
Объект Blob представляет из себя подобный файлу объект с неизменяемыми, необработанными данными; они могут читаться как текст или двоичные данные, либо могут быть преобразованы в ReadableStream (en-US), таким образом, его методы могут быть использованы для обработки данных.
Blob-ы могут представлять данные, которые не обязательно должны быть в родном для JavaScript формате. Интерфейс File основан на Blob , наследует функциональность Blob и расширяет его для поддержки файлов на стороне пользователя.
Использование Blob
Для создания Blob не из объектов и данных blob, используйте конструктор Blob() . Чтобы создать blob из подмножества данных из другого blob, используйте метод slice() . Чтобы получить объект Blob для файла на файловой системе пользователя, смотрите документацию на File .
API, принимающие объекты Blob , также перечислены в документации на File .
Примечание: Метод slice() имеет изначально задаваемую длину как второй аргумент, что используется для указания числа байт копируемых в новый Blob. Если указать такие параметры start + length , которые превышают размер исходного Blob , то возвращаемый Blob будет содержать данные от начального индекса (start index) до конца исходного Blob.
Конструктор
Свойства
Методы
Примеры
Создание Blob
Конструктор Blob() constructor может создавать объекты blob из других объектов. Например, чтобы сконструировать blob из строки JSON:
До того как конструктор Blob стал доступен, это могло быть выполнено через устаревший API BlobBuilder (en-US):
Создание URL для содержимого типизированного массива
Следующий код создаёт типизированный массив JavaScript и создаёт новый Blob , содержащий данные типизированного массива. Затем вызывается URL.createObjectURL() для преобразования blob в URL.
JavaScript
Основной частью этого кода для примера является функция typedArrayToURL() , которая создаёт Blob из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута src элементов <img> (конечно, при условии, что данные содержат изображение).
Другой пример
Извлечение данных из Blob
Один из способов прочесть содержимое Blob – это использовать FileReader . Следующий код читает содержимое Blob как типизированный массив.
Другой способ прочитать содержимое из Blob – это использовать Response . Следующий код читает содержимое Blob как текст:
Используя другие методы FileReader , возможно прочесть содержимое объекта Blob как строку или как URL.
Спецификации
| Specification |
|---|
| File API # blob-section |
Браузерная совместимость
BCD tables only load in the browser
Замечания Gecko: доступность в привилегированном коде
Для использования в коде chrome, JSM и Bootstrap scope, вы должны импортировать его следующим образом:
Что такое blob
ArrayBuffer и бинарные массивы являются частью ECMA-стандарта и, соответственно, частью JavaScript.
Кроме того, в браузере имеются дополнительные высокоуровневые объекты, описанные в File API.
Объект Blob состоит из необязательной строки type (обычно MIME-тип) и blobParts – последовательности других объектов Blob , строк и BufferSource .
Благодаря type мы можем загружать и скачивать Blob-объекты, где type естественно становится Content-Type в сетевых запросах.
Конструктор имеет следующий синтаксис:
- blobParts – массив значений Blob / BufferSource / String .
- options – необязательный объект с дополнительными настройками:
- type – тип объекта, обычно MIME-тип, например. image/png ,
- endings – если указан, то окончания строк создаваемого Blob будут изменены в соответствии с текущей операционной системой ( \r\n или \n ). По умолчанию "transparent" (ничего не делать), но также может быть "native" (изменять).
Мы можем получить срез Blob, используя:
- byteStart – стартовая позиция байта, по умолчанию 0.
- byteEnd – последний байт, по умолчанию до конца.
- contentType – тип type создаваемого Blob-объекта, по умолчанию такой же, как и исходный.
Аргументы – как в array.slice , отрицательные числа также разрешены.
Мы не можем изменять данные напрямую в Blob, но мы можем делать срезы и создавать новый Blob на их основе, объединять несколько объектов в новый и так далее.
Это поведение аналогично JavaScript-строке: мы не можем изменить символы в строке, но мы можем создать новую исправленную строку на базе имеющейся.
Blob как URL
Blob может быть использован как URL для <a> , <img> или других тегов, для показа содержимого.
Давайте начнём с простого примера. При клике на ссылку мы загружаем динамически генерируемый Blob с hello world содержимым как файл:
Мы также можем создать ссылку динамически, используя только JavaScript, и эмулировать на ней клик, используя link.click() , тогда загрузка начнётся автоматически.
Далее простой пример создания «на лету» и загрузки Blob-объекта, без использования HTML:
URL.createObjectURL берёт Blob и создаёт уникальный URL для него в формате blob:<origin>/<uuid> .
Вот как выглядит сгенерированный URL:
Браузер для каждого URL, сгенерированного через URL.createObjectURL , сохраняет внутреннее соответствие URL → Blob . Таким образом, такие URL короткие, но дают доступ к большому объекту Blob .
Сгенерированный url действителен, только пока текущий документ открыт. Это позволяет ссылаться на сгенерированный в нём Blob в <img> , <a> или в любом другом объекте, где ожидается url в качестве одного из параметров.
В данном случае возможен побочный эффект. Пока в карте соответствия существует ссылка на Blob, он находится в памяти. Браузер не может освободить память, занятую Blob-объектом.
Ссылка в карте соответствия автоматически удаляется при выгрузке документа, после этого также освобождается память. Но если приложение имеет длительный жизненный цикл, это может произойти не скоро. Таким образом, если мы создадим URL для Blob, он будет висеть в памяти, даже если в нём нет больше необходимости.
URL.revokeObjectURL(url) удаляет внутреннюю ссылку на объект, что позволяет удалить его (если нет другой ссылки) сборщику мусора, и память будет освобождена.
В последнем примере мы использовали Blob только единожды, для мгновенной загрузки, после мы сразу же вызвали URL.revokeObjectURL(link.href) .
В предыдущем примере с кликабельной HTML-ссылкой мы не вызывали URL.revokeObjectURL(link.href) , потому что это сделало бы ссылку недействительной. После удаления внутренней ссылки на Blob , URL больше не будет работать.
Blob to base64
Альтернатива URL.createObjectURL – конвертация Blob-объекта в строку с кодировкой base64.
Эта кодировка представляет двоичные данные в виде строки с безопасными для чтения символами в ASCII-кодах от 0 до 64. И что более важно – мы можем использовать эту кодировку для «data-urls».
data url имеет форму data:[<mediatype>][;base64],<data> . Мы можем использовать такой url где угодно наряду с «обычным» url.
Браузер декодирует строку и показывает смайлик:
Для трансформации Blob в base64 мы будем использовать встроенный в браузер объект типа FileReader . Он может читать данные из Blob в множестве форматов. В следующей главе мы рассмотрим это более глубоко.
Вот пример загрузки Blob при помощи base64:
Оба варианта могут быть использованы для создания URL с Blob. Но обычно URL.createObjectURL(blob) является более быстрым и безопасным.
- Нужно отзывать объект для освобождения памяти.
- Прямой доступ к Blob, без «кодирования/декодирования».
- Нет необходимости что-либо отзывать.
- Потеря производительности и памяти при декодировании больших Blob-объектов.
Изображение в Blob
Мы можем создать Blob для изображения, части изображения или даже создать скриншот страницы. Что удобно для последующей загрузки куда-либо.
Операции с изображениями выполняются через элемент <canvas> :
- Для отрисовки изображения (или его части) на холсте (canvas) используется canvas.drawImage.
- Вызов canvas-метода .toBlob(callback, format, quality) создаёт Blob и вызывает функцию callback при завершении.
В примере ниже изображение просто копируется, но мы можем взять его часть или трансформировать его на canvas перед созданием Blob:
Или если вы предпочитаете async/await вместо колбэка:
Для создания скриншота страницы мы можем использовать такую библиотеку, как https://github.com/niklasvh/html2canvas. Всё, что она делает, это просто проходит страницу и отрисовывает её в <canvas> . После этого мы может получить Blob одним из вышеуказанных способов.
Из Blob в ArrayBuffer
Конструктор Blob позволяет создать Blob-объект практически из чего угодно, включая BufferSource .
Но если нам нужна производительная низкоуровневая обработка, мы можем использовать ArrayBuffer из FileReader :
Итого
В то время как ArrayBuffer , Uint8Array и другие BufferSource являются «бинарными данными», Blob представляет собой «бинарные данные с типом».
Это делает Blob удобным для операций загрузки/выгрузки данных, которые так часто используются в браузере.
Методы, которые выполняют сетевые запросы, такие как XMLHttpRequest, fetch и подобные, могут изначально работать с Blob так же, как и с другими объектами, представляющими двоичные данные.
Мы можем легко конвертировать Blob в низкоуровневые бинарные типы данных и обратно:
Почти бессмертное существо завелось в Париже. Оно бесконечно размножается и лечит раны за минуты
В Парижском зоопарке поселился загадочный слизевик — гигантское одноклеточное создание. Он похож на гриб, но двигается как животное. Этот живой организм имеет 720 полов и безостановочно размножается. Наверное, если он будет размножаться достаточно долго, то сможет захватить мир.
Парижский зоопарк продемонстрирует посетителям уникальный одноклеточный организм — слизевика, названного blob, то есть «сгусток» или «капля». Имя загадочному существу выбрали в честь инопланетной формы жизни, поглощающей все на своем пути, из одноименного фильма ужасов 1958 года. Слизевик не имеет рта, но находит, поглощает и переваривает пищу. А еще он способен передвигаться — правда, не слишком быстро — со скоростью, примерно, сантиметр в час.
В хороших условиях blob растет очень быстро, ежедневно удваиваясь и достигая 30 сантиметров в диаметре. Его цвет тоже может меняться: он может быть красным, белым, розовым, хотя чаще всего встречаются ярко-желтые. Проблем с размножением у слизевика тоже нет, каким бы невероятным это ни казалось, организм, пишет Reuters, имеет сразу 720 полов.
Вlob — вообще практически бессмертный. Если его разрезать пополам, он исцелит пораненные части за несколько минут. Опасность для него представляют лишь яркий свет и засуха. Но и то при возвращении благоприятных для его роста условий слизевик снова просыпается. Не организм, а супермен.
Основными «достижениями» слизевика исследователи называют бессмертие и отсутствие мозга (хотя это сомнительный повод для гордости). В мире насчитается около тысячи видов организма, большинство из которых свободоживущие. Часть все-таки ведет паразитический образ жизни.
К слизевикам относят три группы, одна из которых наиболее интересная — миксомицеты. Существует слизевик с красивым названием Physarum polycephalum — этот организм способен самостоятельно учиться и даже передавать знания соплеменникам. Например, эти слизевики научились не бояться соли и этим навыкам могут научить других миксомицетов, просто сливаясь с ними.
Источник фото: Flickr / Ars Electronica/слизевики в колбе
Эксперимент с организмами провели в 2017 году. Ученые заставили две тысячи миксомицетов пересечь мостик, покрытый солью, чтобы добраться до пищи. В то же время другие две тысячи «блобов» выполняли ту же задачу, но уже по чистому мостику. Затем исследователи сформировали пары этих организмов. В каких-то случаях был «опытный» и «неопытный» слизевики, в других — два наученных или два ненаученных. После этого ученые снова провели этот эксперимент, пустив организмы по мостику. Оказалось, что миксомицеты из смешанной группы двигались так же быстро, как и «опытные», и намного быстрее «неопытных», будто уже знали, что соль для них опасна.
«Blob — это живое существо, которое принадлежит к одной из тайн природы. Это удивляет нас, потому что у него нет мозга, но он способен учиться. И если вы объедините два пятна, то тот, кто узнал, передаст свое знание другому. Мы точно знаем, что это не растение, но мы не знаем, является ли это животным или грибом», — заявил директор парижского Музея естественной истории Бруно Давид.
Впервые слизевика обнаружила в 1973 году жительница Далласа Мэри Харрис. Однажды утром дама нашла в саду «пенистую, сливочную и бледно-желтую, похожую на омлет, массу, размером не больше печенья». Беспокоиться она не стала, подумав, что это такой странный гриб.
Всего через две недели Мэри заметила, что масса угрожающе увеличилась в размерах. С помощью граблей женщина разбросала ошметки пришельца по участку, но «пенистый омлет» продолжил расти. После этого со слизевиком пытался разобраться супруг Мэри, затем полицейские. Усилия оказались тщетны, незваный гость исчезать не собирался. Но однажды blob исчез так же внезапно, как и появился, оставив пару в уверенности, что их посетил гость с другой планеты.