Wie erzwinge ich Browser-Downloads für Bilder mithilfe clientseitiger Programmierung?

Browser-Downloads für Bilder mithilfe clientseitiger Programmierung erzwingen

Hintergrund

Beim Klicken auf B. eine Excel-Tabelle oder andere herunterladbare Dateien, starten Browser den Downloadvorgang normalerweise nahtlos. Es besteht jedoch die Notwendigkeit, dieses Verhalten speziell für Bilddateien zu replizieren.

Implementieren von Bild-Downloads

Allein mit der clientseitigen Programmierung können Sie Bild-Downloads wie folgt erreichen :

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    if (element.innerHTML == "Image") {
        var name = element.nameProp;
        var address = element.href;
        saveImageAs1(element.nameProp, element.href);
        return false; // Prevent default action and stop event propagation
    }
    else
        return true;
};

function saveImageAs1(name, address) {
    if (confirm('you wanna save this image?')) {
        window.win = open(address);
        setTimeout('win.document.execCommand("SaveAs")', 100);
        setTimeout('win.close()', 500);
    }
}

Dieser Code fängt Klickereignisse auf dem Bildelement ab und fordert den Benutzer auf, es mithilfe eines Dialogfelds „Speichern unter“ zu speichern Box.

Fall von Excel-Downloads

Bei Excel-Downloads übernehmen Browser den Downloadvorgang intern. Sie identifizieren den Dateityp anhand des MIME-Typs und lösen ohne zusätzliche Programmierung das entsprechende Download-Verhalten aus.

HTML5-Attribut „Download“

Neuere Browser unterstützen jedoch das Attribut „Download“ für Elemente, die eine bequemere Möglichkeit zum Starten von Bilddownloads bieten:

<a href="http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>