Navigateur / HTML Forcer le téléchargement de l'image à partir de src = "data: image / jpeg; base64…"

Je génère une image côté client et je l'affiche avec du HTML comme ceci:

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

Je souhaite offrir la possibilité de télécharger l'image générée.

Comment puis-je réaliser que le navigateur ouvre une boîte de dialogue de sauvegarde de fichier (ou simplement télécharger l'image comme le ferait Chrome ou Firefox dans le dossier de téléchargement) qui permet à l'utilisateur d'enregistrer l'image sans faire un clic droit et de l'enregistrer sous l'image?

Je préférerais une solution sans interaction avec le serveur. Je suis donc conscient que ce serait possible si je télécharge d'abord l'image puis que je lance le téléchargement.

Merci beaucoup!

Remplacez simplement image/jpegpar application/octet-stream. Le client ne reconnaîtrait pas l'URL en tant que ressource en ligne et afficherait une boîte de dialogue de téléchargement.

Une solution JavaScript simple serait:

//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, 

Une autre méthode consiste à utiliser 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!
};

Documentation pertinente

• atob
• Tableaux typés
• URL.createObjectURL
• Blob et BlobBuilder

vous pouvez utiliser l'attribut de téléchargement sur une balise a ...

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

voir plus: https://developer.mozilla.org/en/HTML/element/a#attr-download

Je suppose qu'une img balise est nécessaire comme un enfant d'une une étiquette, de la façon suivante:

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

ou

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

Seulement en utilisant l' une balise comme expliqué dans # 15 n'a pas fonctionné pour moi avec la dernière version de Firefox et Chrome, mais mettre les mêmes données d'image dans les deux a.href et img.src balises travaillé pour moi.

À partir de JavaScript, il pourrait être généré comme ceci:

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

Jetez un œil à FileSaver.js . Il fournit une saveAsfonction pratique qui prend en charge la plupart des bizarreries spécifiques au navigateur.