檔案與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互轉的使用方法

  1. 選擇轉換方向 根據需要選擇「檔案 → Base64」或「Base64 → 檔案」模式。
  2. 提供檔案或Base64文字 在「檔案 → Base64」模式下拖放或選擇檔案;在「Base64 → 檔案」模式下貼上Base64字串或data URI。
  3. 等待自動轉換完成 選擇或貼上內容後,轉換會立即在瀏覽器內完成。
  4. 確認偵測到的MIME型別(Base64 → 檔案時) 如果輸入的不是完整data URI,會顯示MIME型別選擇欄,請選擇與原檔案相符的型別。
  5. 複製結果或下載檔案 複製編碼後的字串,或下載還原出的檔案,完成整個流程。

用好本工具的小技巧

  • 在“檔案 → 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位元字元所帶來的、無法避免的特性。

常見問題

Base64是一種將二進位制資料(圖片、音訊、執行檔等任意格式的資料)僅用A~Z、a~z、0~9、+、/這64種可列印ASCII字元表示的編碼方式。它不是加密,只是一種讓資料能以安全的文本形式傳輸的轉換方式。

data URI是將檔案內容以Base64編碼的字串形式直接嵌入URL中的一種格式,例如data:image/png;base64,iVBOR...。由於其中包含MIME型別資訊,可以直接填入<img>標籤的src屬性或CSS的background-image中顯示圖片。

不會。本工具的轉換處理(使用FileReader和Blob進行編碼解碼)完全在您瀏覽器內的JavaScript中完成,檔案內容或Base64字串絕不會被發送到伺服器。

可以。如果貼上的內容不是以data:開頭的完整data URI格式,會顯示MIME型別選擇欄,請手動選擇原始檔案格式(圖片、PDF、文本等)後再下載。

Base64會將8位為單位的二進位制資料重新編碼為6位為單位的字元,因此編碼後的資料量約為原來的4/3倍,即增大約33%。這是Base64編碼機制本身無法避免的特性。
工具君

閒話 ― 為什麼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%且無法利用瀏覽器快取,並不適合用於嵌入較大的圖片檔案。