javascript - data - js download file base64

Navegador/HTML Fuerza la descarga de la imagen de src="data: image/jpeg; base64..."

Question

Estoy generando una imagen en el lado del cliente y la visualizo con HTML así:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgM...."/>

Quiero ofrecer la posibilidad de descargar la Imagen generada.

¿Cómo puedo saber que el navegador está abriendo un archivo para guardar el diálogo (o simplemente descargar la imagen como lo haría Chrome o Firefox en la carpeta de descargas) que permite al usuario guardar la imagen sin hacer clic derecho y guardarla como en la imagen?

Preferiría una solución sin interacción del servidor. Por lo tanto, soy consciente de que sería posible si primero cargara la Imagen y luego comenzara la descarga.

¡Muchas gracias!

Answer 1

Eche un vistazo a FileSaver.js . Proporciona una práctica función saveAs que se ocupa de la mayoría de los caprichos específicos del navegador.

Answer 2

Simplemente reemplace image/jpeg con application/octet-stream . El cliente no reconocería la URL como un recurso en línea y le pedirá un diálogo de descarga.

Una simple solución de JavaScript sería:

//var img = reference to image
var url = img.src.replace(/^data:image//[^;]+/, ''data:application/octet-stream'');
window.open(url);
// Or perhaps: location.href = url;
// Or even setting the location of an <iframe> element, 

Otro método es usar un blob: URI:

var img = document.images[0];
img.onclick = function() {
    // atob to base64_decode the data-URI
    var image_data = atob(img.src.split('','')[1]);
    // Use typed arrays to convert the binary data to a Blob
    var arraybuffer = new ArrayBuffer(image_data.length);
    var view = new Uint8Array(arraybuffer);
    for (var i=0; i<image_data.length; i++) {
        view[i] = image_data.charCodeAt(i) & 0xff;
    }
    try {
        // This is the recommended method:
        var blob = new Blob([arraybuffer], {type: ''application/octet-stream''});
    } catch (e) {
        // The BlobBuilder API has been deprecated in favour of Blob, but older
        // browsers don''t know about the Blob constructor
        // IE10 also supports BlobBuilder, but since the `Blob` constructor
        //  also works, there''s no need to add `MSBlobBuilder`.
        var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
        bb.append(arraybuffer);
        var blob = bb.getBlob(''application/octet-stream''); // <-- Here''s the Blob
    }

    // Use the URL object to create a temporary URL
    var url = (window.webkitURL || window.URL).createObjectURL(blob);
    location.href = url; // <-- Download!
};

Documentación relevante

• atob
• Matrices tipografiadas
• URL.createObjectURL
• Blob y BlobBuilder

Answer 3

Supongo que se necesita una etiqueta de img como elemento secundario de una etiqueta a, de la siguiente manera:

<a download="YourFileName.jpeg" href="data:image/jpeg;base64,iVBO...CYII=">
    <img src="data:image/jpeg;base64,iVBO...CYII="></img>
</a>

o

<a download="YourFileName.jpeg" href="/path/to/OtherFile.jpg">
    <img src="/path/to/OtherFile.jpg"></img>
</a>

Solo utilizar la etiqueta a como se explica en el # 15 no funcionó para mí con la última versión de Firefox y Chrome, pero poner los mismos datos de imagen en las etiquetas a.href e img.src funcionó para mí.

De JavaScript podría generarse así:

var data = canvas.toDataURL("image/jpeg");

var img = document.createElement(''img'');
img.src = data;

var a = document.createElement(''a'');
a.setAttribute("download", "YourFileName.jpeg");
a.setAttribute("href", data);
a.appendChild(img);

var w = open();
w.document.title = ''Export Image'';
w.document.body.innerHTML = ''Left-click on the image to save it.'';
w.document.body.appendChild(a);

Answer 4

puede usar el atributo de descarga en una etiqueta a ...

<a href="data:image/jpeg;base64,/9j/4AAQSkZ..." download="filename.jpg"></a>

ver más: https://developer.mozilla.org/en/HTML/element/a#attr-download