Heim  >  Artikel  >  Web-Frontend  >  Wie konvertiert man eine Bild-URL in Javascript in Base64?

Wie konvertiert man eine Bild-URL in Javascript in Base64?

Susan Sarandon
Susan SarandonOriginal
2024-10-31 06:22:30178Durchsuche

How to Convert an Image URL to Base64 in Javascript?

So konvertieren Sie eine Bild-URL in Base64

Sie erhalten eine Bild-URL aus einer Bildeingabe und müssen diese daher in Base64 konvertieren Sie können es an einen Webdienst senden und das Bild lokal speichern. Der aktuell von Ihnen verwendete Code konvertiert die URL nicht in Base64.

Um dies zu erreichen, können Sie die folgenden Schritte ausführen:

  1. Erstellen Sie eine JavaScript-Funktion für Konvertieren Sie das Bild in Base64:
<code class="javascript">function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/?[A-z]*;base64,/);
}</code>

Diese Funktion verwendet ein Bildelement (img) als Eingabe und gibt eine Base64-codierte Zeichenfolge zurück.

  1. Holen Sie sich das Bildelement aus Ihrem HTML:
<code class="html"><img id="imageid" src="https://www.google.de/images/srpr/logo11w.png"></code>
  1. Verwenden Sie die Funktion getBase64Image(), um das Bild in Base64 zu konvertieren:
<code class="javascript">var base64 = getBase64Image(document.getElementById("imageid"));</code>

Dadurch wird das Bild in Base64 konvertiert und das Ergebnis in der Base64-Variablen gespeichert. Anschließend können Sie die Base64-Variable an Ihren Webdienst senden, um das Bild lokal zu speichern.

Das obige ist der detaillierte Inhalt vonWie konvertiert man eine Bild-URL in Javascript in Base64?. 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