Base64 DataURL 轉換

純 Base64
0 字元

線上 Base64 DataURL 轉換工具，在純 Base64 與 data URL 格式之間互轉，支援自動辨識 MIME。

相關推薦

Base64 編碼

Base64 解碼

Base64 多行合併

Base64 轉圖片

圖片轉 Base64

Base64 清理

什麼是 Base64 DataURL？

DataURL 是一種把資料直接嵌入 URL 的 URI 方案，格式為 data:[<MIME 類型>];base64,<Base64 資料>。它允許把圖片、PDF、字型等小資源直接內聯到 HTML、CSS、JavaScript 中，無需額外的 HTTP 請求。

**純 Base64 vs DataURL：** 純 Base64 只是編碼後的字串（如 iVBORw0KGgo...）；DataURL 是帶有 data: 前綴和 MIME 類型的完整 URI，可直接作為 src、href、url() 等的值使用。

**本工具的用途：** 在「純 Base64 字串」和「完整 DataURL」之間互轉——既能给已有 Base64 自動加上 data: 前綴與 MIME 類型，也能從 DataURL 中提取純 Base64 部分。

**典型用途：** ① CSS 背景圖嵌入；② HTML <img> 內聯 src；③ Markdown 圖片內聯；④ 文本編輯器貼上圖片；⑤ data URI Scheme 偵錯。

適用場景

  • 把已有 Base64 加上 data: 前綴與 MIME 類型，得到可直接嵌入 HTML 的 DataURL
  • 從已有 DataURL 中提取純 Base64 部分，便於重新組裝或傳輸
  • 偵錯前端 data: URI 資源時確認 Base64 負載是否完整
  • 自動辨識剪貼簿裡 Base64 對應的 MIME 類型（PNG/JPEG/PDF 等）
  • 為 CSS background-image 或 HTML <img src> 準備 data URL
  • 把圖片 Base64 在 Markdown 文本編輯器中轉為可貼上的 DataURL

使用方法

  1. 選擇方向：「加頭」（純 Base64 → DataURL）或「去頭」（DataURL → 純 Base64）。
  2. 在左側輸入框貼上內容：加頭模式貼上純 Base64，去頭模式貼上 data:... 字串。
  3. 加頭模式可選：保留「自動辨識」或在 MIME 下拉中選擇具體類型。
  4. 工具即時轉換，結果顯示在右側，可複製或下載為 txt。

功能特點

  • 兩個方向互轉：純 Base64 ↔ DataURL
  • 11 種 MIME 類型預設：圖片、文件、音視訊、文字
  • 自動辨識 MIME：透過魔術位元組識別 PNG/JPEG/GIF/WEBP/PDF
  • 去除空白：自動清理換行、空格等雜質字元
  • 即時轉換：輸入 300ms 後自動重算
  • 方向自動切換：切換方向時輸入輸出自動交換
  • 一鍵複製：轉換結果可直接複製到剪貼簿
  • 下載 txt：儲存為 dataurl-result.txt 檔案
  • PC / 行動裝置自適應：左右分欄可拖曳 / tab 切換
  • 純瀏覽器處理：內容不上傳伺服器

最佳实践

先用自動辨識

如不確定 MIME 類型，保留預設「自動辨識」讓工具偵測；辨識失敗再手動選擇。

大小限制

DataURL 在瀏覽器有 2-4MB 限制，過大檔案建議直接引用 URL 而非嵌入。

去除雜質字元

貼上 Base64 時常含換行，工具會自動去除；如對雜質敏感可先用「Base64 清理」。

對比檢查

轉換後可用「Base64 校驗」或瀏覽器開發者工具確認 DataURL 是否能正常載入。

複製後再檢查

貼到目標位置後用瀏覽器 console 檢查解碼結果是否符合預期。

常見問題

加頭模式已經在自動辨識嗎？

是的。本工具預設開啟自動辨識，透過偵測 Base64 的前幾個位元組（魔術位元組）判斷是 PNG、JPEG、GIF、WEBP 還是 PDF。如果需要其他 MIME 類型（如 application/json、video/mp4），可在下拉中手動選擇。

已經有 data: 前綴的輸入會怎樣？

加頭模式下，若輸入已以 data: 開頭，工具會原樣返回，不重複新增前綴。去頭模式下若輸入不是 DataURL 格式，工具會去除空白字元後返回純 Base64。

自動辨識失敗會怎樣？

如果 Base64 不符合 PNG/JPEG/GIF/WEBP/PDF 中的任何魔術位元組，自動辨識會回退到 application/octet-stream。如需其他 MIME 類型，建議手動選擇。

支援哪些 MIME 類型？

image/png、image/jpeg、image/gif、image/webp、image/svg+xml、application/pdf、application/json、text/plain、text/html、audio/mpeg、video/mp4，共 11 種常用類型。

DataURL 在瀏覽器裡有大小限制嗎？

是的。多數瀏覽器對 DataURL 總長度有限制（約 2MB-4MB 不等），超過限制會導致資源載入失敗。大檔案建議改用一般 URL 引用。

DataURL 能用在哪些地方？

HTML 的 <img src>、CSS 的 url()、<a href> 下載、JavaScript 的 fetch、Markdown 的圖片語法、JSON 資料中的內嵌資源等。

會自動去除 Base64 裡的換行和空格嗎？

會的。加頭模式下會先去除換行和空格再拼接前綴；去頭模式從 DataURL 提取後也會去除空白字元。

切換方向時輸入會變嗎？

切換方向時，工具會自動把當前輸出作為新輸入，便於連續操作。

內容會上傳伺服器嗎？

不會。所有轉換在瀏覽器本地完成，輸入和輸出都不離開你的裝置。

術語表

DataURL
RFC 2397 定義的資料 URI 方案，格式 data:[<mime>];base64,<data>，可直接作為 src、href、url() 等的值。
MIME 類型
媒體類型識別，如 image/png、application/pdf。本工具支援 11 種常用 MIME 類型，並可自動辨識。
魔術位元組 (Magic Bytes)
檔案開頭的固定位元組，用於識別檔案類型。本工具透過偵測魔術位元組識別 PNG/JPEG/GIF/WEBP/PDF 等格式。
Base64
用 64 個可列印字元表示二進位資料的編碼方式。DataURL 的 payload 部分就是 Base64。
Data URI Scheme
RFC 2397 定義的 data: URI 協定，是 DataURL 的正式規範名稱。

Authoritative References