Heim > Web-Frontend > js-Tutorial > Wie konvertiere ich Base64 in ein Bild in JavaScript/jQuery?

Wie konvertiere ich Base64 in ein Bild in JavaScript/jQuery?

Mary-Kate Olsen
Freigeben: 2024-10-28 03:48:30
Original
346 Leute haben es durchsucht

How to Convert Base64 to an Image in JavaScript/jQuery?

Base64 in ein Bild in JavaScript/jQuery konvertieren

In Ihrem Bilderfassungscode haben Sie das Bild erfolgreich erfasst und als Base64 gespeichert Zeichenfolge in der Variable item_image. Um diesen Base64-String in ein Bild zu konvertieren und seinen Pfad clientseitig zu verwenden, führen Sie die folgenden Schritte aus:

Erstellen eines Bildobjekts:

Erstellen eines neuen Bildobjekts in JavaScript:

<code class="javascript">var image = new Image();</code>
Nach dem Login kopieren

Festlegen der Bildquelle:

Setzen Sie die src-Eigenschaft des Bildobjekts auf die Base64-Zeichenfolge, einschließlich des „data:image...“-Vorworts:

<code class="javascript">image.src = 'data:image/png;base64,' + item_image;</code>
Nach dem Login kopieren

Anzeigen des Bildes:

Sobald das Bild geladen ist, können Sie es auf der Seite anzeigen, indem Sie es an den Dokumenttext anhängen:

<code class="javascript">document.body.appendChild(image);</code>
Nach dem Login kopieren

Dadurch wird das Base64-Bild auf der Webseite gerendert.

Daten-URIs:

Das zum Codieren des Bildes im src-Attribut verwendete Format wird aufgerufen ein „Daten-URI“. Es wird von allen gängigen Browsern unterstützt und ermöglicht das direkte Einbetten von Daten, beispielsweise einem Bild, in eine Webseite.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich Base64 in ein Bild in JavaScript/jQuery?. 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