Pobierz obraz z JavaScript

Question

W tej chwili mam canvas i chcę go zapisać jako PNG. Mogę to zrobić za pomocą tych wszystkich skomplikowanych API systemów plików, ale tak naprawdę ich nie lubię.

wiem, czy istnieje związek z atrybutem download na nim:

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

będzie pobrać plik, gdy użytkownik kliknie na nim. Dlatego wpadłem na to:

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

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

Jednak to nie wydają się działać. Czy musi to być spowodowane działaniem użytkownika? Albo dlaczego to nie zadziałało?

Answer 1

Problemem jest to, że jQuery nie wyzwala rodzimą click imprezę dla <a> elementów, dzięki czemu nawigacja nie stanie (normalne zachowanie w <a>), więc trzeba to zrobić ręcznie. W prawie wszystkich innych scenariuszach wywoływane jest rodzime zdarzenie DOM (przynajmniej próbowano - jest w próbie/haczyku).

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/

odpowiedniej linii w obecnym źródła 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

Jak @Ian explained, problem jest to, że jQuery's click() nie jest tym samym, co macierzysty.

Dlatego należy rozważyć użycie wanilia-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