Что такое blob
Аббревиатура BLOB расшифровывается как Binary Large Object или большой бинарный объект. Данное понятие относится к СУБД. Создавая базу данных Вы можете использовать поля некоторых типов, например текстовые, числовые разных форматов, данных. Но все равно есть проблема, так как ваши данные могут быть нестандартного формата или еще хуже не иметь формата вообще. Пример файлы. Просто подумайте о том, что Вы хотите хранить в базе данных все файлы Вашей организации. В них может находиться все, что угодно, от рисунков и текстов до объектов OLE. Практически все современные СУБД имеют этот формат данных, если это не так, то просто не используйте ее. Так, как о формате ничего не известно, то по данному полю нельзя проводить сортировку, поиск. Для реализации данной возможности в записи используются дополнительные поля с информацией. Например, имя, тип, размер, дата файла. А вот в типе BLOB хранится сам файл. В некоторых СУБД данный тип поля может называться по другому. В Access, например, OLE, что ограничивает типы файлов, которые могут быть помещены.
Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Каев Артем — 11.05.2002
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.
Примечание: Следует помнить ,что метод slice() имеет сторонние префиксы в некоторых браузерах: blob.mozSlice() для Firefox 12 и ранее, так же blob.webkitSlice() в Safari. Старая версия метода slice() , без сторонних приставок, имеет другой алгоритм и устарела. Поддержка blob.mozSlice() была убрана в Firefox 30.
Конструктор
Возвращает создаваемый объект Blob, который содержит соединение всех данных в массиве, переданном в конструктор.
Свойства
Blob.isClosed Только для чтения Экспериментальная возможность
Логическое значение, показывающее, вызывался ли метод Blob.close() у blob. Закрытый blob не может быть прочитан.
Размер данных, содержащихся в объекте Blob , в байтах.
Строка с MIME-типом данных, содержащихся в Blob . Если тип неизвестен, строка пуста.
Методы
Blob.close() Экспериментальная возможность
Закрывает Blob объект, по возможности освобождая занятые им ресурсы.
Возвращает новый Blob объект, содержащий данные в указанном диапазоне байтов исходного Blob .
Возвращает ReadableStream (en-US), который может использоваться для чтения содержимого Blob .
Возвращает promise, который исполняется с USVString , содержащей всё содержимое Blob , интерпретируемое как текст UTF-8.
Примеры
Создание Blob
Конструктор Blob() constructor может создавать объекты blob из других объектов. Например, чтобы сконструировать blob из строки JSON:
const obj = hello: "world" >; const blob = new Blob([JSON.stringify(obj, null, 2)], type: "application/json", >);
Предупреждение: До того как конструктор Blob стал доступен, это могло быть выполнено через устаревший API BlobBuilder (en-US):
var builder = new BlobBuilder(); var fileParts = ['hey!']; builder.append(fileParts[0]); var myBlob = builder.getBlob("text/xml");
Создание URL для содержимого типизированного массива
Следующий код создаёт типизированный массив JavaScript и создаёт новый Blob , содержащий данные типизированного массива. Затем вызывается URL.createObjectURL() для преобразования blob в URL.
HTML
p> This example creates a typed array containing the ASCII codes for the space character through the letter Z, then converts it to an object URL. A link to open that object URL is created. Click the link to see the decoded object URL. p>
JavaScript
Основной частью этого кода для примера является функция typedArrayToURL() , которая создаёт Blob из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута src элементов (конечно, при условии, что данные содержат изображение).
function typedArrayToURL(typedArray, mimeType) return URL.createObjectURL(new Blob([typedArray.buffer], type: mimeType >)); > const bytes = new Uint8Array(59); for (let i = 0; i 59; i++) bytes[i] = 32 + i; > const url = typedArrayToURL(bytes, "text/plain"); const link = document.createElement("a"); link.href = url; link.innerText = "Open the array URL"; document.body.appendChild(link);
Другой пример
var typedArray = GetTheTypedArraySomehow(); var blob = new Blob([typedArray], type: "application/octet-binary" >); // pass a useful mime type here var url = URL.createObjectURL(blob); // url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf // now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
Извлечение данных из Blob
Один из способов прочесть содержимое Blob – это использовать FileReader . Следующий код читает содержимое Blob как типизированный массив.
var reader = new FileReader(); reader.addEventListener("loadend", function () // reader.result contains the contents of blob as a typed array >); reader.readAsArrayBuffer(blob);
Другой способ прочитать содержимое из Blob – это использовать Response . Следующий код читает содержимое Blob как текст:
const text = await new Response(blob).text();
const text = await blob.text();
Используя другие методы FileReader , возможно прочесть содержимое объекта Blob как строку или как URL.
Спецификации
Specification |
---|
File API # blob-section |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- BlobBuilder (en-US)
- FileReader
- File
- URL.createObjectURL
- Components.utils.importGlobalProperties
- Использование файлов в веб-приложениях
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Blob
ArrayBuffer и бинарные массивы являются частью ECMA-стандарта и, соответственно, частью JavaScript.
Кроме того, в браузере имеются дополнительные высокоуровневые объекты, описанные в File API.
Объект Blob состоит из необязательной строки type (обычно MIME-тип) и blobParts – последовательности других объектов Blob , строк и BufferSource .
Благодаря type мы можем загружать и скачивать Blob-объекты, где type естественно становится Content-Type в сетевых запросах.
Конструктор имеет следующий синтаксис:
new Blob(blobParts, options);
- blobParts – массив значений Blob / BufferSource / String .
- options – необязательный объект с дополнительными настройками:
- type – тип объекта, обычно MIME-тип, например. image/png ,
- endings – если указан, то окончания строк создаваемого Blob будут изменены в соответствии с текущей операционной системой ( \r\n или \n ). По умолчанию «transparent» (ничего не делать), но также может быть «native» (изменять).
// создадим Blob из строки let blob = new Blob(["…"], ); // обратите внимание: первый аргумент должен быть массивом [. ]
// создадим Blob из типизированного массива и строк let hello = new Uint8Array([72, 101, 108, 108, 111]); // "hello" в бинарной форме let blob = new Blob([hello, ' ', 'world'], );
Мы можем получить срез Blob, используя:
blob.slice([byteStart], [byteEnd], [contentType]);
- byteStart – стартовая позиция байта, по умолчанию 0.
- byteEnd – последний байт, по умолчанию до конца.
- contentType – тип type создаваемого Blob-объекта, по умолчанию такой же, как и исходный.
Аргументы – как в array.slice , отрицательные числа также разрешены.
Blob не изменяем (immutable)
Мы не можем изменять данные напрямую в Blob, но мы можем делать срезы и создавать новый Blob на их основе, объединять несколько объектов в новый и так далее.
Это поведение аналогично JavaScript-строке: мы не можем изменить символы в строке, но мы можем создать новую исправленную строку на базе имеющейся.
Blob как URL
Давайте начнём с простого примера. При клике на ссылку мы загружаем динамически генерируемый Blob с hello world содержимым как файл:
); link.href = URL.createObjectURL(blob);
Мы также можем создать ссылку динамически, используя только JavaScript, и эмулировать на ней клик, используя link.click() , тогда загрузка начнётся автоматически.
Далее простой пример создания «на лету» и загрузки Blob-объекта, без использования HTML:
let link = document.createElement('a'); link.download = 'hello.txt'; let blob = new Blob(['Hello, world!'], ); link.href = URL.createObjectURL(blob); link.click(); URL.revokeObjectURL(link.href);
URL.createObjectURL берёт Blob и создаёт уникальный URL для него в формате blob:/ .
Вот как выглядит сгенерированный URL:
blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273
Браузер для каждого URL, сгенерированного через URL.createObjectURL , сохраняет внутреннее соответствие URL → Blob . Таким образом, такие URL короткие, но дают доступ к большому объекту Blob .
Сгенерированный url действителен, только пока текущий документ открыт. Это позволяет ссылаться на сгенерированный в нём Blob в , или в любом другом объекте, где ожидается 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:[][;base64], . Мы можем использовать такой url где угодно наряду с «обычным» url.
Браузер декодирует строку и показывает смайлик:
Для трансформации Blob в base64 мы будем использовать встроенный в браузер объект типа FileReader . Он может читать данные из Blob в множестве форматов. В следующей главе мы рассмотрим это более глубоко.
Вот пример загрузки Blob при помощи base64:
let link = document.createElement('a'); link.download = 'hello.txt'; let blob = new Blob(['Hello, world!'], ); let reader = new FileReader(); reader.readAsDataURL(blob); // конвертирует Blob в base64 и вызывает onload reader.onload = function() < link.href = reader.result; // url с данными link.click(); >;
Оба варианта могут быть использованы для создания URL с Blob. Но обычно URL.createObjectURL(blob) является более быстрым и безопасным.
URL.createObjectURL(blob)
- Нужно отзывать объект для освобождения памяти.
- Прямой доступ к Blob, без «кодирования/декодирования».
Blob to data url
- Нет необходимости что-либо отзывать.
- Потеря производительности и памяти при декодировании больших Blob-объектов.
Изображение в Blob
Мы можем создать Blob для изображения, части изображения или даже создать скриншот страницы. Что удобно для последующей загрузки куда-либо.
Операции с изображениями выполняются через элемент :
- Для отрисовки изображения (или его части) на холсте (canvas) используется canvas.drawImage.
- Вызов canvas-метода .toBlob(callback, format, quality) создаёт Blob и вызывает функцию callback при завершении.
В примере ниже изображение просто копируется, но мы можем взять его часть или трансформировать его на canvas перед созданием Blob:
// берём любое изображение let img = document.querySelector('img'); // создаём того же размера let canvas = document.createElement('canvas'); canvas.width = img.clientWidth; canvas.height = img.clientHeight; let context = canvas.getContext('2d'); // копируем изображение в canvas (метод позволяет вырезать часть изображения) context.drawImage(img, 0, 0); // мы можем вращать изображение при помощи context.rotate() и делать множество других преобразований // toBlob является асинхронной операцией, для которой callback-функция вызывается при завершении canvas.toBlob(function(blob) < // после того, как Blob создан, загружаем его let link = document.createElement('a'); link.download = 'example.png'; link.href = URL.createObjectURL(blob); link.click(); // удаляем внутреннюю ссылку на Blob, что позволит браузеру очистить память URL.revokeObjectURL(link.href); >, 'image/png');
Или если вы предпочитаете async/await вместо колбэка:
let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
Для создания скриншота страницы мы можем использовать такую библиотеку, как https://github.com/niklasvh/html2canvas. Всё, что она делает, это просто проходит страницу и отрисовывает её в . После этого мы может получить Blob одним из вышеуказанных способов.
Из Blob в ArrayBuffer
Конструктор Blob позволяет создать Blob-объект практически из чего угодно, включая BufferSource .
Но если нам нужна производительная низкоуровневая обработка, мы можем использовать ArrayBuffer из FileReader :
// получаем arrayBuffer из Blob let fileReader = new FileReader(); fileReader.readAsArrayBuffer(blob); fileReader.onload = function(event) < let arrayBuffer = fileReader.result; >;
Итого
В то время как ArrayBuffer , Uint8Array и другие BufferSource являются «бинарными данными», Blob представляет собой «бинарные данные с типом».
Это делает Blob удобным для операций загрузки/выгрузки данных, которые так часто используются в браузере.
Методы, которые выполняют сетевые запросы, такие как XMLHttpRequest, fetch и подобные, могут изначально работать с Blob так же, как и с другими объектами, представляющими двоичные данные.
Мы можем легко конвертировать Blob в низкоуровневые бинарные типы данных и обратно:
- Мы можем создать Blob из типизированного массива, используя конструктор new Blob(. ) .
- Мы можем обратно создать ArrayBuffer из Blob, используя FileReader , а затем создать его представление для низкоуровневых операций.
Что такое Blob (Binary Large Object)? Определение Blob (Binary Large Object) в Глоссарии IT
Что такое Blob (Binary Large Object)? Определение Blob (Binary Large Object) в Глоссарии IT
- by
- в News
- вкл 4 сентября 2023
В мире информационных технологий существует множество терминов и аббревиатур, которые могут быть довольно запутанными для тех, кто не знаком с этой областью. Одним из таких терминов является Blob, что означает Binary Large Object. В этой статье мы погрузимся в мир Blob и расскажем о том, что это такое и как они используются в IT-индустрии.
В основе своей Blob — это тип данных, который используется для хранения и управления большими объемами неструктурированных данных. Эти данные могут быть в различных форматах, таких как текст, изображения, аудио или видео. Термин «Binary» в Binary Large Object указывает на то, что данные хранятся в двоичном формате, то есть представляются с использованием серии единиц и нулей.
Blobs часто используются в базах данных для хранения файлов и других типов данных, которые нельзя легко организовать в традиционные таблицы баз данных. Например, если у вас есть веб-сайт, который позволяет пользователям загружать изображения, вы будете использовать Blob для хранения этих изображений в базе данных. Это позволяет легко извлекать и отображать изображения при необходимости.
Одним из основных преимуществ использования Blob является его способность обрабатывать большие объемы данных. У традиционных баз данных есть ограничения на размер данных, которые могут быть сохранены, но Blob может обрабатывать файлы практически любого размера. Это делает их идеальными для хранения мультимедийных файлов, таких как изображения с высоким разрешением или длинные видео.
Еще одним преимуществом использования Blob является его легкий доступ и управление. В большинстве языков программирования и систем управления базами данных есть встроенные функции и методы для работы с Blob. Это означает, что разработчики легко могут извлекать, обновлять и удалять Blob по мере необходимости, что делает их универсальным инструментом для управления неструктурированными данными.
Помимо использования в базах данных, Blob также широко используются в системах облачного хранения. Поставщики облачного хранения часто используют Blob для хранения файлов, загруженных пользователями. Это позволяет пользователям получать доступ к своим файлам из любого места, при наличии подключения к интернету. Поставщики облачного хранения также обычно предлагают функции, такие как версионирование и контроль доступа, которые дополнительно улучшают полезность Blob в данном контексте.
Хотя Blob — это мощный инструмент для управления неструктурированными данными, у него также есть некоторые ограничения. Одной из основных проблем при использовании Blob является сложность поиска и запроса. В отличие от структурированных данных, которые можно легко организовать в таблицы и запросить с использованием SQL, для Blob требуются специализированные методы и техники поиска и получения конкретной части данных. Это может затруднить выполнение сложных запросов на данные Blob.
В заключение, Blob, или Binary Large Objects, — это тип данных, который используется для хранения и управления большими объемами неструктурированных данных. Они часто используются в базах данных и системах облачного хранения для хранения файлов и других типов данных, которые нельзя легко организовать в традиционные таблицы баз данных. Несмотря на то, что Blob предлагает преимущества, такие как возможность обработки больших объемов данных и легкий доступ и управление, они также представляют некоторые сложности в плане поиска и запроса. Тем не менее, Blob остаются ценным инструментом в IT-индустрии для эффективного управления неструктурированными данными.