Heim >Web-Frontend >js-Tutorial >Wie kann ich ein Bild mit JavaScript in einen Base64-String konvertieren?

Wie kann ich ein Bild mit JavaScript in einen Base64-String konvertieren?

Susan Sarandon
Susan SarandonOriginal
2024-12-18 06:25:10463Durchsuche

How Can I Convert an Image to a Base64 String Using JavaScript?

Bild in Base64-String mit JavaScript konvertieren

Die Anforderung:

Sie müssen konvertieren ein Bild in einen Base64-String, um es an einen Server zu senden.

Die Lösungen:

JavaScript bietet mehrere Ansätze für die Konvertierung von Bildern in Base64.

1. FileReader-Ansatz:

Dieser Ansatz nutzt die FileReader-API (insbesondere readAsDataURL()), um einen von einer Bild-URL geladenen Blob in eine Daten-URL zu konvertieren.

Codebeispiel:

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

Bei diesem Ansatz wird XMLHttpRequest verwendet, um das Bild als Blob abzurufen und dann FileReader verwenden, um es in eine Daten-URL zu konvertieren.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn