it-swarm.com.de

Bild mit JavaScript herunterladen

Im Moment habe ich ein canvas und ich möchte es als PNG speichern. Ich kann es mit all diesen ausgefallenen komplizierten Dateisystem-APIs machen, aber ich mag sie nicht wirklich.

Ich weiß, ob ein Link mit dem Attribut download vorhanden ist:

<a href="img.png" download="output.png">Download</a>

die Datei wird heruntergeladen, wenn der Benutzer darauf klickt. Deshalb habe ich mir folgendes ausgedacht:

$("<a>")
    .attr("href", "img.png")
    .attr("download", "output.png")
    .appendTo("body")
    .click()
    .remove();

Demo: http://jsfiddle.net/DerekL/Wx7wn/

Es scheint jedoch nicht zu funktionieren. Muss es durch eine Benutzeraktion ausgelöst werden? Oder warum hat es nicht funktioniert?

46

Das Problem ist, dass jQuery das native click -Ereignis für <a> - Elemente nicht auslöst, sodass keine Navigation stattfindet (das normale Verhalten eines <a>) um das manuell zu tun. In fast allen anderen Szenarien wird das native DOM-Ereignis ausgelöst (zumindest versucht - es befindet sich in einem Versuch/Fang).

Um es manuell auszulösen, versuchen Sie:

var a = $("<a>")
    .attr("href", "http://i.stack.imgur.com/L8rHf.png")
    .attr("download", "img.png")
    .appendTo("body");

a[0].click();

a.remove();

DEMO: http://jsfiddle.net/HTggQ/

Relevante Zeile in der aktuellen jQuery-Quelle: https://github.com/jquery/jquery/blob/1.11.1/src/event.js#L332

if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&
        jQuery.acceptData( elem ) ) {
71
Ian

Wie bei @Ian erklärt ist das Problem, dass jQueries click() nicht mit der nativen Funktion identisch ist.

Erwägen Sie daher die Verwendung von Vanilla-js anstelle von jQuery:

var a = document.createElement('a');
a.href = "img.png";
a.download = "output.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Demo

65
Oriol