aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/blob/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/api/blob/index.html
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/ru/web/api/blob/index.html')
-rw-r--r--files/ru/web/api/blob/index.html178
1 files changed, 178 insertions, 0 deletions
diff --git a/files/ru/web/api/blob/index.html b/files/ru/web/api/blob/index.html
new file mode 100644
index 0000000000..a256ce6a5f
--- /dev/null
+++ b/files/ru/web/api/blob/index.html
@@ -0,0 +1,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 = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+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">&lt;p&gt;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.&lt;/p&gt;</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 &lt; 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>