O que é um URL blob e porque é usado?

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:

  • O que é a URL do blob?
  • Por que é usado?
  • Posso fazer meu próprio URL blob em um servidor?
  • Se você tiver qualquer detalhe adicional
Solução

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(...);
Comentários (14)

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

Comentários (4)

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.

Comentários (1)