Wie konvertiere ich ein Bild in einen Base64-String in JavaScript?

Bild in Base64-String in JavaScript konvertieren

Bei der Interaktion mit Remote-Servern oder der Verarbeitung von Bilddaten in JavaScript wird das Konvertieren von Bildern in Base64-Strings zu einem Notwendigkeit. Eine Base64-Zeichenfolge stellt Binärdaten in einem Textformat dar und ermöglicht so die sichere Übertragung von Bildern über Netzwerke.

Für diese Konvertierung stehen mehrere Techniken zur Verfügung:

1. FileReader-Ansatz:

Bei diesem Ansatz wird das Bild als Blob mit XMLHttpRequest geladen und dann die Methode readAsDataURL() der FileReader-API verwendet, um es in eine Daten-URL umzuwandeln. Eine dataURL besteht aus einem Header (der das Datenformat angibt) und den Base64-codierten Bilddaten.

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

Durch Übergabe der dataURL an die Callback-Funktion können Sie die Base64-codierte Bildzeichenfolge abrufen.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich ein Bild in einen Base64-String in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!