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

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

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

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

このページの目次

リンクから手動ダウンロードするやり方
- JavaScriptでダウンロードリンクを作るコード例
- jQueryでダウンロードリンクを作るコード例
自動で画像ダウンロードを行う方法＆コード例
- JavaScriptだけで自動ダウンロードするコード例
- jQueryで自動ダウンロードするコード例
画像の手動DL・自動DLのまとめ

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

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

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

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

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

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

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

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

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

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

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

/** URLから画像DLリンクを作る関数 */
function downloadFromUrl(url, fileName){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function(e){
    if(this.status == 200){
      var urlUtil = window.URL || window.webkitURL;
      var imgUrl = urlUtil.createObjectURL(this.response);
      var link = document.createElement('a');
      link.href=imgUrl;
      link.download = fileName;
      link.innerHTML = 'ここからダウンロードできるよ';
      document.body.appendChild(link);
    }
  };
  xhr.send();
}

/// URLからダウンロードリンク作成
downloadFromUrl('path/to/img.png', 'img.png');

/** URLから画像DLリンクを作る関数 */

function downloadFromUrl(url, fileName){

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'blob';

xhr.onload = function(e){

if(this.status == 200){

var urlUtil = window.URL || window.webkitURL;

var imgUrl = urlUtil.createObjectURL(this.response);

var link = document.createElement('a');

link.href=imgUrl;

link.download = fileName;

link.innerHTML = 'ここからダウンロードできるよ';

document.body.appendChild(link);

}

};

xhr.send();

}

/// URLからダウンロードリンク作成

downloadFromUrl('path/to/img.png', 'img.png');

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

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

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

MDN Web Docs

URL.createObjectURL

https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL

URL.createObjectURL() 静的メソッドは、引数で指定されたオブジェクトを表す URL を含む DOMString を生成します。 URL の寿命は、それを作成したウィンドウ内の document と結び付けられています。新しいオブジェクトの URL は、指定された File オブジェクトか Blob オブジェクトを表します。

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

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

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

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

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

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

/** URLから画像DLリンクを作る関数 */
function downloadFromUrl(url, fileName){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function(e){
    if(this.status == 200){
      var urlUtil = window.URL || window.webkitURL;
      var imgUrl = urlUtil.createObjectURL(this.response);
      var link = $('<a>', {
        href: imgUrl, download: fileName, 
      }).html('ここからダウンロードできるよ');
      $('body').append(link);
    }
  };
  xhr.send();
}

/// URLからダウンロードリンク作成
downloadFromUrl('path/to/img.png', 'img.png');

/** URLから画像DLリンクを作る関数 */

function downloadFromUrl(url, fileName){

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'blob';

xhr.onload = function(e){

if(this.status == 200){

var urlUtil = window.URL || window.webkitURL;

var imgUrl = urlUtil.createObjectURL(this.response);

var link = $('<a>', {

href: imgUrl, download: fileName,

}).html('ここからダウンロードできるよ');

$('body').append(link);

}

};

xhr.send();

}

/// URLからダウンロードリンク作成

downloadFromUrl('path/to/img.png', 'img.png');

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

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

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

肝心なのはここから

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

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

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

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

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

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

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

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

▼ 純粋JavaScriptでのコード例

/** URLから自動DLさせる関数 */
function downloadFromUrlAutomatically(url, fileName){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function(e){
    if(this.status == 200){
      var urlUtil = window.URL || window.webkitURL;
      var imgUrl = urlUtil.createObjectURL(this.response);
      var link = document.createElement('a');
      link.href=imgUrl;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link)
    }
  };
  xhr.send();
}

/// URLから自動ダウンロードさせる
downloadFromUrlAutomatically('path/to/img.png', 'img.png');

/** URLから自動DLさせる関数 */

function downloadFromUrlAutomatically(url, fileName){

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'blob';

xhr.onload = function(e){

if(this.status == 200){

var urlUtil = window.URL || window.webkitURL;

var imgUrl = urlUtil.createObjectURL(this.response);

var link = document.createElement('a');

link.href=imgUrl;

link.download = fileName;

document.body.appendChild(link);

link.click();

document.body.removeChild(link)

}

};

xhr.send();

}

/// URLから自動ダウンロードさせる

downloadFromUrlAutomatically('path/to/img.png', 'img.png');

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

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

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

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

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

/** URLから自動ダウンロードする関数 */
function downloadFromUrlAutomatically(url, fileName){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function(e){
    if(this.status == 200){
      var urlUtil = window.URL || window.webkitURL;
      var imgUrl = urlUtil.createObjectURL(this.response);
      var link = $('<a>', {
        href: imgUrl, download: fileName, 
      });
      $('body').append(link);
      link[0].click();
      link.remove();
    }
  };
  xhr.send();
}

/// 画像を自動ダウンロード
downloadFromUrlAutomatically('path/to/img.png', 'img.png');

/** URLから自動ダウンロードする関数 */

function downloadFromUrlAutomatically(url, fileName){

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'blob';

xhr.onload = function(e){

if(this.status == 200){

var urlUtil = window.URL || window.webkitURL;

var imgUrl = urlUtil.createObjectURL(this.response);

var link = $('<a>', {

href: imgUrl, download: fileName,

});

$('body').append(link);

link[0].click();

link.remove();

}

};

xhr.send();

}

/// 画像を自動ダウンロード

downloadFromUrlAutomatically('path/to/img.png', 'img.png');

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

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

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

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

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

JavaScriptで手動ダウンロード
jQueryで手動ダウンロード
JavaScriptで自動ダウンロード
jQueryで自動ダウンロード

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

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

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

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

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

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

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

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

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

関連記事

プロフィール

人気記事

検索してみる