diff options
Diffstat (limited to 'files/pt-pt/web/api/blob/index.html')
| -rw-r--r-- | files/pt-pt/web/api/blob/index.html | 157 |
1 files changed, 0 insertions, 157 deletions
diff --git a/files/pt-pt/web/api/blob/index.html b/files/pt-pt/web/api/blob/index.html deleted file mode 100644 index 878bc85e5e..0000000000 --- a/files/pt-pt/web/api/blob/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Blob -slug: Web/API/Blob -tags: - - API - - Blob - - File API - - Interface - - NeedsTranslation - - Raw - - Reference - - TopicStub - - data -translation_of: Web/API/Blob ---- -<div>{{APIRef("File API")}}</div> - -<p>The <strong><code>Blob</code></strong> object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a {{DOMxRef("ReadableStream")}} so its methods can be used for processing the data.</p> - -<p>Blobs can represent data that isn't necessarily in a JavaScript-native format. The {{DOMxRef("File")}} interface is based on <code>Blob</code>, inheriting blob functionality and expanding it to support files on the user's system.</p> - -<h2 id="Using_blobs">Using blobs</h2> - -<p>To construct a <code>Blob</code> from other non-blob objects and data, use the {{DOMxRef("Blob.Blob", "Blob()")}} constructor. To create a blob that contains a subset of another blob's data, use the {{DOMxRef("Blob.slice()", "slice()")}} method. To obtain a <code>Blob</code> object for a file on the user's file system, see the {{DOMxRef("File")}} documentation.</p> - -<p>The APIs accepting <code>Blob</code> objects are also listed in the {{DOMxRef("File")}} documentation.</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{DOMxRef("Blob.Blob", "Blob()")}}</dt> - <dd>Returns a newly created <code>Blob</code> object which contains a concatenation of all of the data in the array passed into the constructor.</dd> -</dl> - -<h2 id="Instance_properties">Instance properties</h2> - -<dl> - <dt>{{DOMxRef("Blob.prototype.size")}} {{readonlyinline}}</dt> - <dd>The size, in bytes, of the data contained in the <code>Blob</code> object.</dd> - <dt>{{DOMxRef("Blob.prototype.type")}} {{readonlyinline}}</dt> - <dd>A string indicating the MIME type of the data contained in the <code>Blob</code>. If the type is unknown, this string is empty.</dd> -</dl> - -<h2 id="Instance_methods">Instance methods</h2> - -<dl> - <dt>{{DOMxRef("Blob.prototype.arrayBuffer()")}}</dt> - <dd>Returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}} containing the entire contents of the <code>Blob</code> as binary data.</dd> - <dt>{{DOMxRef("Blob.prototype.slice()")}}</dt> - <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the blob on which it's called.</dd> - <dt>{{DOMxRef("Blob.prototype.stream()")}}</dt> - <dd>Returns a {{DOMxRef("ReadableStream")}} that can be used to read the contents of the <code>Blob</code>.</dd> - <dt>{{DOMxRef("Blob.prototype.text()")}}</dt> - <dd>Returns a promise that resolves with a {{DOMxRef("USVString")}} containing the entire contents of the <code>Blob</code> interpreted as UTF-8 text.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Creating_a_blob">Creating a blob</h3> - -<p>The {{DOMxRef("Blob.Blob", "Blob()")}} constructor can create blobs from other objects. For example, to construct a blob from a JSON string:</p> - -<pre class="brush: js notranslate">const obj = {hello: 'world'}; -const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre> - -<h3 id="Creating_a_URL_representing_the_contents_of_a_typed_array">Creating a URL representing the contents of a typed array</h3> - -<p>The following code creates a JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> and creates a new <code>Blob</code> containing the typed array's data. It then calls {{DOMxRef("URL.createObjectURL()")}} to convert the blob into a {{glossary("URL")}}.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><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>The main piece of this code for example purposes is the <code>typedArrayToURL()</code> function, which creates a <code>Blob</code> from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the {{HTMLElement("img")}} element's {{htmlattrxref("src", "img")}} attribute (assuming the data contains an image, of course).</p> - -<pre class="brush: js notranslate">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> - -<h4 id="Result">Result</h4> - -<p>Click the link in the example to see the browser decode the object URL.</p> - -<p>{{EmbedLiveSample("Creating_a_URL_representing_the_contents_of_a_typed_array", 600, 200)}}</p> - -<h3 id="Extracting_data_from_a_blob">Extracting data from a blob</h3> - -<p>One way to read content from a <code>Blob</code> is to use a {{DOMxRef("FileReader")}}. The following code reads the content of a <code>Blob</code> as a typed array:</p> - -<pre class="brush: js notranslate">const reader = new FileReader(); -reader.addEventListener('loadend', () => { - // reader.result contains the contents of blob as a typed array -}); -reader.readAsArrayBuffer(blob);</pre> - -<p>Another way to read content from a <code>Blob</code> is to use a {{domxref("Response")}}. The following code reads the content of a <code>Blob</code> as text:</p> - -<pre class="brush: js notranslate">const text = await (new Response(blob)).text(); -</pre> - -<p>Or by using {{DOMxRef("Blob.prototype.text()")}}:</p> - -<pre class="brush: js notranslate">const text = await blob.text();</pre> - -<p>By using other methods of <code>FileReader</code>, it is possible to read the contents of a Blob as a string or a data URL.</p> - -<h2 id="Specifications">Specifications</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', 'The <code>Blob</code> interface')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Blob")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{DOMxRef("BlobBuilder")}}</li> - <li>{{DOMxRef("FileReader")}}</li> - <li>{{DOMxRef("File")}}</li> - <li>{{DOMxRef("URL.createObjectURL")}}</li> - <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> -</ul> |