檔案與Base64互轉工具(支援data URI)
將圖片、PDF等任意檔案轉換為Base64字串或data URI,也可以將Base64字串或data URI還原為檔案並下載。所有轉換均在瀏覽器內完成,檔案不會上傳到伺服器。
什麼是檔案與Base64互轉
Base64是一種編碼方式,僅用A~Z、a~z、0~9、+、/這64種可列印字元來表示圖片、PDF等任意二進位制資料。當開發者需要把檔案內容嵌入到只能安全處理文字的場景(例如JSON資料、CSS樣式表或HTML程式碼)時,就會先把檔案轉換為Base64字串。如果在編碼字串前加上MIME型別資訊,形成data:image/png;base64,...的形式,就成為data URI,瀏覽器可以直接將其解析為圖片,無需另外取得檔案。
本工具同時支援兩個方向:將任意檔案轉換為Base64字串或data URI,以及將Base64字串或data URI還原為原始檔案並下載。所有轉換均透過瀏覽器內的JavaScript(FileReader、Blob API)完成,檔案內容絕不會傳送到外部伺服器。無論是想查看原始碼中神秘Base64資料的實際內容,還是處理不希望上傳的機密檔案,都可以放心使用。
檔案與Base64互轉的使用方法
- 選擇轉換方向 根據需要選擇「檔案 → Base64」或「Base64 → 檔案」模式。
- 提供檔案或Base64文字 在「檔案 → Base64」模式下拖放或選擇檔案;在「Base64 → 檔案」模式下貼上Base64字串或data URI。
- 等待自動轉換完成 選擇或貼上內容後,轉換會立即在瀏覽器內完成。
- 確認偵測到的MIME型別(Base64 → 檔案時) 如果輸入的不是完整data URI,會顯示MIME型別選擇欄,請選擇與原檔案相符的型別。
- 複製結果或下載檔案 複製編碼後的字串,或下載還原出的檔案,完成整個流程。
用好本工具的小技巧
- 在“檔案 → Base64”模式下可上傳任意型別的檔案(圖片、PDF、音訊等),並可分別複製data URI形式和普通Base64字串。
- 在“Base64 → 檔案”模式下,貼上以
data:開頭的完整data URI會自動識別MIME型別;如果只是普通的Base64字串,請手動選擇MIME型別。 - 所有轉換處理都在瀏覽器內的JavaScript中完成,上傳的檔案或Base64字串絕不會被發送到伺服器,即使是機密檔案也可放心使用。
- 如果想在CSS或HTML中嵌入小圖示,可以直接將data URI形式的輸出貼上到
background-image: url(...)或<img>標籤的src中。 - 由於Base64編碼會使檔案體積增大約33%,轉換數十MB以上的大檔案時瀏覽器可能會出現卡頓。
常見使用場景
在CSS中直接嵌入小圖示
將圖示轉換為data URI,直接填入background-image屬性,避免為小型資源額外發起HTTP請求。
在JSON格式的API請求中傳輸檔案
將圖片或附件編碼為Base64字串,作為普通字串值放入JSON請求或回應內容中傳輸。
查看原始碼中出現的Base64資料內容
將HTML或CSS原始碼中出現的陌生Base64字串貼上還原為檔案,直接查看其真實內容。
在HTML郵件中內嵌圖片
將標誌等圖片進行Base64編碼後直接嵌入HTML郵件內文,無需作為單獨的附件傳送。
術語表
- Base64
- 僅用A~Z、a~z、0~9、+、/這64種可列印ASCII字元表示二進位制資料的編碼方式。它不是加密,只是讓任意位元組能以文本形式安全傳輸的轉換手段。
- data URI
- 將檔案經Base64編碼後的內容直接嵌入URL中的一種格式。由於同時攜帶MIME型別資訊,可以直接作為圖片來源或CSS背景使用。
- MIME型別
- 用於描述檔案格式的識別碼,以「大類/子類」形式表示,例如
image/png或application/pdf。瀏覽器據此判斷如何處理該檔案。 - 編碼
- 將資料從一種表示形式轉換為另一種表示形式的過程。Base64編碼具體來說是把二進位制資料轉換為可列印的文本字串。
- 用戶端處理
- 完全在使用者瀏覽器內處理資料,而不傳送到伺服器的方式。本工具的所有轉換都在用戶端完成,檔案不會離開您的裝置。
- 資料體積增加
- Base64編碼導致資料體積比原檔案增大約33%的現象。這是將8位元二進位制資料重新打包為6位元字元所帶來的、無法避免的特性。
常見問題
data:image/png;base64,iVBOR...。由於其中包含MIME型別資訊,可以直接填入<img>標籤的src屬性或CSS的background-image中顯示圖片。data:開頭的完整data URI格式,會顯示MIME型別選擇欄,請手動選擇原始檔案格式(圖片、PDF、文本等)後再下載。
閒話 ― 為什麼Base64會讓檔案體積增大33%
Base64編碼誕生的背景,是電子郵件、JSON、URL等許多傳輸通道“只能安全處理可列印的ASCII字元”這一限制。如果將圖片、執行檔等任意二進位制資料原樣傳送,可能會因混入控制字元而損壞,於是人們設計出僅用A~Z、a~z、0~9、+、/這64種可列印字元來表示二進位制資料的Base64方式。
Base64會將3位元組(24位)的二進位制資料按每6位切分為4份,分別對映為4個Base64字元。由於要把以8位為單位的二進位制資料重新塞進以6位為單位的字元中,編碼後的資料量約為原來的4/3倍,也就是增大約33%。這是以文本形式安全傳輸所必須付出的代價。
這一特性的巧妙應用之一,就是在HTML、CSS中以data:image/png;base64,...的形式直接嵌入小圖片的data URI。這樣做可以避免為圖示等小型資源額外發起HTTP請求,是加快頁面載入速度的常用手段。不過由於體積增加約33%且無法利用瀏覽器快取,並不適合用於嵌入較大的圖片檔案。