如何在CSS文件中将PNG图像进行Base64编码以用于数据URI？

Question

我想把一个PNG文件进行base-64编码，这样我就可以把它放到我的样式表里的data:url中。请问我该怎么做呢？

我用的是Mac，所以在Unix命令行上操作会很好。如果能用Python来解决那就更棒了。

Answer 1

在编程中，有时候我们会遇到一些问题，尤其是在使用某些工具或库的时候。这些问题可能会让我们感到困惑，不知道该怎么解决。比如，有人可能在使用某个特定的功能时，发现它并没有按照预期工作。这时候，查看相关的讨论或者问答平台，比如StackOverflow，就能帮助我们找到答案或者解决方案。

在这些讨论中，其他程序员会分享他们的经验和解决方法，甚至可能会提供一些代码示例，帮助我们更好地理解问题所在。通过这些交流，我们可以学到很多实用的技巧和知识，逐步提高自己的编程能力。

总之，遇到问题时，不要害怕去寻求帮助，社区中的资源可以为我们提供很大的支持。

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

在Python中可以这样做：

import base64

binary_fc       = open(filepath, 'rb').read()  # fc aka file_content
base64_utf8_str = base64.b64encode(binary_fc).decode('utf-8')

ext     = filepath.split('.')[-1]
dataurl = f'data:image/{ext};base64,{base64_utf8_str}'

---

感谢@cnst的评论，我们需要加上前缀 data:image/{ext};base64,

感谢@ramazanpolat的回答，我们需要使用 decode('utf-8')