Wie konvertiere ich eine Bild-URL mit Javascript in Base64?

Konvertieren einer Bild-URL in Base64

In Webentwicklungsszenarien ist es oft notwendig, Bilder zur Verarbeitung oder Speicherung zu senden, ohne Zugriff auf die eigentliche Bilddatei zu haben. Um dies zu erleichtern, können wir Bild-URLs in das Base64-Format konvertieren, was eine effiziente Übertragung ermöglicht.

In Ihrem speziellen Fall haben Sie die URL eines Bildes (z. B. „https://example.com/image. png"), das aus der Eingabe eines Benutzers stammt. So konvertieren Sie es mit JavaScript in Base64:

1. Erstellen Sie ein neues Bildelement:Dieses Bildelement dient als temporäre Darstellung des Bildes zur Verarbeitung.

<code class="javascript">const img = new Image();
img.src = imageUrl; // Replace imageUrl with the URL you obtained</code>

2. Zeichnen Sie das Bild auf eine Leinwand: Dieser Schritt erstellt eine pixelgenaue Kopie des Bildes auf der Leinwand.

<code class="javascript">const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);</code>

3. Canvas in Base64 konvertieren:Verwenden Sie die toDataURL()-Methode, um das Canvas in eine Base64-codierte Zeichenfolge zu konvertieren.

<code class="javascript">const base64Image = canvas.toDataURL("image/png");</code>

4. Entfernen Sie die Daten-URI-Präfix: Die toDataURL()-Methode gibt einen Daten-URI zurück, der zusätzliche Informationen enthält. Entfernen Sie das Präfix mit einem regulären Ausdruck, um die reinen Base64-Daten zu erhalten.

<code class="javascript">const regex = /^data:image\/[A-z]*;base64,/;
const base64Data = base64Image.replace(regex, "");</code>

base64Data enthält jetzt die Base64-codierte Darstellung des Bildes. Sie können diesen String zur weiteren Verarbeitung an Ihren Webservice übertragen oder lokal auf Ihrem System speichern.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich eine Bild-URL mit Javascript in Base64?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!