web-dev-qa-db-ja.com

CSSファイルのdata-uriで使用するために、PNG画像をどのようにbase-64エンコードしますか？

PNGファイルをbase-64エンコードして、スタイルシートのdata：urlに含めたい。どうやってやるの？

私はMacを使用しているので、Unixコマンドラインで何かがうまく機能します。 Pythonベースのソリューションも素晴らしいでしょう。

pythoncssimagebase64data-uri
41
Paul D. Waite

Pythonでこれを行う必要があります。

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

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=='
16
snakecharmerb

これはnixで行う必要があります：

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)
4
Clint Pachl

一部のディストリビューションでは、b64encodeはデフォルトではインストールされません（@Clint Pachlの答え）が、pythonがあります。

したがって、使用するだけです：

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

コマンドラインからbase64でエンコードされた画像を取得するため。

残りの手順はすでに@Clint Pachlによって回答されました（ https://stackoverflow.com/a/20467682/1522342 ）

1
iuridiniz
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')
1
Ramazan Polat