您如何对 PNG 图像进行 base-64 编码以在 CSS 文件中的 data-uri 中使用？答案

【问题标题】：How do you base-64 encode a PNG image for use in a data-uri in a CSS file?您如何对 PNG 图像进行 base-64 编码以在 CSS 文件中的 data-uri 中使用？
【发布时间】：2011-09-16 14:01:52
【问题描述】：

我想对 PNG 文件进行 base-64 编码，以将其包含在我的样式表中的 data:url 中。我该怎么做？

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

【问题讨论】：

标签： python css image base64 data-uri

【解决方案1】：

这应该在 Python 中完成：

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

【讨论】：

看起来不错。当我尝试在我的 CSS 文件中使用结果时，Firefox 当前告诉我图像已损坏或被截断，但我可能在某处做错了。
@Paul D. Waite：Base64 输出是什么样的，您如何在 CSS 中使用它？
@BoltClock：我得到的输出是iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQY02P4/fv3f1z4ypUrcDYD\niIOMkQEyH6tCdDEQZkDWRZKJ6CajKEQ3BV0Mr4noGhiw6SbJjVhNJEYhAKztct58fLlaAAAAAElF\nTkSuQmCC\n。在我的 CSS 文件中，它看起来像 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQY02P4/fv3f1z4ypUrcDYD\niIOMkQEyH6tCdDEQZkDWRZKJ6CajKEQ3BV0Mr4noGhiw6SbJjVhNJEYhAKztct58fLlaAAAAAElF\nTkSuQmCC\n);。
@PaulD.Waite：那些\ns 肯定看起来不合适。
这行得通，但是结果字符串应该额外加上"data:image/png;base64,"——上面的代码本身并不能这样做。

【解决方案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=='

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

这应该在 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)

【讨论】：

在某些发行版中不包含b64encode。在这种情况下，您需要使用 uuencode -m，这是同义词。

【解决方案5】：

在某些发行版中默认不安装 b64encode（@Clint Pachl 的回答），但 python 是。

所以，只需使用：

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

为了从命令行获取base64编码的图片。

@Clint Pachl (https://stackoverflow.com/a/20467682/1522342) 已经回答了其余步骤

【讨论】：

【解决方案6】：

这应该在 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获取str，如python3 base64.b64encode返回一个字节实例。

【讨论】：

【解决方案7】：

仅作记录，如果您想在 Node.js 中执行此操作：

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

【讨论】：