JavaScript で画像を Base64 文字列に変換するにはどうすればよいですか?

JavaScript で画像を Base64 文字列に変換する

画像を Base64 文字列に変換することは、Web 開発における一般的なタスクであり、特に画像をサーバーに送信する必要があります。これを実現するための 2 つの一般的な JavaScript アプローチを次に示します。

1. FileReader アプローチ:

このアプローチでは、FileReader API を利用して画像を BLOB として読み取り、データ URL:

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

2 に変換します。 HTML キャンバスのアプローチ:

もう 1 つのオプションは、HTML キャンバスを作成し、その上に画像を描画し、キャンバスをデータ URL に変換することです:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Resize the canvas to the image's size
canvas.width = image.width;
canvas.height = image.height;

// Draw the image onto the canvas
ctx.drawImage(image, 0, 0);

// Convert the canvas to a data URL
const dataUrl = canvas.toDataURL('image/jpeg');

以上がJavaScript で画像を Base64 文字列に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。