Browser / HTML Download des Bildes von src erzwingen = "data: image / jpeg; base64…"

Ich generiere ein Bild auf der Clientseite und zeige es mit HTML wie folgt an:

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

Ich möchte die Möglichkeit bieten, das generierte Bild herunterzuladen.

Wie kann ich feststellen, dass der Browser eine Datei zum Speichern von Dialogen öffnet (oder das Bild einfach wie Chrome oder Firefox in den Download-Ordner herunterlädt), mit der der Benutzer das Bild speichern kann, ohne mit der rechten Maustaste klicken und es wie auf dem Bild speichern zu müssen?

Ich würde eine Lösung ohne Serverinteraktion bevorzugen. Ich bin mir also bewusst, dass es möglich wäre, wenn ich zuerst das Bild hochlade und dann den Download starte.

Vielen Dank!

Ersetzen Sie einfach image/jpegmit application/octet-stream. Der Client erkennt die URL nicht als Inline-fähige Ressource und fordert einen Download-Dialog auf.

Eine einfache JavaScript-Lösung wäre:

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

Eine andere Methode ist die Verwendung eines 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!
};

Relevante Dokumentation

• atob
• Typisierte Arrays
• URL.createObjectURL
• Blob und BlobBuilder

Sie können das Download-Attribut für ein Tag verwenden ...

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

Weitere Informationen : https://developer.mozilla.org/en/HTML/element/a#attr-download

Ich denke, ein img- Tag wird als Kind eines Tags auf folgende Weise benötigt:

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

oder

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

Nur die Verwendung eines in # 15 erläuterten a- Tags funktionierte bei der neuesten Version von Firefox und Chrome nicht, aber das Einfügen der gleichen Bilddaten in a.href- und img.src- Tags funktionierte bei mir.

Aus JavaScript könnte es folgendermaßen generiert werden:

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

Schauen Sie sich FileSaver.js an . Es bietet eine praktische saveAsFunktion, die sich um die meisten browserspezifischen Macken kümmert.