如何对PNG图像进行base-64编码,以便在CSS文件的data-uri中使用?

bzzcjhmw  于 2022-11-26  发布在  其他
关注(0)|答案(7)|浏览(682)

我想对一个PNG文件进行base-64编码,把它包含在我的样式表的data:url中。我该怎么做呢?
我用的是Mac,所以Unix命令行上的东西会很好用,基于Python的解决方案也会很棒。

alen0pnh

alen0pnh1#

在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 answer,我们需要decode('utf-8')

xmd2e60i

xmd2e60i2#

在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=='
wlp8pajw

wlp8pajw3#

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

puruo6ea4#

Unix中应该这样做:

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

b64encode产生的编码影像包含页首和页尾,且行长度不超过76个字符。此格式是SMTP通信中的典型格式。
为了使编码图像可嵌入HTML/CSS,sedtr命令分别删除页眉/页脚(第一行和最后一行)和所有换行符。
然后只需使用HTML中的长编码字符串

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

或在CSS

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

lsmd5eda5#

b64 encode在某些发行版中默认不安装(@克林特Pachl的答案),但python安装了。
所以,只需用途:
python -mbase64 image.jpeg | tr -d '\n' > b64encoded.txt
以便从命令行获取base64编码图像。
其余步骤已由@克林特Pachl(https://stackoverflow.com/a/20467682/1522342)回答

pu3pd22g

pu3pd22g6#

这在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返回一个bytes示例。

kg7wmglp

kg7wmglp7#

如果你想在Node.js中做这个,请注意:

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

相关问题