JavaScriptで画像をダウンロードする

JavaScriptのfetchとBlobオブジェクトを使って画像をダウンロードする方法です。例を以下に示します。

function downloadImage(url, filename) {
fetch(url)
.then(response => response.blob())
.then(blob => {
// 创建一个a标签
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = filename;
// 模拟点击下载
a.click();
// 清除URL对象
window.URL.revokeObjectURL(a.href);
});
}
// 调用downloadImage函数
downloadImage('https://example.com/image.jpg', 'image.jpg');

このサンプルでは、`downloadImage` 関数は 2 つのパラメータを受け取ります。画像の URL と、ダウンロード後のファイル名です。`fetch` を使用して画像のレスポンスを取得します。`blob` メソッドを使用して、レスポンスを `Blob` オブジェクトに変換します。続いて、`createObjectURL` メソッドを使用して `Blob` オブジェクトを URL に変換し、その URL を `a` タグの `href` 属性に割り当てます。同時に、ブラウザにダウンロード ダイアログを表示するために、`download` 属性にファイル名を割り当てます。最後に、`a` タグのクリックをシミュレートしてダウンロード アクションをトリガーし、`revokeObjectURL` メソッドを呼び出して URL オブジェクトのメモリを解放します。