it-swarm.com.de

Browser / HTML Bild-Download von src = "data: image / jpeg; base64 ..." erzwingen

Ich erstelle 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 ein Dialogfeld zum Speichern von Dateien öffnet (oder einfach das Bild wie chrome oder firefox in den Download-Ordner) herunterlädt, mit dem der Benutzer das Bild speichern kann ohne Rechtsklick und Speichern unter auf das Bild?

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

Vielen Dank!

81
alex

Ersetzen Sie einfach image/jpeg mit application/octet-stream. Der Client erkennt die URL nicht als inline-fähige Ressource und fordert zum Herunterladen 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

112
Rob W

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

86
Bruce Aldridge

Ich vermute, dass ein img -Tag als Kind eines a -Tags wie folgt benötigt wird:

<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 das a Tag zu verwenden, wie in # 15 erklärt, hat bei mir mit der neuesten Version von Firefox und Chrome nicht funktioniert, aber die gleichen Bilddaten in beide a.href eingefügt und img.src Tags haben bei mir funktioniert.

Aus JavaScript könnte es so 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);
14
user3521208

Schauen Sie sich FileSaver.js an. Es bietet eine praktische saveAs -Funktion, die die meisten browserspezifischen Macken behebt.

5
jesal