Загрузить изображение с помощью JavaScript

Сейчас у меня есть canvas, и я хочу сохранить его как PNG. Я могу сделать это со всеми этими сложными API файловой системы, но мне они не нравятся.

Я знаю, есть ли ссылка с атрибутом download на нем:

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

он загрузит файл, если пользователь нажмет на него. Поэтому я придумал это:

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

Демо: http://jsfiddle.net/DerekL/Wx7wn/

Однако он не работает. Нужно ли запускать действие пользователя? Или иначе, почему это не сработало?

Ответы

Ответ 1

Проблема заключается в том, что jQuery не запускает собственное click событие для <a> элементов, так что навигация не происходит (нормальное поведение <a>), поэтому вам нужно сделать это вручную. Для почти всех других сценариев запускается собственное DOM-событие (по крайней мере, попытка - в try/catch).

Чтобы запустить его вручную, попробуйте:

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/

Соответствующая строка в текущем источнике 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 ) ) {

Ответ 2

Как объясняется @Ian , проблема в том, что jQuery click() не совпадает с исходным.

Поэтому рассмотрим использование vanilla-js вместо jQuery:

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

Демо