Blob

Объект Blob представляет из себя подобный файлу объект с неизменяемыми, необработанными данными; они могут читаться как текст или двоичные данные, либо могут быть преобразованы в ReadableStream, таким образом, его методы могут быть использованы для обработки данных.

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(blobParts[, options])
Возвращает создаваемый объект Blob, который содержит соединение всех данных в массиве, переданном в конструктор.

Свойства

Blob.isClosed Только для чтения
Логическое значение, показывающее, вызывался ли метод Blob.close() у blob. Закрытый blob не может быть прочитан.
Blob.size Только для чтения
Размер данных, содержащихся в объекте Blob, в байтах.
Blob.type Только для чтения
Строка с MIME-типом данных, содержащихся в Blob. Если тип неизвестен, строка пуста.

Методы

Blob.close()
Закрывает Blob объект, по возможности освобождая занятые им ресурсы.
Blob.slice([start[, end[, contentType]]])
Возвращает новый Blob объект, содержащий данные в указанном диапазоне байтов исходного Blob.
Blob.stream()
Возвращает ReadableStream, который может использоваться для чтения содержимого Blob.
Blob.text()
Возвращает 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:

var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
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 элементов <img> (конечно, при условии, что данные содержат изображение).

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();

Или можно использовать Blob.text():

const text = await blob.text();

Используя другие методы FileReader, возможно прочесть содержимое объекта Blob как строку или как URL.

Спецификации

Specification Status Comment
File API
Определение 'Blob' в этой спецификации.
Рабочий черновик Initial definition

Браузерная совместимость

BCD tables only load in the browser

Замечания Gecko: доступность в привилегированном коде

Для использования в коде chrome, JSM и Bootstrap scope, вы должны импортировать его следующим образом:

Cu.importGlobalProperties(['Blob']);

Blob доступен в Worker scopes.

Смотри также