web-dev-qa-db-fra.com

Télécharger l'image avec JavaScript

À l'heure actuelle, j'ai un canvas et je veux l'enregistrer au format PNG. Je peux le faire avec toutes ces API de système de fichiers sophistiquées et sophistiquées, mais je ne les aime pas vraiment.

Je sais s’il existe un lien avec l’attribut download:

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

il téléchargera le fichier si l'utilisateur clique dessus. C'est pourquoi j'ai eu ceci:

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

Démo: http://jsfiddle.net/DerekL/Wx7wn/

Cependant, cela ne semble pas fonctionner. Doit-il être déclenché par une action de l'utilisateur? Ou alors pourquoi ça n'a pas marché?

javascriptjquerydownload
46
Derek 朕會功夫

Le problème est que jQuery ne déclenche pas l'événement natif click pour <a> _ éléments pour que la navigation ne se produise pas (comportement normal d'un <a>), vous devez donc le faire manuellement. Pour presque tous les autres scénarios, l'événement DOM natif est déclenché (du moins tenté - il s'agit d'un try/catch).

Pour le déclencher manuellement, essayez:

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/

Ligne pertinente dans la source jQuery actuelle: 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

Comme @Ian expliqué , le problème est que la click() de jQuery n’est pas la même que celle native.

Par conséquent, envisagez d'utiliser Vanilla-js au lieu de jQuery:

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

démo

65
Oriol