Как base-64 кодирует изображение PNG для использования в data-uri в файле CSS?

Question

Я хочу, чтобы base-64 кодировал файл PNG, чтобы включить его в data: url в моей таблице стилей.Как я могу это сделать?

Я на Mac, так что что-то в командной строке Unix будет работать отлично.Решение на основе Python также будет грандиозным.

Answer 1

Это должно сделать это в Python:

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

Answer 2

В python3 base64.b64encode возвращает экземпляр bytes, поэтому необходимо вызвать decode, чтобы получить str, если вы работаете с текстом в кодировке 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=='

Если выработают с bytes напрямую, вы можете использовать вывод base64.b64encode без дальнейшего декодирования.

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

Answer 3

Это должно быть сделано в Unix :

b64encode filename.png X | sed '1d;$d' | tr -d '\n' > b64encoded.png

Кодированное изображение, создаваемое b64encode, содержит верхний и нижний колонтитулы и не содержит строки длиной более 76 символов.Этот формат типичен для SMTP-коммуникаций.

Чтобы сделать кодированное изображение встраиваемым в HTML / CSS, команды sed и tr удаляют верхний / нижний колонтитул (первая и последняя строки) и все новые строки соответственно.

Тогда просто используйте длинную закодированную строку в HTML

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

или в CSS

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

Answer 4

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')

Answer 5

b64encode по умолчанию не установлен в некоторых дистрибутивах (ответ @Clint Pachl), но python есть.

Итак, просто используйте:

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

Чтобы получить закодированное в base64 изображение из командной строки.

На оставшиеся шаги уже ответил @Clint Pachl (https://stackoverflow.com/a/20467682/1522342)