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

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

リモート サーバーと対話する場合、または JavaScript で画像データを処理する場合、画像を Base64 文字列に変換すると、必要性。 Base64 文字列はバイナリ データをテキスト形式で表し、ネットワーク上で画像を安全に送信できるようにします。

この変換にはいくつかの手法が使用できます。

1. FileReader アプローチ:

このアプローチには、XMLHttpRequest を使用して画像を BLOB としてロードし、次に FileReader API の readAsDataURL() メソッドを使用してそれを dataURL に変換することが含まれます。 dataURL は、ヘッダー (データ形式を示す) と Base64 でエンコードされた画像データで構成されます。

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

dataURL をコールバック関数に渡すことで、Base64 でエンコードされた画像文字列を取得できます。

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