Estou tendo muitos problemas com o URL do blob.
Eu estava procurando por src
de uma tag de vídeo no YouTube e descobri que o vídeo src
era como:
src="blob:https://crap.crap"
Eu abri a URL do blob que estava no src
do vídeo que ele deu um erro. Eu não consigo't abrir o link, mas ele estava trabalhando com a tag src
. Como isso é possível?
Requisitos:
URLs Blob (ref. W3C, nome oficial) ou Object-URLs (ref. MDN e nome do método) são usados com um objecto Blob ou um objecto File.
src="blob:https://crap.crap" eu abri a url blob que estava em src de vídeo ele deu um erro e eu posso't abrir mas estava trabalhando com o src etiquetar como é possível?
Os URLs Blob só podem ser gerados internamente pelo navegador. URL.createObjectURL()
irá criar uma referência especial para o objeto Blob ou File que mais tarde pode ser lançado utilizando URL.revokeObjectURL()
. Essas URLs só podem ser utilizadas localmente na única instância do navegador e na mesma sessão (ou seja, na vida da página/documento).
O que é o blob url?
Por que ele é usado?
Blob URL/Object URL é um pseudo protocolo para permitir que objetos Blob e File sejam usados como fonte URL para coisas como imagens, download de links para dados binários e assim por diante.
Por exemplo, você não pode entregar dados brutos de bytes de um objeto Image, pois ele não saberia o que fazer com ele. Ele requer por exemplo imagens (que são dados binários) para serem carregadas através de URLs. Isto se aplica a qualquer coisa que requeira um URL como fonte. Ao invés de carregar os dados binários, então servi-los de volta através de uma URL é melhor usar um passo local extra para poder acessar os dados diretamente sem ir através de um servidor.
É também uma melhor alternativa ao Data-URI que são cordas codificadas como Base-64. O problema com o Data-URI é que cada char leva dois bytes em JavaScript. Além disso, um 33% é adicionado devido à codificação Base-64. Blobs são puros byte-arrays binários que não têm nenhuma sobrecarga significativa como o Data-URI, o que os torna mais rápidos e menores de manusear.
Posso fazer meu próprio blob url em um servidor?
Não, URLs Blob/ URLs de objeto só podem ser feitas internamente no navegador. Você pode fazer Blobs e obter o objeto File através da API do File Reader, embora BLOB signifique apenas Binary Large OBject e seja armazenado como byte-arrays. Um cliente pode solicitar que os dados sejam enviados como ArrayBuffer ou como Blob. O servidor deve enviar os dados como dados binários puros. As bases de dados frequentemente usam o Blob para descrever objetos binários também, e em essência estamos falando basicamente de byte-arrays.
se você tiver então Detalhes adicionais
Você precisa encapsular os dados binários como um objeto BLOB, então utilize URL.createObjectURL()
para gerar uma URL local para ele:
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
Note que URL
pode ser prefixado em navegadores webkit-browsers, então use:
var url = (URL || webkitURL).createObjectURL(...);
O que é a blob url? Porque é usado?
BLOB é apenas uma sequência de bytes. O navegador reconhece-o como um fluxo de bytes. Ele é usado para obter o fluxo de bytes da fonte.
Um objeto Blob representa um objeto em forma de arquivo de dados imutáveis e brutos. Blobs representam dados que são't necessariamente em um formato JavaScript-native. A interface File é baseada no Blob, herdando a funcionalidade do blob e expandindo-o para suportar arquivos no sistema do usuário's.
Posso fazer meu próprio blob url em um servidor?
Sim, você pode tentar fazer isso através do servidor, por exemplo: http://php.net/manual/en/function.ibase-blob-echo.php
Leia mais sobre
Esta função Javascript pretende mostrar a diferença entre a Blob API do ficheiro e a Data API para descarregar um ficheiro JSON no browser do cliente:
/**
* 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));
A função é chamada como saveAsFile('out.json', jsonString);
. Ele irá criar um ByteStream imediatamente reconhecido pelo navegador que irá baixar o arquivo gerado diretamente utilizando a API File API URL.createObjectURL
.
No else
, é possível ver o mesmo resultado obtido através do elemento href
mais o Data API, mas isto tem várias limitações que o Blob API não tem.