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

Estoy generando una imagen en el lado del cliente y la muestro con HTML como este:

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

Quiero ofrecer la posibilidad de descargar la Imagen generada.

¿Cómo puedo darme cuenta de que el navegador está abriendo un diálogo de guardado de archivos (o simplemente descargar la imagen como Chrome o Firefox en la carpeta de descarga sería suficiente) que permite al usuario guardar la imagen sin hacer clic derecho y guardar como en la imagen?

Preferiría una solución sin interacción con el servidor. Entonces soy consciente de que sería posible si primero subo la imagen y luego inicio la descarga.

¡Muchas gracias!

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

Una solución de JavaScript simple 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 escritas
• URL.createObjectURL
• Blob y BlobBuilder

puede utilizar 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

Supongo que se necesita una etiqueta img como hijo 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>

Sólo mediante el una etiqueta como se explica en el # 15 no funcionó para mí con la última versión de Firefox y Chrome, pero poniendo los mismos datos de imagen tanto en a.href y img.src etiquetas trabajado para mí.

Desde JavaScript se podría generar 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);

Eche un vistazo a FileSaver.js . Proporciona una saveAsfunción útil que se encarga de la mayoría de las peculiaridades específicas del navegador.