JavaScript で画像を Base64 文字列にエンコードするにはどうすればよいですか?

JavaScript で画像を Base64 文字列にエンコードする

質問:

画像を Base64 でエンコードされた文字列に変換するにはどうすればよいですか? JavaScriptの文字列？この変換は、さらに処理するために画像をサーバーに送信するために必要です。

解決策:

アプローチ 1: FileReader

FileReader API を利用すると、XMLHttpRequest を開始して画像を BLOB として取得し、処理することができます。

function toDataURL(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function() {
    let 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', dataUrl => {
  console.log('RESULT:', dataUrl);
});

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