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

Question

Je suis de la génération d'une image sur le côté client et je l'affiche avec le HTML comme ceci:

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

Je veux offrir la possibilité de télécharger l'Image générée.

Comment puis-je me rends compte que le navigateur est l'ouverture d'un fichier enregistrer dialoge (ou simplement téléchargez l'image comme chrome ou firefox pour le dossier de téléchargement ne) qui permet à l'utilisateur d'enregistrer l'image sans faire un clic droit et enregistrer comme sur l'image?

Je préfère une solution sans serveur d'interaction. Donc, je suis conscient qu'il serait possible que si j'ai d'abord télécharger l'Image et ensuite commencer le téléchargement.

Merci beaucoup!

Answer 1

Il suffit de remplacer image/jpeg avec application/octet-stream. Le client ne reconnaît pas l'URL en ligne-mesure de la ressource, et invite une boîte de dialogue de téléchargement.

Un simple JavaScript solution serait : http://jsfiddle.net/5whKM/

//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 : http://jsfiddle.net/5whKM/13/

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!
};

La documentation pertinente

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

Je n'ai pas encore essayé, mais un filesystem:-URL peut également travailler (Chrome seulement, pour le moment). Voir HTML5 Rocks pour plus d'informations.

Answer 2

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

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

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

Answer 3

Je suppose qu'un tag img est nécessaire en tant qu'enfant d' un tag, de la manière 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="http://stackoverflow.com/path/to/OtherFile.jpg">
    <img src="/path/to/OtherFile.jpg"></img>
</a>
 

Seulement en utilisant la 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 balises a.href et img.src travaillé pour moi.

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