JavaScriptを使用して画像をダウンロードする方法

JavaScript は、ブラウザやサーバーで動的な効果を作成するために使用できる、広く使用されているスクリプト言語です。画像は Web アプリケーションでは一般的なメディア タイプであるため、画像をダウンロードする方法を知っておくことが重要です。この記事では、JavaScript を使用して画像をダウンロードする方法を説明します。

JavaScript を使用して画像をダウンロードする手順:

ステップ 1: 画像の URL を取得する

画像をダウンロードするには、まず画像の URL を取得する必要があります。 JQuery またはネイティブ JavaScript を使用して、image 要素の src 属性を取得できます。例:

let imageUrl = $('img#myImageId').attr('src');

または

let image = document.getElementById('myImageId');
let imageUrl = image.src;

ステップ 2: HTTP リクエストの作成

XMLHttpRequest (XHR) オブジェクトを使用して、HTTP リクエストをサーバーに送信し、応答を取得します。画像をダウンロードするには、GET リクエストを作成し、リクエストされた URL として画像の URL を指定する必要があります。以下は、ネイティブ JavaScript を使用して XHR オブジェクトを作成するコード例です。

let xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';

responseType 属性が「blob」に設定されていることに注意してください。この設定は、応答が Blob オブジェクトとして返される必要があることを示します。 Blob オブジェクトは、画像、オーディオ、ビデオの処理に使用できる、ファイルのようなバイナリのラージ オブジェクトです。

ステップ 3: HTTP リクエストを送信する

HTTP リクエストを送信するには、XHR オブジェクトの send() メソッドを呼び出す必要があります。以下は、ネイティブ JavaScript を使用して HTTP リクエストを送信するコード例です。

xhr.onload = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 图片下载成功
  }
};

xhr.send();

send() メソッドを呼び出す前に、リクエストの完了後に呼び出されるコールバック関数が登録されていることに注意してください。この関数は、リクエストのステータス コードと応答データをチェックして、イメージのダウンロードが成功したかどうかを判断できます。

ステップ 4: 画像を保存する

リクエストが成功したら、応答データを画像ファイルとして保存する必要があります。 BLOB オブジェクトは、FileReader オブジェクトを使用して DataURL 文字列として読み取ることができます。

let reader = new FileReader();
reader.onload = function() {
  let dataUrl = reader.result; // 获取DataURL字符串
  let a = document.createElement('a');
  a.href = dataUrl;
  a.download = 'myImage.jpg'; // 设置文件名
  document.body.appendChild(a);
  a.click(); // 模拟点击下载链接
};

reader.readAsDataURL(xhr.response);

上記のコードは、DataURL 文字列を href 属性として含むダウンロード リンクを作成します。ユーザーがリンクをクリックすると、「myImage.jpg」というファイルがダウンロードされます。

この時点で、JavaScript を使用して画像をダウンロードするすべての手順が完了しました。完全なコードは次のとおりです。

let imageUrl = $('#myImageId').attr('src');
let xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let reader = new FileReader();
    reader.onload = function() {
      let dataUrl = reader.result;
      let a = document.createElement('a');
      a.href = dataUrl;
      a.download = 'myImage.jpg';
      document.body.appendChild(a);
      a.click();
    };

    reader.readAsDataURL(xhr.response);
  }
};

xhr.send();

概要

この記事では、JavaScript を使用して画像をダウンロードする方法の手順を紹介します。 HTTP リクエストを送信する前に、画像の URL を取得し、XHR オブジェクトの responseType 属性を「blob」に設定する必要があることに注意してください。応答データが返された場合、FileReader オブジェクトを使用してそれを DataURL 文字列に変換し、ダウンロード リンクの href 属性として表すことができます。

画像のダウンロードは、Web アプリケーションでは一般的な機能です。 JavaScriptを使用することで画像を簡単にダウンロードしてブラウザ上で表示することができます。この記事で説明する手順は、ほとんどの最新の Web ブラウザで動作するため、お役に立てれば幸いです。

以上がJavaScriptを使用して画像をダウンロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。