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

JavaScript を使用して画像を Base64 文字列に変換する

要件:

変換する必要があります画像を Base64 文字列に変換して送信します。

解決策:

JavaScript は、画像から Base64 への変換にいくつかのアプローチを提供します。

1. FileReader アプローチ:

このアプローチでは、FileReader API (具体的には readAsDataURL()) を利用して、画像 URL からロードされた BLOB を dataURL に変換します。

コード例:

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)
})

このアプローチには、XMLHttpRequest を使用して画像を BLOB として取得し、FileReader を使用してそれを dataURL に変換します。

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