Beispiele für die Konvertierung zwischen Base64-Zeichenfolgen und Bildern

1. Das Prinzip der Konvertierung einer Base64-Zeichenfolge in ein Bild besteht darin, dass eine Vorschau der Base64-Zeichenfolge angezeigt werden kann, wenn sie als src-Attribut des img-Tags verwendet wird. Wenn Sie herunterladen möchten, erstellen Sie ein neues a-Tag, setzen Sie das href-Attribut des a-Tags auf die Base64-Zeichenfolge, setzen Sie das Download-Attribut des a-Tags auf den Dateinamen und lösen Sie dann manuell das Klickereignis des a-Tags aus js, dann ist das Download-Verhalten abgeschlossen (Je nach Browser müssen Sie möglicherweise das Download-Verzeichnis auswählen oder das Standardverzeichnis verwenden).

2. Bild in Base64-Zeichenfolge konvertieren

Es gibt zwei Arten: Eine dient zum Bereitstellen des SRC-Tags des Bildes und die andere zum Hochladen der Bilddatei.

3. Geben Sie das SRC-Tag des Bildes an.

muss mit Hilfe des Canvas-Tags vervollständigt werden.
Der Vorteil ist ... können Sie das Bild vergrößern?

Der Nachteil ist, dass es nicht domänenübergreifend ist (die andere jedoch auch nicht)

Die Reihenfolge ist wie folgt:
1 Der Benutzer stellt src bereit
2 Neues img-Tag und src festlegen Geben Sie das img-Tag ein
3. Nachdem das img-Tag geladen wurde (der Onload-Callback wird ausgelöst), fahren Sie mit der Ausführung des folgenden Codes fort:
4 Sie können die Größe der Leinwand entsprechend der Bildgröße festlegen oder die Größe der Leinwand anpassen.
5. Geben Sie die Base64-Zeichenfolge über die toDataURL-Methode aus 🎜>
4. Das Datei-Upload-Formular
erfordert, dass das Eingabe-Tag den Typ =file unterstützt. Sie müssen das FileReader-Objekt verwenden.
Der Vorteil besteht darin, dass die Datei nach der Auswahl automatisch konvertiert wird, was den Vorgang vereinfacht .
Die Reihenfolge ist wie folgt:
1. Wenn das Eingabe-Tag von type=file das onchange-Ereignis auslöst, beginnen Sie mit der Ausführung der folgenden Anweisungen
3 readAsDataURL-API, lesen Sie den Dateiinhalt;
4. Wenn das Lesen erfolgreich ist (die Onload-Callback-Funktion wird ausgelöst), können Sie den Parameter e der Callback-Funktion verwenden, um die Base64-Zeichenfolge mithilfe des Attributs e.target.result abzurufen ;
5. Der base64-String ist das, was benötigt wird.

5. DEMO-Seite:

Bild in Base64-Zeichenfolge konvertieren

Base64-Zeichenfolge in Bild konvertieren

Verwandte Empfehlungen:

PHP-Code um Bilder in Base64-Strings zu konvertieren

Das obige ist der detaillierte Inhalt vonBeispiele für die Konvertierung zwischen Base64-Zeichenfolgen und Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!