1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
---
title: Blob
slug: Web/API/Blob
translation_of: Web/API/Blob
---
<div>{{APIRef("File API")}}</div>
<p><font face="Open Sans, Arial, sans-serif">Объект </font><code>Blob</code> представляет из себя подобный файлу объект с неизменяемыми, необработанными данными; они могут читаться как текст или двоичные данные, либо могут быть преобразованы в {{DOMxRef("ReadableStream")}}, таким образом, его методы могут быть использованы для обработки данных.</p>
<p>Blob-ы могут представлять данные, которые не обязательно должны быть в родном для JavaScript формате. Интерфейс {{domxref("File")}} основан на <code>Blob</code>, наследует функциональность <code>Blob</code> и расширяет его для поддержки файлов на стороне пользователя.</p>
<h2 id="Использование_Blob">Использование Blob</h2>
<p>Для создания <code>Blob</code> не из объектов и данных blob, используйте конструктор {{domxref("Blob.Blob", "Blob()")}} . Чтобы создать blob из подмножества данных из другого blob, используйте метод {{domxref("Blob.slice()", "slice()")}}. Чтобы получить объект <code>Blob</code> для файла на файловой системе пользователя, смотрите документацию на {{domxref("File")}}.</p>
<p>API, принимающие объекты <code>Blob</code>, также перечислены в документации на {{domxref("File")}}.</p>
<div class="note">
<p><strong>Заметка:</strong> Метод <code>slice()</code> имеет изначально задаваемую длину как второй аргумент, что используется для указания числа байт копируемых в новый <code>Blob.</code> Если указать такие параметры <code>start + length</code>, которые превышают размер исходного <code>Blob</code>, то возвращаемый <code>Blob</code> будет содержать данные от начального индекса (start index) до конца исходного <code>Blob.</code></p>
</div>
<div class="note"><strong>Заметка:</strong> Следует помнить ,что метод <code>slice()</code> имеет сторонние префиксы в некоторых браузерах: <code>blob.mozSlice()</code> для Firefox 12 и ранее, так же <code>blob.webkitSlice()</code> в Safari. Старая версия метода <code>slice()</code>, без сторонних приставок, имеет другой алгоритм и устарела. Поддержка <code>blob.mozSlice()</code> была убрана в Firefox 30.</div>
<h2 id="Конструктор">Конструктор</h2>
<dl>
<dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
<dd>Возвращает создаваемый объект Blob, который содержит соединение всех данных в массиве, переданном в конструктор.</dd>
</dl>
<h2 id="Свойства">Свойства</h2>
<dl>
<dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
<dd>Логическое значение, показывающее, вызывался ли метод {{domxref("Blob.close()")}} у blob. Закрытый blob не может быть прочитан.</dd>
<dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
<dd>Размер данных, содержащихся в объекте <code>Blob</code>, в байтах.</dd>
<dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
<dd>Строка с MIME-типом данных, содержащихся в <code>Blob</code>. Если тип неизвестен, строка пуста.</dd>
</dl>
<h2 id="Методы">Методы</h2>
<dl>
<dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
<dd>Закрывает Blob объект, по возможности освобождая занятые им ресурсы.</dd>
<dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
<dd>Возвращает новый <code>Blob</code> объект, содержащий данные в указанном диапазоне байтов исходного <code>Blob</code>.</dd>
<dt>{{DOMxRef("Blob.stream()")}}</dt>
<dd>Возвращает {{DOMxRef("ReadableStream")}}, который может использоваться для чтения содержимого <code>Blob</code>.</dd>
<dt>{{DOMxRef("Blob.text()")}}</dt>
<dd>Возвращает promise, который исполняется с {{DOMxRef("USVString")}}, содержащей всё содержимое <code>Blob</code>, интерпретируемое как текст UTF-8.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<h3 id="Создание_Blob">Создание Blob</h3>
<p>Конструктор {{domxref("Blob.Blob", "Blob() constructor")}} может создавать объекты blob из других объектов. Например, чтобы сконструировать blob из строки JSON:</p>
<pre class="brush: js">const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre>
<div class="warning">
<p>До того как конструктор Blob стал доступен, это могло быть выполнено через устаревший API {{domxref("BlobBuilder")}}:</p>
<pre class="brush: js">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');
</pre>
</div>
<h3 id="Создание_URL_для_содержимого_типизированного_массива">Создание URL для содержимого типизированного массива</h3>
<p>Следующий код создаёт типизированный массив JavaScript и создаёт новый <code>Blob</code>, содержащий данные типизированного массива. Затем вызывается {{DOMxRef("URL.createObjectURL()")}} для преобразования blob в {{glossary("URL")}}.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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></pre>
<h4 id="JavaScript">JavaScript</h4>
<p>Основной частью этого кода для примера является функция <code>typedArrayToURL()</code>, которая создаёт <code>Blob</code> из переданного типизированного массива и возвращает объект URL для него. Преобразовав данные в URL объекта, их можно использовать несколькими способами, в том числе, в качестве значения атрибута {{htmlattrxref("src", "img")}} элементов {{HTMLElement("img")}} (конечно, при условии, что данные содержат изображение).</p>
<pre class="brush: js">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);</pre>
<p>
</p><h3 id="Другой_пример">Другой пример</h3>
<pre class="brush: js">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.
</pre>
<h3 id="Извлечение_данных_из_Blob">Извлечение данных из Blob</h3>
<p>Один из способов прочесть содержимое <code>Blob</code> <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это использовать {{domxref("FileReader")}}. Следующий код читает содержимое <code>Blob</code> как типизированный массив.</p>
<pre class="brush: js">var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);</pre>
<p>Другой способ прочитать содержимое из <code>Blob</code> <span lang="EN-US" style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'>–</span> это использовать {{domxref("Response")}}. Следующий код читает содержимое <code>Blob</code> как текст:</p>
<pre class="brush: js">const text = await (new Response(blob)).text();
</pre>
<p>Или можно использовать {{DOMxRef("Blob.text()")}}:</p>
<pre class="brush: js">const text = await blob.text();</pre>
<p>Используя другие методы {{domxref("FileReader")}}, возможно прочесть содержимое объекта Blob как строку или как URL.</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('File API','#blob-section','Blob')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
<p>{{Compat("api.Blob")}}</p>
<h2 id="Замечания_Gecko_доступность_в_привилегированном_коде">Замечания Gecko: доступность в привилегированном коде</h2>
<p>Для использования в коде chrome, JSM и Bootstrap scope, вы должны импортировать его следующим образом:</p>
<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
</pre>
<p><code>Blob</code> доступен в Worker scopes.</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{domxref("BlobBuilder")}}</li>
<li>{{DOMxRef("FileReader")}}</li>
<li>{{domxref("File")}}</li>
<li>{{domxref("URL.createObjectURL")}}</li>
<li><a href="/ru/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
<li><a href="https://wiki.developer.mozilla.org/ru/docs/Web/API/File/Using_files_from_web_applications">Использование файлов в веб-приложениях</a></li>
</ul>
|
