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
|
---
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" name="Browser_compatibility">Compatibilidade de Browser</h2>
<div class="hidden">Tabela de compatibilidade gerada a partir de dados estruturados. Para contribuir, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um Pull-Request.</div>
<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>
|
