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
|
---
title: Blob
slug: Web/API/Blob
translation_of: Web/API/Blob
---
<p>{{ APIRef("File API") }}</p>
<h2 id="Sumário">Sumário</h2>
<p>Um objeto <code>Blob</code> representa um objeto do tipo arquivo, com dados brutos imutáveis. Blobs representam dados que não estão necessariamente em um formato JavaScript nativo. A interface {{ domxref("File") }} é baseada no <code>Blob</code>, herdando funcionalidade blob e expandindo-o para suportar arquivos no sistema do usuário.</p>
<p>Para construir um <code>Blob</code> a partir de outro objeto ou dado não-blob , utilize o construtor {{domxref("Blob.Blob","Blob()")}}. Para criar um blob que contém um subconjunto de dados de outro blob, use o método {{domxref("Blob.slice()", "slice()")}}. Para obter um objeto Blob de um arquivo no sistema de arquivos do usuário, veja a documentação {{domxref("File")}}.</p>
<p>The APIs accepting <code>Blob</code> objects are also listed on the {{domxref("File")}} documentation.</p>
<div class="note">
<p><strong>Nota:</strong> O método <code>slice()</code> usava inicialmente <code>length</code> como segundo argumento para indicar o numero de bytes a copiar no novo <code>Blob</code>. Se você especificou valores de maneira que <code>start + length</code> excederam o tamanho do <code>Blob</code> de origem, o <code>Blob</code> retornado contém dados a partir do início do índice até o final do <code>Blob</code> de origem.</p>
</div>
<div class="note"><strong>Nota:</strong> Esteja ciente que o método <code>slice()</code> possui prefixos de fornecedores em alguns navegadores e versões: <code>blob.mozSlice()</code> para Firefox 12 e anteriores, e <code>blob.webkitSlice()</code> para Safari. Uma versão antiga do método <code>slice()</code>, sem prefixos de fornecedor, tem semântica diferente, e portanto é obsoleta. O suporta para <code>blob.mozSlice()</code> foi descontinuado a partir do Firefox 30.</div>
<h2 id="Construtor">Construtor</h2>
<dl>
<dt>{{domxref("Blob.Blob", "Blob(blobParts[, opções])")}}</dt>
<dd>Retorna um novo <code>Blob</code> object cujo conteúdo consiste na concatenação do array de valores passados por parâmentro.</dd>
</dl>
<h2 id="Propriedades">Propriedades</h2>
<dl>
<dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
<dd>Tamanho em bytes dos dados contidos no objeto <code>Blob</code>.</dd>
<dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
<dd>Uma string que indica o MIME type dos dados no <code>Blob</code>. Se o tipo é desconhecido, então retorna uma string vazia.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
<dd>Retorna um novo <code>Blob</code> object contendo dados em no intervalo de bytes especificado do <code>Blob</code> de origem.</dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Exemplos_de_uso_do_construtor_Blob">Exemplos de uso do construtor Blob</h3>
<p>O código a seguir:</p>
<pre class="brush: js">var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // o blob
</pre>
<p>equivale a:</p>
<pre class="brush: js">var oBuilder = new BlobBuilder();
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob('text/xml'); // o blob
</pre>
<div class="warning">
<p>O {{ domxref("BlobBuilder") }} oferece outra maneira para criar Blobs, mas é depreciado e não deveria mais ser usado.</p>
</div>
<h3 id="Exemplo_para_criar_uma_URL_para_uma_array_tipada_usando_blob">Exemplo para criar uma URL para uma array tipada usando blob</h3>
<p>O código a seguir:</p>
<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // passe um MIME-type útil aqui
var url = URL.createObjectURL(blob);
// url será algo do tipo: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// agora você pode usar a URL em qualquer contexto em que URLs regulares podem ser usadas, por exemplo: img.src, etc.
</pre>
<h3 id="Exemplo_de_Extração_de_Dados_de_Um_Blob">Exemplo de Extração de Dados de Um Blob</h3>
<p>O único jeito de ler o conteúdo de um Blob é usando {{domxref("FileReader")}}. O código a seguir lê o conteudo de um Blob como um Array.</p>
<pre class="brush: js">var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result contém o conteúdo do blob como uma array tipada
});
reader.readAsArrayBuffer(blob);</pre>
<p>Ao usar outros métodos de {{domxref("FileReader")}}, é possível ler o conteúdo de um Blob como uma string ou como uma data URL.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('File API','#blob','Blob')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("api.Blob")}}</p>
<h3 id="Notas_para_Gecko">Notas para Gecko</h3>
<p>Anterior ao Gecko 12.0 {{ geckoRelease("12.0") }}, havia um bug que afetava o comportamento do {{ manch("slice") }}; que não funcionava para as posições <code>start</code> e <code>end</code> fora do intervalo de valores assinados como 64-bit; este bug foi corrigido para dar suporte a valores assinados como 64-bit.</p>
<h2 id="Chrome_Code_-_Disponibilidade_de_Escopo">Chrome Code - Disponibilidade de Escopo</h2>
<p>No escopo JSM, <code>Blob</code> é disponivel sem a necessidade de nada especial.</p>
<p>No escopo Bootstrap, ele deve ser importado como tal:</p>
<pre class="brush: js">const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});</pre>
<h2 id="Veja_Também">Veja Também</h2>
<ul>
<li>{{ domxref("BlobBuilder") }}</li>
<li>{{ domxref("File") }}</li>
</ul>
|
