Bagaimana untuk Menukar Imej kepada Rentetan Base64 dalam JavaScript?

Tukar Imej kepada Rentetan Base64 dalam JavaScript

Apabila berinteraksi dengan pelayan jauh atau mengendalikan data imej dalam JavaScript, menukarkan imej kepada rentetan Base64 menjadi keperluan. Rentetan Base64 mewakili data binari dalam format teks, membolehkan penghantaran imej selamat melalui rangkaian.

Terdapat beberapa teknik yang tersedia untuk penukaran ini:

1. Pendekatan FileReader:

Pendekatan ini melibatkan memuatkan imej sebagai gumpalan menggunakan XMLHttpRequest dan kemudian menggunakan kaedah readAsDataURL() API FileReader untuk mengubahnya menjadi dataURL. DataURL terdiri daripada pengepala (menunjukkan format data) dan data imej yang dikodkan 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)
})

Dengan menghantar dataURL kepada fungsi panggil balik, anda boleh mendapatkan semula rentetan imej yang dikodkan Base64.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Imej kepada Rentetan Base64 dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!