Comment encoder une image PNG dans un fichier CSS?
je veux baser-64 encoder un fichier PNG, pour l'inclure dans une url data:dans ma feuille de style. Comment puis-je le faire?
je suis sur un Mac, donc quelque chose sur la ligne de commande Unix fonctionnerait très bien. Une solution basée sur Python serait également grandiose.
4 réponses
Ceci devrait faire en Python:
import base64
encoded = base64.b64encode(open("filename.png", "rb").read())
en python3,base64.b64encode retourne un bytes instance, il est donc nécessaire d'appeler decode pour obtenir un str, si vous travaillez avec du texte unicode.
# Image data from [Wikipedia][1]
>>>image_data = b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x05\x00\x00\x00\x05\x08\x06\x00\x00\x00\x8do&\xe5\x00\x00\x00\x1cIDAT\x08\xd7c\xf8\xff\xff?\xc3\x7f\x06 \x05\xc3 \x12\x84\xd01\xf1\x82X\xcd\x04\x00\x0e\xf55\xcb\xd1\x8e\x0e\x1f\x00\x00\x00\x00IEND\xaeB`\x82'
# String representation of bytes object includes leading "b" and quotes,
# making the uri invalid.
>>> encoded = base64.b64encode(image_data) # Creates a bytes object
>>> 'data:image/png;base64,{}'.format(encoded)
"data:image/png;base64,b'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='"
# Calling .decode() gets us the right representation
>>> encoded = base64.b64encode(image_data).decode()
>>> 'data:image/png;base64,{}'.format(encoded)
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
Si vous travaillez avec bytes directement, vous pouvez utiliser la sortie de base64.b64encode sans décodage.
>>> encoded = base64.b64encode(image_data)
>>> b'data:image/png;base64,' + encoded
b'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
Ceci devrait faire en Unix:
b64encode filename.png X | sed '1d;$d' | tr -d '\n' > b64encoded.png
l'image codée produite par b64encode comprend un en-tête et un pied de page et ne dépasse pas 76 caractères. Ce format est typique des communications SMTP.
pour rendre l'image encodée intégrable en HTML/ CSS, le sed et tr les commandes suppriment l'en-tête/pied de page (première et dernière lignes) et toutes les nouvelles lignes, respectivement.
alors utilisez simplement la longue chaîne encodée dans HTML
<img src="data:image/png;base64,ENCODED_PNG">
ou CSS
url(data:image/png;base64,ENCODED_PNG)
b64encode n'est pas installé par défaut dans certaines distributions (réponse de@Clint Pachl), mais python l'est.
alors, il suffit d'utiliser:
python -mbase64 image.jpeg | tr -d '\n' > b64encoded.txt
afin d'obtenir l'image encodée base64 de la ligne de commande.
@Clint Pachl (https://stackoverflow.com/a/20467682/1522342)