09.01.2025

Como Converter URL de Objeto para Blob ou File em JavaScript

Resposta Rápida

Para obter um Blob de uma URL de Objeto usando a API fetch, você pode usar a seguinte estrutura:

const getBlob = async (url) => await (await fetch(url)).blob();

Para obter o Blob, chame a função getBlob('url_do_objeto'), substituindo 'url_do_objeto' pela sua URL de Objeto real. Este método é recomendado para JavaScript moderno, pois é simples, eficiente e consistente.

Trabalhando com URLs Padrão e URLs de Objeto

Converter uma URL de Objeto ou uma URL padrão em um Blob pode ser feito da mesma forma. Aqui está um exemplo de código demonstrando o uso da API fetch para esse propósito:

const url = 'caminho_para_seu_recurso'; // Ou 'url_do_objeto'
fetch(url)
  .then(response => response.ok ? response.blob() : Promise.reject(new Error('Erro na requisição')))
  .then(blob => {
    // Adicione sua lógica de processamento do blob aqui
  })
  .catch(error => console.error('Erro durante a execução do fetch:', error));

Neste exemplo, não apenas a conversão da URL para um Blob é tratada, mas possíveis erros durante a requisição também são considerados.

Visualização

A URL de Objeto é uma chave (🔑) que abre um cofre (🔒) onde o arquivo ou Blob necessário está armazenado:

URL de Objeto (🔑): "blob:http://exemplo.com/12345"

Cofre (🔒): Dentro - Arquivo ou Blob 🧾

Para abrir o cofre, você precisa seguir estes passos:

1. Realizar `fetch` com nossa chave (🔑)
2. O cofre (🔒) se abre, fornecendo um objeto `Response`
3. Extrair o Blob necessário (🧾)

Aqui está um exemplo de como realizar a operação:

fetch("blob:http://exemplo.com/12345") // Chave para acesso
  .then(response => response.blob()) // Abre o cofre
  .then(blob => { 
    // O Blob recuperado está pronto para uso
  });

Resultado: Você extraiu com sucesso o Blob e agora ele está pronto para operações futuras! 🎖️🕵️‍♀️

Técnicas Avançadas: Trabalhando com Blobs e URLs

Método Alternativo: XMLHttpRequest

Se você está trabalhando com JavaScript ES5 ou precisa de compatibilidade com navegadores mais antigos, pode usar XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'url_do_objeto', true); // Fazendo uma requisição
xhr.responseType = 'blob'; // Indicando que esperamos um Blob

xhr.onload = function() {
  if (this.status === 200) { // Se tudo correu bem
    var blob = this.response;
    // Processar o blob recuperado
  }
};

xhr.send(); // Enviando a requisição

Lembre-se de que a API fetch é uma alternativa mais moderna e preferida devido às suas vantagens, incluindo o manuseio baseado em promessas.

Liberando a URL de Objeto Após o Uso

Após usar uma URL de Objeto, ela deve ser liberada chamando o método URL.revokeObjectURL(url). Isso é importante, especialmente se seu código criar muitos Blobs:

let objectURL = URL.createObjectURL(blob);
// Trabalhar com a objectURL
URL.revokeObjectURL(objectURL); // Limpar e liberar recursos

Você também pode implementar a sobrecarga dos métodos URL.createObjectURL e URL.revokeObjectURL para controlar a criação e exclusão de Blobs.

Baixando Blobs

Além disso, você pode usar um método que permite aos usuários baixar arquivos diretamente de um Blob:

const downloadBlob = (blob, filename) => {
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  document.body.appendChild(link);
  link.click(); // Iniciar o clique
  document.body.removeChild(link); // Remover o link após o download
  URL.revokeObjectURL(link.href); // Limpar a URL
};

// Exemplo de uso
downloadBlob(blob, 'nome_do_arquivo.txt');

Esse código cria um link temporário na página, inicia o download do arquivo e, em seguida, remove o link.

Usando FileReader para Trabalhar com Blobs

FileReader pode ser útil ao trabalhar com dados de Blob. Por exemplo, ler um Blob e convertê-lo em uma URL de Dados usando FileReader pode ser feito assim:

const readBlobAsDataURL = (blob, callback) => {
  const reader = new FileReader();
  reader.onloadend = () => callback(reader.result);
  reader.readAsDataURL(blob); // Começa a ler o Blob
};

Essa abordagem pode ser útil quando você precisa incorporar imagens diretamente em uma página da web ou enviar dados como uma string para uma API.

Recursos Úteis

1. URL: createObjectURL() método estático - Web APIs | MDN
2. Padrão HTML
3. Blob createObjectURL download não funciona no Firefox (mas funciona ao depurar) - Stack Overflow
4. Blob
5. API de Arquivos
6. GitHub - eligrey/Blob.js: Uma implementação de Blob para HTML5

Video

Navigation