Maison > interface Web > tutoriel CSS > le corps du texte

Comment encoder des images PNG en Base64 pour les URI de données CSS ?

Patricia Arquette
Libérer: 2024-10-30 21:22:30
original
981 Les gens l'ont consulté

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

Utilisation de l'encodage Base64 pour les images PNG dans les URI de données CSS

Afin d'incorporer des images PNG dans des feuilles de style CSS à l'aide d'URI de données, les données PNG doit d’abord être encodé au format Base64. Cette technique permet d'inclure des fichiers d'images externes directement dans la feuille de style.

Solution en ligne de commande Unix :

base64 -i /path/to/image.png
Copier après la connexion

Cette commande produira le PNG codé en Base64. data.

Solution Python :

<code class="python">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)</code>
Copier après la connexion

Ce script Python lit le fichier PNG en mode binaire, le convertit en Base64, puis construit l'URI des données, y compris le type et l'extension MIME appropriés.

Remarques supplémentaires :

  • Assurez-vous que l'extension de l'image est incluse dans l'URI des données après le type MIME, par exemple, "data :image/png;base64".
  • Utilisez la méthode "decode('utf-8')" en Python pour gérer tout problème potentiel lié à Unicode.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal