Konvertieren Sie Base64 in Bild-Javascript

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:

1. Teilen Sie 11110101 in zwei sechsstellige Zahlen: 111101 und 010011.
2. Fügen Sie am Ende dieser beiden sechsstelligen Zahlen zwei Nullen hinzu, um 11110100 und 01001100 zu erhalten.
3. Kombinieren Sie diese beiden 8-Bit-Arrays zu einer 16-Bit-Binärzahl: 1111010001001100.
4. Wandeln Sie diese Binärzahl in eine Dezimalzahl um und erhalten Sie 61676.
5. Konvertieren Sie 61676 in das Base64-codierte Zeichen „5q0=".

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:

1. Erstellen Sie ein a1f02c36ba31691bcfe87b2722de723b-Tag, um das Bild anzuzeigen.

<img id="img" src="" alt="image">

2. Holen Sie sich die Base64-codierte Zeichenfolge und weisen Sie sie dem src-Attribut des a1f02c36ba31691bcfe87b2722de723b-Tags zu.

let base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxglj
NBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

document.getElementById("img").src = base64Img;

3. Wenn Sie JavaScript-Code verwenden müssen, um Base64-codierte Zeichenfolgen abzurufen und zu verarbeiten, können Sie zum Konvertieren Canvas verwenden. Im Folgenden finden Sie einen Beispielcode zum Konvertieren eines Bilds in eine Base64-codierte Zeichenfolge über Canvas.

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!