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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
---
title: Blob
slug: Web/API/Blob
translation_of: Web/API/Blob
---
<p>{{ APIRef("File API") }}</p>
<h2 id="Resumen">Resumen</h2>
<p>Un objeto <code>Blob</code> representa un objeto tipo fichero de datos planos inmutables. Los Blobs representan datos que no necesariamente se encuentran en un formato nativo de JavaScript. La interfaz {{ domxref("File") }} se encuentra basada en un <code>Blob</code>, heredando y expendiendo la funcionalidad de un <code>Blob</code> para soportar archivos en el sistema del usuario.</p>
<p>Una forma fácil de construir un <code>Blob</code> es invocando el constructor {{domxref("Blob.Blob", "Blob()")}}. Otra manera es utilizando el método <code>slice()</code> para crear un blob que contiene un subconjunto de los datos de otro <code>Blob</code>.</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("Blob.Blob", "Blob()")}}</dt>
<dd>Regresa un nuevo objeto <code>Blob</code> creado cuyo contenido consiste en la concatenación de un arreglo de valores establecidos en el parámetro de la función.</dd>
</dl>
<h2 id="Propiedades">Propiedades</h2>
<dl>
<dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
<dd>El tamaño, en bytes, de los datos contenidos en el objeto <code>Blob</code></dd>
<dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
<dd>Una cadena (String) indicando el tipo MIME de los datos contenidos en el <code>Blob</code>. Si el tipo es desconocido, esta cadena será vacía.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("Blob.slice()")}}</dt>
<dd><code><font face="Open Sans, sans-serif">Regresa un nuevo objeto </font>Blob</code> conteniendo los datos de un rango específico de bytes del origen del <code>Blob</code>.</dd>
</dl>
<div class="note"><strong>Nota:</strong> Esté consciente que el método <code>slice()</code> posee prefijos propios del fabricante en algunos exploradores y versiones: <code>blob.mozSlice()</code> para Firefox 12 e inferior y <code>blob.webkitSlice()</code> en Safari. Una versión anterior del método <code>slice()</code>, sin prefijos del fabricante, tenía diferente semántica, y se encuentra obsoleto. El soporte para <code>blob.mozSlice()</code> ha sido eliminado a partir de Firefox 30.</div>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Ejemplo_de_uso_de_un_constructor_de_Blob">Ejemplo de uso de un constructor de Blob</h3>
<p>El siguiente código:</p>
<pre class="brush: js">var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
</pre>
<p>es equivalente 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'); // the blob
</pre>
<div class="warning">
<p>La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear <code>Blob</code>, pero se encuentra ahora obsoleta y no debería volverse a utilizar.</p>
</div>
<h3 id="Ejemplo_para_crear_una_URL_en_un_arreglo_tipado_utilizando_un_blob">Ejemplo para crear una URL en un arreglo tipado utilizando un blob</h3>
<p>El siguiente código:</p>
<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="Ejemplo_para_extraer_datos_de_un_Blob">Ejemplo para extraer datos de un Blob</h3>
<p>La única manera de leer contenido de un Blob es utilizando un {{domxref("FileReader")}}. El siguiente código lee el contenido de un Blob como un arreglo tipado.</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>Al utilizar otros métodos de {{domxref("FileReader")}}, es posible leer los contenidos del Blob como una cadena o una URL de datos.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('File API','#blob','Blob')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>5</td>
<td>4</td>
<td>10</td>
<td>11.10</td>
<td>5.1</td>
</tr>
<tr>
<td><code>slice()</code></td>
<td>10 {{property_prefix("webkit")}}‡<br>
21</td>
<td>5 {{ property_prefix("moz") }}‡<br>
13</td>
<td>10</td>
<td>12</td>
<td>5.1 (<a class="external" href="http://trac.webkit.org/changeset/83873">534.29</a>) {{ property_prefix("webkit") }}</td>
</tr>
<tr>
<td><code>Blob()</code> constructor</td>
<td>20</td>
<td>{{ CompatGeckoDesktop("13.0") }}</td>
<td>10</td>
<td>12.10</td>
<td>6 (<a class="external" href="http://trac.webkit.org/changeset/115582">536.10</a>)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("13.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Notas_en_implementaciones_del_método_slice()">Notas en implementaciones del método slice()</h3>
<p>El método <code>slice()</code> ha tomado inicialmente <code>length</code> como el segundo argumento para indicar el número de bytes para copiar en el nuevo <code>Blob</code>. Si usted especificó valores como <code>start + length</code> excediento el tamaño del <code>Blob </code>de origen, el <code>Blob</code> retornado contendrá los datos a partir del índice de inicio hasta el final del <code>Blob</code> de origen.</p>
<p>Esa versión del método <code>slice()</code> fué implementada en <a class="link-https" href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>, <a class="external" href="http://trac.webkit.org/changeset/55670">WebKit</a>, y <a class="external" href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. Sin embargo, desde que la sintaxis ha diferido desde <a href="/en/JavaScript/Reference/Global_Objects/Array/slice" title="en/JavaScript/Reference/Global Objects/Array/slice"><code>Array.slice()</code></a> y <a href="/en/JavaScript/Reference/Global_Objects/String/slice" title="en/JavaScript/Reference/Global Objects/String/slice"><code>String.slice()</code></a>, Gecko y WebKit removieron este soporte y agregaron soporte para la nueva sintaxis como {{ manch("mozSlice") }}/<a class="external" href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice</code></a>.</p>
<p>Comenzando en Gecko 13.0 {{ geckoRelease("13.0") }} y Chrome 21, {{ manch("slice") }} no se encuentra más prefijado. El soporte para <code>mozSlice()</code> ha sido eliminado en Gecko 30.0 {{ geckoRelease("30.0") }}.‡</p>
<h3 id="Notas_de_Gecko">Notas de Gecko</h3>
<p>Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, existía un error que afectaba el comportamiento de {{ manch("slice") }}; No funcionaba para las posiciones <code>start</code> and <code>end</code> por fuera del rango de valores de 64 bits con signo; Ha sido ahora arreglado para soportar valores de 64 bits sin signo.</p>
<h2 id="Disponilidad_del_alcance_del_código_en_Chrome">Disponilidad del alcance del código en Chrome</h2>
<p>El alcance JSM del <code>Blob </code>se encuentra disponible sin la necesidad de hacer nada en especial.</p>
<p>En el alcance de arranque, este debe importarse de igual modo:</p>
<pre class="brush: js">const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});</pre>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>{{ domxref("BlobBuilder") }}</li>
<li>{{ domxref("File") }}</li>
</ul>
|
