JavaScript を使用して画像の Base64 データ URL を取得するにはどうすればよいですか?

JavaScript を使用して画像データ URL を取得する方法

Web 開発では、Web ページ上の画像のコンテンツにアクセスすると便利なことがよくあります。これは JavaScript を通じて実現できるため、開発者は画像データを個別にダウンロードすることなく操作および利用できます。

そのような使用例の 1 つは、ブラウザーによって既にロードされている画像の Base64 エンコード表現の取得を含みます。これは、Mozilla Firefox で Greasemonkey スクリプトを使用する場合に特に有益です。

画像データ URL を取得するには、canvas 要素が使用されます。使用できるコードは次のとおりです:

function getBase64Image(img) {
  // Create a canvas with dimensions matching the image
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  // Copy the image data onto the canvas
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  // Get the base64-encoded image
  const dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

ただし、このメソッドはページと同じドメインの画像に対してのみ機能することに注意してください。あるいは、画像タグにcrossOrigin="anonymous" 属性を指定して、サーバーが CORS をサポートしていることを確認することもできます。

この方法では、元のファイルではなく、再エンコードされたバージョンの画像が提供されることに注意してください。同じ結果を得るには、Kaido の回答などの他の方法を使用することを検討してください。

以上がJavaScript を使用して画像の Base64 データ URL を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。