In der Frontend-Entwicklung müssen wir häufig Base64-codierte Zeichenfolgen in Bilder konvertieren, um sie auf Webseiten anzuzeigen. Diese Konvertierung kann uns helfen, Bilder dynamisch zu laden und ohne Serverunterstützung auf der Seite anzuzeigen. Als Nächstes wird in diesem Artikel erläutert, wie Sie mithilfe von JavaScript eine Base64-codierte Zeichenfolge in ein Bild konvertieren.
1. Das Prinzip der Base64-Kodierung
Base64-Kodierung ist eine Kodierungsmethode, die Binärdaten in druckbare ASCII-Zeichen umwandelt. Es wandelt alle drei Bytes in vier Zeichen um und fügt am Ende ein „=“-Zeichen hinzu (falls erforderlich).
Zum Beispiel kann eine 16-Bit-Binärzahl 1111010100110000 in eine Base64-codierte Zeichenfolge „5q0=" umgewandelt werden. Der Konvertierungsprozess ist wie folgt:
2. Konvertieren Sie die Base64-Codierung in Bilder in JavaScript.
In der Front-End-Entwicklung verwenden wir häufig asynchrone Ajax-Anfragen, um Base64-codierte Zeichenfolgen abzurufen und diese dann zu konvertieren Es wird in ein Bild umgewandelt und auf der Webseite angezeigt. Hier sind die Schritte zum Konvertieren einer Base64-codierten Zeichenfolge in ein Bild mit JavaScript:
<img id="img" src="" alt="image">
let base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxglj NBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; document.getElementById("img").src = base64Img;
let img = document.createElement("img"); img.src = "image.png"; img.onload = function() { let canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); let base64Img = canvas.toDataURL("image/png"); document.getElementById("img").src = base64Img; }
Oben erfahren Sie, wie Sie die Base64-Kodierung in Bilder umwandeln. Mit dieser Methode können wir Base64-codierte Bilder problemlos auf Webseiten anzeigen.
Das obige ist der detaillierte Inhalt vonKonvertieren Sie Base64 in Bild-Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!