Resumen
Un objeto Blob
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 File
se encuentra basada en un Blob
, heredando y expendiendo la funcionalidad de un Blob
para soportar archivos en el sistema del usuario.
Una forma fácil de construir un Blob
es invocando el constructor Blob()
. Otra manera es utilizando el método slice()
para crear un blob que contiene un subconjunto de los datos de otro Blob
.
Constructor
Blob()
- Regresa un nuevo objeto
Blob
creado cuyo contenido consiste en la concatenación de un arreglo de valores establecidos en el parámetro de la función.
Propiedades
Blob.size
Read only- El tamaño, en bytes, de los datos contenidos en el objeto
Blob
Blob.type
Read only- Una cadena (String) indicando el tipo MIME de los datos contenidos en el
Blob
. Si el tipo es desconocido, esta cadena será vacía.
Métodos
Blob.slice()
Regresa un nuevo objeto Blob
conteniendo los datos de un rango específico de bytes del origen delBlob
.
slice()
posee prefijos propios del fabricante en algunos exploradores y versiones: blob.mozSlice()
para Firefox 12 e inferior y blob.webkitSlice()
en Safari. Una versión anterior del método slice()
, sin prefijos del fabricante, tenía diferente semántica, y se encuentra obsoleto. El soporte para blob.mozSlice()
ha sido eliminado a partir de Firefox 30.Ejemplos
Ejemplo de uso de un constructor de Blob
El siguiente código:
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
es equivalente a:
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
La interfaz BlobBuilder
ofrece otra manera de crear Blob
, pero se encuentra ahora obsoleta y no debería volverse a utilizar.
Ejemplo para crear una URL en un arreglo tipado utilizando un blob
El siguiente código:
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.
Ejemplo para extraer datos de un Blob
La única manera de leer contenido de un Blob es utilizando un FileReader
. El siguiente código lee el contenido de un Blob como un arreglo tipado.
var reader = new FileReader(); reader.addEventListener("loadend", function() { // reader.result contains the contents of blob as a typed array }); reader.readAsArrayBuffer(blob);
Al utilizar otros métodos de FileReader
, es posible leer los contenidos del Blob como una cadena o una URL de datos.
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
File API La definición de 'Blob' en esta especificación. |
Working Draft | Definición inicial. |
Compatibilidad de navegadores
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Soporte básico | 5 | 4 | 10 | 11.10 | 5.1 |
slice() |
10 webkit‡ 21 |
5 moz‡ 13 |
10 | 12 | 5.1 (534.29) webkit |
Blob() constructor |
20 | 13.0 (13.0) | 10 | 12.10 | 6 (536.10) |
Característica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 13.0 (13.0) | ? | ? | ? |
Notas en implementaciones del método slice()
El método slice()
ha tomado inicialmente length
como el segundo argumento para indicar el número de bytes para copiar en el nuevo Blob
. Si usted especificó valores como start + length
excediento el tamaño del Blob
de origen, el Blob
retornado contendrá los datos a partir del índice de inicio hasta el final del Blob
de origen.
Esa versión del método slice()
fué implementada en Firefox 4, WebKit, y Opera 11.10. Sin embargo, desde que la sintaxis ha diferido desde Array.slice()
y String.slice()
, Gecko y WebKit removieron este soporte y agregaron soporte para la nueva sintaxis como mozSlice()
/Blob.webkitSlice
.
Comenzando en Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) y Chrome 21, slice()
no se encuentra más prefijado. El soporte para mozSlice()
ha sido eliminado en Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27).‡
Notas de Gecko
Antes de Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), existía un error que afectaba el comportamiento de slice()
; No funcionaba para las posiciones start
and end
por fuera del rango de valores de 64 bits con signo; Ha sido ahora arreglado para soportar valores de 64 bits sin signo.
Disponilidad del alcance del código en Chrome
El alcance JSM del Blob
se encuentra disponible sin la necesidad de hacer nada en especial.
En el alcance de arranque, este debe importarse de igual modo:
const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});