web-dev-qa-db-fra.com

Comment base-64 encodez-vous une image PNG pour l'utiliser dans un data-uri dans un fichier CSS?

Je veux coder en base 64 un fichier PNG, pour l'inclure dans un data: url dans ma feuille de style. Comment puis je faire ça?

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 formidable.

pythoncssimagebase64data-uri
37
Paul D. Waite

Cela devrait le faire en Python:

import base64
encoded = base64.b64encode(open("filename.png", "rb").read())
55
Jon

En python3, base64.b64encode renvoie une instance bytes, 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 directement avec bytes, vous pouvez utiliser la sortie de base64.b64encode sans décodage supplémentaire.

>>> encoded = base64.b64encode(image_data)
>>> b'data:image/png;base64,' + encoded
b'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
12
snakecharmerb

Cela devrait le faire dans 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 aucune ligne ne dépasse 76 caractères. Ce format est typique des communications SMTP.

Pour rendre l'image codable incorporable en HTML/CSS, les commandes sed et tr suppriment l'en-tête/le pied de page (première et dernière lignes) et toutes les nouvelles lignes, respectivement.

Ensuite, utilisez simplement la longue chaîne encodée dansHTML

<img src="data:image/png;base64,ENCODED_PNG">

ou dansCSS

url(data:image/png;base64,ENCODED_PNG)
4
Clint Pachl

b64encode n'est pas installé par défaut dans certaines distributions (la réponse de @Clint Pachl), mais python l'est.

Alors, utilisez simplement:

python -mbase64 image.jpeg | tr -d '\n' > b64encoded.txt

Pour obtenir une image encodée en base64 à partir de la ligne de commande.

@Clint Pachl a déjà répondu aux étapes restantes ( https://stackoverflow.com/a/20467682/1522342 )

1
iuridiniz
import base64

def image_to_data_url(filename):
    ext = filename.split('.')[-1]
    prefix = f'data:image/{ext};base64,'
    with open(filename, 'rb') as f:
        img = f.read()
    return prefix + base64.b64encode(img).decode('utf-8')
0
Ramazan Polat