首頁 > web前端 > css教學 > 如何將 PNG 圖像編碼為 CSS 資料 URI 的 Base64?

如何將 PNG 圖像編碼為 CSS 資料 URI 的 Base64?

Patricia Arquette
發布: 2024-10-30 21:22:30
原創
1003 人瀏覽過

How to Encode PNG Images as Base64 for CSS Data URIs?

在CSS 資料URI 中對PNG 圖片使用Base64 編碼

為了使用資料URI 將PNG 圖像嵌入到CSS 樣式表中,PNGSS資料必須先編碼為Base64 格式。此技術允許外部圖像檔案直接包含在樣式表中。

Unix 命令列解決方案:

base64 -i /path/to/image.png
登入後複製

此命令將輸出Base64 編碼的PNG data.

Python 解決方案:

<code class="python">import base64

with open("/path/to/image.png", "rb") as f:
    binary_data = f.read()

base64_data = base64.b64encode(binary_data).decode("utf-8")
ext = "png"

data_uri = f"data:image/{ext};base64,{base64_data}"

print(data_uri)</code>
登入後複製
此Python 腳本以二進位模式讀取PNG 文件,將其轉換為Base64,然後建構資料URI,包括適當的MIME 類型和副檔名。

附加說明:

    確保影像的副檔名包含在 MIME 類型之後的資料 URI 中,例如「data :image/png;base64"。
  • 使用 Python 中的「decode('utf-8')」方法來處理任何潛在的 Unicode 相關問題。

以上是如何將 PNG 圖像編碼為 CSS 資料 URI 的 Base64?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板