web-dev-qa-db-ja.com

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/

ただし、機能していないようです。ユーザーのアクションによってトリガーされる必要がありますか？それとも、なぜ機能しなかったのですか？

javascriptjquerydownload
46
Derek 朕會功夫

問題は、jQueryが<a>要素のネイティブclickイベントをトリガーしないため、ナビゲーションが発生しない（<a>の通常の動作）ため、それを行う必要があることです。手動で。他のほとんどすべてのシナリオでは、ネイティブDOMイベントがトリガーされます（少なくとも試行されます-試行/キャッチで行われます）。

手動でトリガーするには、次を試してください：

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 ) ) {
71
Ian

@Ian 説明 のように、問題はjQueryのclick()がネイティブのものと同じではないことです。

したがって、jQueryの代わりにVanilla-jsの使用を検討してください。

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

デモ

65
Oriol