Python 如何对PNG图像进行base-64编码,以便在CSS文件的数据uri中使用?
我想对PNG文件进行base-64编码,将其包含在样式表中的data:url中。我该怎么做Python 如何对PNG图像进行base-64编码,以便在CSS文件的数据uri中使用?,python,css,image,base64,data-uri,Python,Css,Image,Base64,Data Uri,我想对PNG文件进行base-64编码,将其包含在样式表中的data:url中。我该怎么做 我在Mac电脑上,所以Unix命令行上的一些东西会很好用。一个基于Python的解决方案也将是伟大的。这应该在Python中实现: import base64 encoded = base64.b64encode(open("filename.png", "rb").read()) 这应该在Unix中完成: b64encode filename.png X | sed '1d;$d' | tr -d '
我在Mac电脑上,所以Unix命令行上的一些东西会很好用。一个基于Python的解决方案也将是伟大的。这应该在Python中实现:
import base64
encoded = base64.b64encode(open("filename.png", "rb").read())
这应该在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">
在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=='
如果您直接使用字节
,则可以使用base64.b64encode的输出,而无需进一步解码
>>> encoded = base64.b64encode(image_data)
>>> b'data:image/png;base64,' + encoded
b'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
默认情况下,某些发行版中没有安装b64encode(@Clint Pachl的答案),但python是
因此,只需使用:
python-mbase64 image.jpeg | tr-d'\n'>b64encoded.txt
以便从命令行获取base64编码的图像
剩下的步骤已经由@Clint Pachl()回答了。这应该在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
调用decode以获取python3 base64中的str。b64encode返回一个字节实例。看起来不错。当我尝试在CSS文件中使用结果时,Firefox当前告诉我图像已损坏或被截断,但我可能在某个地方做错了。@Paul D.Waite:Base64输出是什么样子的,那么你是如何在CSS中使用它的?@BoltClock:我得到的输出是ivborw0kggoaansuhueugaaaaaaaakcayaaacnms+9aaap0leqvqy02p4/fv3f1z4ypurcyd\niiomkqeyh6cddeqzkdwrzkj6cajq3bv0mr4noghiw6sbjvhjeyhakct58fllaaaaelf\nTkSuQmCC\n
。在我的CSS文件中,它看起来像background image:url(数据:image/png;base64,ivborw0kgoaaaansuhueugaaaaaaaaaakcayaaacnms+9aaap0leqvqy02p4/fv3f1z4ypUrcDYD\niiomkqeyh6cddzkdwrzkj6cajkeq3bv0mr4nogiw6sbjvhjvhnjeyhakct58fllaaaaaaelf\nTkSuQmCC\n)
@PaulD.Waite:那些\n
s在那里看起来确实不合适。这是可行的,但是结果字符串应该另外加上“data:image/png;base64”
——上面的代码本身不能做到这一点。在一些发行版中没有b64encode
。在这种情况下,您需要使用同义词uuencode-m
。谢谢。我想这是最好的答案。谢谢!!就要把我的头发拔出来。这个人也救了我的头发。
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')
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