Question

我想base-64编码PNG文件，将其包含在我的样式表中的数据：url中。我怎么能这样做？

我在Mac上，所以Unix命令行上的东西会很好用。基于Python的解决方案也很棒。

Answer 1

这应该在Python中实现：

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

Answer 2

在python3中，base64.b64encode会返回bytes个实例，因此如果您使用的是unicode文本，则需要调用decode来获取str。

# 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

这应该在Python3中起作用：

from io import BytesIO
import requests, base64

def encode_image(image_url):
    buffered = BytesIO(requests.get(image_url).content)
    image_base64 = base64.b64encode(buffered.getvalue())
    return b'data:image/png;base64,'+image_base64

像在python3 base64中那样调用解码以获取str.b64encode返回一个字节实例。

Answer 6

只是为了记录，如果你想在 Node.js 中做到这一点：

const fs = require('fs');
const base64encodedString = fs.readFileSync('image_file.jpg', {encoding:'base64'});

你如何base-64编码PNG图像用于CSS文件中的数据uri？

6 个答案: