Como obter um arquivo ou blob de uma URL de objeto?

Estou permitindo que o usuário carregue imagens em uma página via arrastar e soltar e outros métodos. Quando uma imagem é descartada, estou usando URL.createObjectURLpara converter em um URL de objeto para exibir a imagem. Não estou revogando o URL, pois o reutilizo.

Portanto, quando chega a hora de criar um FormDataobjeto para permitir que eles carreguem um formulário com uma dessas imagens, existe alguma maneira de reverter esse URL de objeto novamente para um Blobou mais Filee depois anexá-lo a um FormDataobjeto?

Solução moderna:

let blob = await fetch(url).then(r => r.blob());

O URL pode ser um objeto ou um URL normal.

Como menciona gengkev em seu comentário acima, parece que a melhor / única maneira de fazer isso é com uma chamada assíncrona xhr2:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//your.blob.url.here', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var myBlob = this.response;
    // myBlob is now the blob that the object URL pointed to.
  }
};
xhr.send();

Atualização (2018): Para situações em que o ES5 pode ser usado com segurança, Joe tem uma resposta mais simples baseada em ES5 abaixo.

Talvez alguém ache isso útil ao trabalhar com React / Node / Axios. Usei isso para meu recurso de upload de imagem do Cloudinary react-dropzonena interface do usuário.

    axios({
        method: 'get',
        url: file[0].preview, // blob url eg. blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc
        responseType: 'blob'
    }).then(function(response){
         var reader = new FileReader();
         reader.readAsDataURL(response.data); 
         reader.onloadend = function() {
             var base64data = reader.result;
             self.props.onMainImageDrop(base64data)
         }

    })

Consulte Obtendo dados BLOB da solicitação XHR, que indica que o BlobBuilder não funciona no Chrome, então você precisa usar:

xhr.responseType = 'arraybuffer';

Usando busca, por exemplo, como abaixo:

 fetch(<"yoururl">, {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + <your access token if need>
    },
       })
.then((response) => response.blob())
.then((blob) => {
// 2. Create blob link to download
 const url = window.URL.createObjectURL(new Blob([blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `sample.xlsx`);
 // 3. Append to html page
 document.body.appendChild(link);
 // 4. Force download
 link.click();
 // 5. Clean up and remove the link
 link.parentNode.removeChild(link);
})

Você pode colar no console do Chrome para testar. o arquivo com download com 'sample.xlsx' Espero que ajude!

Infelizmente, a resposta do @ BrianFreud não se encaixa nas minhas necessidades, eu tinha uma necessidade um pouco diferente e sei que essa não é a resposta para a pergunta do @ BrianFreud, mas estou deixando aqui porque muitas pessoas chegaram aqui com a minha mesma necessidade. Eu precisava de algo como 'Como obter um arquivo ou blob de um URL?', E a resposta correta atual não se encaixa nas minhas necessidades porque não é um domínio cruzado.

Eu tenho um site que consome imagens de um Amazon S3 / Azure Storage e lá guardo objetos nomeados com identificadores exclusivos:

exemplo: http: //****.blob.core.windows.net/systemimages/bf142dc9-0185-4aee-a3f4-1e5e95a09bcf

Algumas dessas imagens devem ser baixadas da nossa interface do sistema. Para evitar a transmissão desse tráfego pelo meu servidor HTTP, já que esses objetos não exigem acesso a nenhuma segurança (exceto pela filtragem de domínio), decidi fazer uma solicitação direta no navegador do usuário e usar o processamento local para dar ao arquivo um nome real e extensão.

Para conseguir isso, usei este excelente artigo de Henry Algus: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

1. Primeiro passo: adicione suporte binário ao jquery

/**
*
* jquery.binarytransport.js
*
* @description. jQuery ajax transport for making binary data type requests.
* @version 1.0 
* @author Henry Algus <henryalgus@gmail.com>
*
*/

// use this transport for "binary" data type
$.ajaxTransport("+binary", function (options, originalOptions, jqXHR) {
    // check for conditions and support for blob / arraybuffer response type
    if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
        return {
            // create new XMLHttpRequest
            send: function (headers, callback) {
                // setup all variables
                var xhr = new XMLHttpRequest(),
        url = options.url,
        type = options.type,
        async = options.async || true,
        // blob or arraybuffer. Default is blob
        dataType = options.responseType || "blob",
        data = options.data || null,
        username = options.username || null,
        password = options.password || null;

                xhr.addEventListener('load', function () {
                    var data = {};
                    data[options.dataType] = xhr.response;
                    // make callback and send data
                    callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                });

                xhr.open(type, url, async, username, password);

                // setup custom headers
                for (var i in headers) {
                    xhr.setRequestHeader(i, headers[i]);
                }

                xhr.responseType = dataType;
                xhr.send(data);
            },
            abort: function () {
                jqXHR.abort();
            }
        };
    }
});

2. Segunda etapa: faça uma solicitação usando este tipo de transporte.

function downloadArt(url)
{
    $.ajax(url, {
        dataType: "binary",
        processData: false
    }).done(function (data) {
        // just my logic to name/create files
        var filename = url.substr(url.lastIndexOf('/') + 1) + '.png';
        var blob = new Blob([data], { type: 'image/png' });

        saveAs(blob, filename);
    });
}

Agora você pode usar o Blob criado como quiser, no meu caso, quero salvá-lo em disco.

3. Opcional: salve o arquivo no computador do usuário usando o FileSaver

Eu usei o FileSaver.js para salvar em disco o arquivo baixado. Se você precisar fazer isso, use esta biblioteca javascript:

https://github.com/eligrey/FileSaver.js/

Espero que isso ajude outras pessoas com necessidades mais específicas.

Se você mostrar o arquivo em uma tela de qualquer maneira, também poderá converter o conteúdo da tela em um objeto de blob.

canvas.toBlob(function(my_file){
  //.toBlob is only implemented in > FF18 but there is a polyfill 
  //for other browsers https://github.com/blueimp/JavaScript-Canvas-to-Blob
  var myBlob = (my_file);
})