Pobierz obraz za pomocą JavaScript

W tej chwili mam {[2] } i chcę zapisać go jako PNG. Mogę to zrobić z tymi wszystkimi fantazyjnymi skomplikowanymi API systemu plików, ale tak naprawdę ich nie lubię.

Wiem czy jest na nim link z download atrybutem: 

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

Pobierze plik, jeśli użytkownik go kliknie. Dlatego wymyśliłem to: 

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

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

Jednak, to nie wydaje się działać. Czy musi być wyzwalany przez akcję użytkownika? Albo dlaczego nie zadziałało?

Author: Derek 朕會功夫, 2013-06-26
Source

2 answers

Problem polega na tym, że jQuery nie uruchamia natywnego zdarzenia click dla elementów <a>, aby nawigacja nie miała miejsca( normalne zachowanie <a>), więc musisz to zrobić ręcznie. W prawie wszystkich innych scenariuszach uruchamiane jest natywne Zdarzenie DOM(przynajmniej próba-to w try/catch).

Aby uruchomić go ręcznie, spróbuj: 

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/

Odpowiedni wiersz w bieżącym źródle 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 ) ) {
 66
Author: Ian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-19 15:09:44

Jak wyjaśnił @ Ian , problem polega na tym, że click() jQuery nie jest tym samym, co natywny.

Dlatego rozważ użycie vanilla-js zamiast 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

 47
Author: Oriol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:16