Bild mit JavaScript herunterladen

Question

Ich habe gerade eine canvas und möchte sie als PNG speichern. Ich kann es mit all diesen komplizierten Dateisystem API, aber ich mag sie nicht wirklich.

ich wissen, ob es eine Verbindung mit download Attribut ist:

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

es wird die Datei herunterladen, wenn der Benutzer darauf klickt. Deshalb kam ich mit auf den Punkt:

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

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

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

Answer 1

Das Problem ist, dass jQuery nicht die native click Ereignis für <a> Elemente auslöst, so dass die Navigation nicht geschieht (das normale Verhalten eines <a>), so müssen Sie dies manuell tun. Für fast alle anderen Szenarien wird das systemeigene DOM-Ereignis ausgelöst (zumindest versucht - es ist in einem try/catch).

Um es manuell auslösen, versuchen:

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 Linie in Stromquelle jQuery: 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)) { 

Answer 2

Als @Ian explained, das Problem ist, dass jQuerys click() ist nicht das gleiche wie das native.

daher prüfen, mit Vanille-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