Bagaimanakah Saya Boleh Menukar Imej kepada Rentetan Base64 dalam JavaScript?

Tukar Imej kepada Rentetan Base64 dalam JavaScript

Menukar imej kepada rentetan Base64 ialah tugas biasa dalam pembangunan web, terutamanya apabila anda perlu menghantar imej ke pelayan. Berikut ialah dua pendekatan JavaScript yang popular untuk mencapai matlamat ini:

1. Pendekatan FileReader:

Pendekatan ini menggunakan API FileReader untuk membaca imej sebagai gumpalan dan kemudian menukarnya kepada URL data:

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. Pendekatan Kanvas HTML:

Pilihan lain ialah membuat kanvas HTML, melukis imej padanya dan kemudian menukar kanvas kepada URL data:

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');

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