Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Susan Sarandon
Freigeben: 2024-10-31 06:22:30
Original
177 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
  1. Verwenden Sie die Funktion getBase64Image(), um das Bild in Base64 zu konvertieren:
<code class="javascript">var base64 = getBase64Image(document.getElementById("imageid"));</code>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!