【JavaScript】URLから画像ファイルをダウンロードする

JavaScript のコードから画像ファイルをダウンロードする方法についてです。
Web だったら、通常は画像右クリックで表示されるメニューからダウンロードができますが、諸事情あってその方法が使えなかったので、実装しました。

参考にさせていただいた記事はこちらから。

How to download image in reactjs? – Stack Overflow
https://stackoverflow.com/questions/57056741/how-to-download-image-in-reactjs

サンプルコードはこちら。

downloadImage = (url) => {
  const matches = url.match(/[A-Za-z0-9\-_]+\.\w+$/);

  fetch(url, {
    method: 'GET',
    headers: {},
  })
    .then((response) => {
      response.arrayBuffer().then((buffer) => {
        const url = window.URL.createObjectURL(new Blob([buffer]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', matches[0]);
        document.body.appendChild(link);
        link.click();
      });
    })
    .catch((err) => {
      console.log(err);
    });
}

downloadImage() という関数内で、画像ダウンロードの処理を行っています。
使用する際には、引数にダウンロードしたい画像 URL を渡してください。

上記を実行すると、ダウンロードのダイアログが表示されるので、そこから画像をダウンロードできます！
念のため、ダウンロードした画像を開いてみましたが、画像の一部が壊れていたり、画質が粗くなっていたりもしていませんでした。
また、この方法だと画像だけでなく動画も保存できましたので、もしコード上でURLから画像をダウンロードする際には、この方法がおすすめです。

以上、JavaScript でURLから画像をダウンロードする方法についてでした。
ご参考になれば幸いです。