„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Wie kodiere ich PNG-Bilder als Base64 für CSS-Daten-URIs?

Wie kodiere ich PNG-Bilder als Base64 für CSS-Daten-URIs?

Veröffentlicht am 06.11.2024
Durchsuche:660

How to Encode PNG Images as Base64 for CSS Data URIs?

Verwenden der Base64-Codierung für PNG-Bilder in CSS-Daten-URIs

Um PNG-Bilder mithilfe von Daten-URIs in CSS-Stylesheets einzubetten, werden die PNG-Daten verwendet muss zunächst in das Base64-Format kodiert werden. Mit dieser Technik können externe Bilddateien direkt in das Stylesheet eingebunden werden.

Unix-Befehlszeilenlösung:

base64 -i /path/to/image.png

Dieser Befehl gibt die Base64-codierten PNG-Daten aus.

Python-Lösung:

import base64

with open("/path/to/image.png", "rb") as f:
    binary_data = f.read()

base64_data = base64.b64encode(binary_data).decode("utf-8")
ext = "png"

data_uri = f"data:image/{ext};base64,{base64_data}"

print(data_uri)

Dieses Python-Skript liest die PNG-Datei im Binärmodus, konvertiert sie in Base64 und erstellt dann den Daten-URI, einschließlich des entsprechenden MIME-Typs und der entsprechenden Erweiterung.

Zusätzliche Hinweise:

  • Stellen Sie sicher, dass die Erweiterung des Bildes im Daten-URI nach dem MIME-Typ enthalten ist, z. B. „data:image/png;base64“.
  • Verwenden Sie die „decode('utf-8')“-Methode in Python zur Behandlung potenzieller Unicode-bezogener Probleme.
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3