¿Cómo obtener un archivo o blob de una URL de objeto?

Question

Estoy permitiendo que el usuario cargue imágenes en una página mediante la operación de arrastrar & y otros métodos. Cuando se descarta una imagen, estoy usando URL.createObjectURL para convertirla en una URL de objeto para mostrar la imagen. No estoy revocando la url, ya que la reutilizo.

lo tanto, cuando llega el momento de crear un objeto FormData por lo que puede permitir que se cargue un formulario con una de esas imágenes en el mismo, ¿hay alguna manera puedo entonces revertir esa URL del objeto nuevo en una Blob o File por lo ¿Puedo agregarlo a un objeto FormData?

Answer 1

Como gengkev alude a en su comentario anterior, parece que la mejor única manera/de hacerlo es con una llamada asincrónica 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(); 

Answer 2

Si muestra el archivo en un lienzo de todas formas también puede convertir el contenido del lienzo a un objeto 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); 
}) 

Answer 3

Ver Getting BLOB data from XHR request el cual señala que BlobBuilder no funciona en Chrome lo que es necesario utilizar:

xhr.responseType = 'arraybuffer'; 

Answer 4

Desafortunadamente @ respuesta de BrianFreud no se ajusta a mis necesidades, que tenía un poco de necesidad diferente , y sé que esa no es la respuesta para la pregunta de @ BrianFreud, pero lo dejo aquí porque muchas personas llegaron aquí con mi misma necesidad. Necesitaba algo como '¿Cómo obtener un archivo o blob de una URL?', Y la respuesta correcta actual no se ajusta a mis necesidades porque no es de dominio cruzado.

que tienen un sitio web que consume imágenes de un S3 Azure Storage/Amazonas, y hay que almacenar objetos nombrados con uniqueidentifiers:

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

Algunas de estas imágenes se deben descargar de la interfaz de nuestro sistema. Para evitar pasar este tráfico a través de mi servidor HTTP, ya que estos objetos no requieren acceso a seguridad (excepto por filtrado de dominio), decidí hacer una solicitud directa en el navegador del usuario y usar el procesamiento local para darle un nombre real al archivo y extensión

Para lograr eso he utilizado este gran artículo de Henry Algus: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

1. Primer paso: Añadir soporte binario para 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. Segundo paso: Hacer una solicitar 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); 
    }); 
} 

Ahora puede utilizar el Blob creado como usted quiere, en mi caso quiero guardarlo en el disco.

3. Opcional: Guardar el archivo en el ordenador del usuario mediante FileSaver

he utilizado FileSaver.js guardar en el disco el archivo descargado, si usted necesita para lograr que, por favor use esta librería javascript:

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

espero esto para ayudar a otras personas con necesidades más específicas.

Answer 5

Quizás alguien encuentre esto útil cuando se trabaja con React/Node/Axios. Utilicé esto para mi función de carga de imágenes Cloudinary con react-dropzone en la interfaz de usuario.

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) 
     } 

    })