JavaScriptでリンクから画像を手動・自動ダウンロードする方法

例えば画像素材サイトとかだと・・・
素材ページに飛んだら、自動でダウンロードみたいな機能がついてると思います。

こういう自動ダウンロードは意外と簡単に実装できます。

ここでは JavaScript、jQuery 両方でのやり方・コード例 をまとめてみました。

リンクから手動ダウンロードするやり方

まず1つめは画像のDLリンクを生成する方法について

画像のURLではなく、データ自体をダウンロードするリンクを作るということです。

その手順を箇条書きすると、こんな感じ

  1. 画像データをURL化する
  2. そのURLを元にリンク要素作成
  3. 生成したリンクを埋め込む

大事なのは「画像データをURL化する」というところですね。

JavaScript、jQueryを使ったやり方は次の通り

JavaScriptでダウンロードリンクを作るコード例

まずはjQueryとかライブラリを使わず、素のJSでやる方法について

コード例だけ載せると次みたいに実装できます。

▼ 純粋なJavaScitpだけでのコード例

このコードで大事なポイントは次の3つです。

  • XMLHttpRequest を使う
    まずURLから画像をダウンロード。
    ただしバイナリとして受信しないので responseType  に 'blob'  を指定している
  • バイナリからURLを作る
    上コードの urlUtil.createObjectURL(this.response)  の部分。こうすると画像データをエンコードしたURLが生成できる
  • リンク要素を作成
    リンクの href  に画像データのURL、 download  にダウンロードしたときのファイル名を指定

ちなみに createObjectURL  については次ページ参照

3つのポイントさえ気を付ければ、DLリンクも簡単に作れます。

jQueryでダウンロードリンクを作るコード例

お次はjQueryで画像のダウンロードリンクを作る方法について

今紹介したコードをjQuery風に置き換えればいいだけです。

ただし Ajax だとバイナリを受け取れないので、 XMLHttpRequest  を使います。

▼ 実際のコード例は次の通り

何度も言うように、Ajax ではバイナリデータの送受信ができないので要注意!

面倒でも XMLHttpRequest  を使う必要があります。(少しメンドイ)

自動で画像ダウンロードを行う方法&コード例

肝心なのはここから

次は自動で画像ダウンロードを行う方法についてです。

なんか難しそうですが、今方法した方法を応用すれば簡単にできます。

そのやり方を箇条書きすると・・・

  1. XMLHttpRequest でURLからデータ取得
  2. ダウンロードリンクを作る
  3. そのリンクでクリックイベントを発生
  4. 自動で画像がダウンロードされる

この手順の「クリックイベントを発生」がミソ

JavaScript(jQuery)側でイベントを発生させるのが重要です。

JavaScriptだけで自動ダウンロードするコード例

ライブラリを使わず、純粋なJSだけで行うコード例は次の通りです。

▼ 純粋JavaScriptでのコード例

上コードの link.click();  の部分がポイント

クリックしたらリンク要素は不要なので、削除しています。

jQueryで自動ダウンロードするコード例

お次は jQuery で画像の自動ダウンロードを行う方法とコード例

▼ jQueryでのコード例はコチラ

このコードの場合は、 link[0].click();  とするのがポイント

クリックイベントを link.trigger('click');  としても、ダウンロードが始まりません。

リンククリックという動作をさせるには link[0].click();  としないとダメです。

画像の手動DL・自動DLのまとめ

ここまでで紹介した方法まとめ

以上、JavaScript(jQuery)で手動・自動ダウンロードする方法でした。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください