Estoy teniendo muchos problemas con la URL de los blob.
Yo estaba buscando src
de una etiqueta de vídeo en YouTube y me encontré con que el vídeo src
era como:
src="blob:https://crap.crap"
Abrí la URL del blob que estaba en src
del video dio un error. No puedo abrir el enlace, pero sí funcionaba con la etiqueta src
. ¿Cómo es posible?
Requisitos:
Las URLs Blob (ref. W3C, nombre oficial) o las Object-URLs (ref. MDN y nombre del método) se utilizan con un objeto Blob o un objeto File.
src="blob:https://crap.crap" He abierto la url del blob que estaba en src de video dio un error y no puedo'abrir pero estaba trabajando con el src ¿como es posible?
Las URLs Blob sólo pueden ser generadas internamente por el navegador. URL.createObjectURL()
creará una referencia especial al objeto Blob o Archivo que posteriormente puede ser liberada utilizando URL.revokeObjectURL()
. Estas URLs sólo pueden ser utilizadas localmente en la única instancia del navegador y en la misma sesión (es decir, la vida de la página/documento).
¿Qué es un blob url?
¿Por qué se utiliza?
Blob URL/Object URL es un pseudoprotocolo que permite utilizar objetos Blob y File como fuente de URL para cosas como imágenes, enlaces de descarga para datos binarios, etc.
Por ejemplo, no se puede entregar a un objeto Imagen datos brutos de bytes, ya que no sabría qué hacer con ellos. Requiere, por ejemplo, que las imágenes (que son datos binarios) se carguen a través de URLs. Esto se aplica a cualquier cosa que requiera una URL como fuente. En lugar de cargar los datos binarios, y luego servirlos de vuelta a través de una URL es mejor utilizar un paso local extra para poder acceder a los datos directamente sin pasar por un servidor.
También es una mejor alternativa a los Data-URI que son cadenas codificadas como Base-64. El problema de los Data-URI es que cada char ocupa dos bytes en JavaScript. Además, se añade un 33% debido a la codificación Base-64. Los Blobs son puras matrices binarias de bytes que no tienen ninguna sobrecarga significativa como los Data-URI, lo que los hace más rápidos y pequeños de manejar.
¿Puedo hacer mi propio blob url en un servidor?
No, los Blob URLs/Object URLs sólo pueden hacerse internamente en el navegador. Puedes hacer Blobs y obtener objetos de archivo a través de la API del lector de archivos, aunque BLOB sólo significa Binary Large OBject y se almacena como matrices de bytes. Un cliente puede solicitar que los datos se envíen como ArrayBuffer o como Blob. El servidor debe enviar los datos como datos binarios puros. Las bases de datos a menudo utilizan Blob para describir objetos binarios también, y en esencia estamos hablando básicamente de byte-arrays.
si tiene entonces Detalle adicional
Necesitas encapsular los datos binarios como un objeto BLOB, y luego usar URL.createObjectURL()
para generar una URL local para ello:
var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
URL.revokeObjectURL(this.src); // clean-up memory
document.body.appendChild(this); // add image to DOM
}
img.src = url; // can now "stream" the bytes
Tenga en cuenta que URL
puede llevar un prefijo en los navegadores webkit, así que utilice:
var url = (URL || webkitURL).createObjectURL(...);
*¿Qué es una url blob? ¿Por qué se utiliza?
BLOB es sólo una secuencia de bytes. El navegador lo reconoce como un flujo de bytes. Se utiliza para obtener el flujo de bytes de la fuente.
Un objeto Blob representa un objeto similar a un archivo de datos inmutables y sin procesar. Los Blobs representan datos que no están necesariamente en un formato nativo de JavaScript. La interfaz File se basa en Blob, heredando la funcionalidad de los blobs y expandiéndola para soportar archivos en el sistema del usuario.
¿Puedo hacer mi propia url blob en un servidor?
Sí, hay varias maneras de hacerlo, por ejemplo, prueba http://php.net/manual/en/function.ibase-blob-echo.php
Lea más en
Esta función de Javascript pretende mostrar la diferencia entre la API de Archivos Globales y la API de Datos para descargar un archivo JSON en el navegador del cliente:
begin snippet: js hide: false console: true babel: false -->
/**
* Save a text as file using HTML <a> temporary element and Blob
* @author Loreto Parisi
*/
var saveAsFile = function(fileName, fileContents) {
if (typeof(Blob) != 'undefined') { // Alternative 1: using Blob
var textFileAsBlob = new Blob([fileContents], {type: 'text/plain'});
var downloadLink = document.createElement("a");
downloadLink.download = fileName;
if (window.webkitURL != null) {
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = document.body.removeChild(event.target);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
} else { // Alternative 2: using Data
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.onclick = document.body.removeChild(event.target);
pp.click();
}
} // saveAsFile
/* Example */
var jsonObject = {"name": "John", "age": 30, "car": null};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));
La función se llama como saveAsFile('out.json', jsonString);
. Creará un ByteStream inmediatamente reconocido por el navegador que descargará el archivo generado directamente utilizando la API de archivos URL.createObjectURL
.
En el else
, es posible ver el mismo resultado obtenido a través del elemento href
más la API de Datos, pero esto tiene varias limitaciones que la API de Blob no tiene.