圖片轉 Base64 工具
將經驗證的 PNG、JPEG、GIF 或 WebP 檔案轉換為純文字 Base64 或精確的圖片資料 URL,且不會上傳任何內容。
隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。
使用方式
- 1.選擇一個 PNG、JPEG、GIF 或 WebP 檔案,並選擇純粹的 Base64 或圖片資料 URL。
- 2.轉換檔案並確認偵測到的位元組格式、實際解碼維度、檔案大小與預覽。
- 3.複製完整的輸出內容,其資料 URL 來自於選取該模式時驗證過的圖片位元組。
關於圖片轉 Base64 工具
圖片轉 Base64 會將本機的 PNG、JPEG、GIF 或 WebP 檔案轉換為標準 RFC 4648 Base64,完全在你的瀏覽器中執行。選擇圖片,選取純粹的 Base64 或完整的資料 URL,執行轉換,檢視驗證過的預覽,並複製精確的文字輸出。這個檔案不會上傳至 Lizely 或傳送至外部轉換服務。這讓這個工具在 API 載體、JSON 範例、HTML 或 CSS 測試、電子郵件範本、離線原型、測試資料以及除錯流程中特別有用,當需要將現有的圖片表示為文字時。轉換器不信任檔案名稱副檔名、檔案選擇器接受過濾器或作業系統提供的 MIME 字串。這些值只是便利的提示,可能會遺失、過時或故意誤導。相反地,與配對的 Base64 到圖片工具使用的相同純結構偵測器會檢查實際的位元組。PNG 必須包含完整的八位元簽名、正確形狀的第一 IHDR 塊,以及終端 IEND 界限。JPEG 必須以 SOI 開始,並跟著一個標記,並以 EOI 結尾。GIF 必須包含 GIF87a 或 GIF89a 頭部,足夠的位元組用於其邏輯螢幕描述,以及終端尾標。 WebP 必須具有與檔案、WEBP FourCC 以及受限制的 VP8、VP8L 或 VP8X 第一區塊完全相符的 RIFF 長度。純粹的魔術位元組與截斷的容器會被拒絕。結構預檢測故意在真實瀏覽器影像解碼之後進行。瀏覽器必須先解碼 Blob 並報告正向的尺寸,才會顯示任何結果。因此,即使載入的資料與已知標頭相似,也不會僅因第一位元組匹配而產生看似成功的輸出。偵測到的位元組格式會決定 data URL 模式下的 MIME。即使 PNG 重新命名的 photo.jpg 或宣告為 image/jpeg,仍會產生 data:image/png;base64,後接載入的資料。純模式僅返回標準 Base64 字元與填充。編碼遵循 RFC 4648 字母表,包含大寫字母、小寫字母、數字、加號與斜線,並在最後一組少於三個位元組時寫入一個或兩個終端等號。手動編碼器以受限制的位元組區塊運作,這些區塊與三個位元組組對齊。它從不將完整的位元組陣列轉換為 String.fromCharCode 或類似變長呼叫,因此多兆位元的影像不會溢位 JavaScript 呼叫堆疊。 合併段落僅改變結果的組成方式,不會抽樣、縮短、包裝或以其他方式修改編碼位元組。公開的 RFC 4648 向量驗證了組合與補位情況。所有四種圖片格式的完整測試檔驗證了正確的已知輸出、精確的 data URL MIME,以及與逆向工具共用的嚴格解碼器中每一個位元組的精準回傳。輸入限制為恰好 5 MiB,等於 5,242,880 位元組。此邊界被接受,但超出一個位元組將被拒絕,且在瀏覽器報告大小前,不會讀取檔案內容。讀取後會再次檢查實際 ArrayBuffer 長度。該位元組預算下最大支援的 Base64 長度為 6,990,508 個字元。輸出預算包含最長支援的 data URL 字首,並僅接受恰好 6,990,531 個字元,拒絕下一個字元。不會有任何靜默截斷。過大檔案將產生明確錯誤,且不會產生部分結果。解碼後,圖片邊界不得超過 20,000 像素,總面積不得超過 40,000,000 像素。這些限制重要,因為壓縮圖片在解碼後可能佔用遠多於原始檔案大小的記憶體。 允許精確的限制;過多的邊界或像素區域會被拒絕。轉換會在 Base64 負載中保留原始圖片的位元組。它不會繪製到畫布、調整大小、重新壓縮、重新上色、壓平透明度、選擇 GIF 影格、移除後設資料、修復損壞或最佳化檔案大小。當你在支援動畫的消費者端時,動畫 GIF 和 WebP 的位元組會保持動畫狀態。受限制的預覽僅影響頁面佈局。Base64 本身在資料 URL 前置詞前會增加約三分之一的傳輸大小,因此不應用於正常網站傳輸的普通圖片檔案。它最適合在需要特定文字表示的情況下使用。選擇其他檔案或更改輸出格式會立即移除之前的預覽、輸出、錯誤、忙碌狀態和複製狀態。每個檔案讀取和瀏覽器解碼都屬於一個世代。較舊檔案的延遲完成無法覆蓋較新的選擇。臨時 ObjectURLs 在替換、驗證失敗、格式更改和元件解除安裝時會被撤銷。 若 createImageBitmap 存在且拒絕該圖片,轉換器將直接報告此錯誤,而非透過第二條解碼路徑隱藏;僅當 API 不可用時,才會使用 HTMLImageElement 作為備用。複製操作也是非同步且世代受保護的,因此舊的剪貼簿承諾無法在結果變更後發布錯誤的「已複製」狀態。若剪貼簿被拒絕,仍可見輸出內容,並可手動選擇與複製。錯誤會區分輸入缺失或空值、位元組過多、容器不完整或不支援、瀏覽器解碼失敗、維度不正確、解碼後維度過大、輸出長度過長。任何錯誤路徑均不會讓先前成功的結果繼續顯示。支援僅限這四種位元組容器;SVG、AVIF、HEIC、BMP、TIFF、PDF 與任意文字均不包含在內,即使瀏覽器或檔名延伸名稱稱為圖片。若需其他格式,請先使用專用轉換工具。反向流程請使用 Base64 至圖片。若僅需一般文字而非圖片容器,請使用 Base64 編碼與解碼。若需較小輸出,建議先使用圖片壓縮工具最佳化原始檔。 若需調整尺寸,請先使用圖片縮放工具。將這些任務分離可避免隱藏的重新壓縮,並確保輸出可預測。即使圖片來源未知,也應視為不可信內容,即使它仍為本機檔案:成功的瀏覽器解碼僅驗證技術可讀性,而非作者、真實性、可訪問性、版權狀態、審查安全或無隱藏資料。
方法與來源
此元件先檢查瀏覽器報告的檔案大小,再讀取內容,並再次驗證所產生的 ArrayBuffer 長度。一個共享的純驗證器必須擁有 PNG、JPEG、GIF 或 WebP 的完整結構邊界,並提供可信的 MIME 型別;檔名與宣告的 MIME 型別皆不會影響輸出。使用該偵測到的 MIME 型別所建立的 Blob 必須透過 createImageBitmap 進行解碼,僅在 API 不可用時才會使用 HTMLImageElement;解碼拒絕將被標準化為明確的無結果錯誤。正整數尺寸限制為每邊最多 20,000 像素,總像素數不超過 40,000,000。手動 RFC 4648 壓縮編碼器會處理三位元組對齊的區塊,不使用可變長的整個緩衝區轉換,會輸出標準化填充,且絕不截斷。5,242,880 位元組輸入邊界、計算出的 Base64 長度,以及 6,990,531 字元最大輸出邊界皆會精確檢查。未知的輸出模式將直接失敗,而非靜默轉為普通 Base64。產生計數器、掛載的保護機制、複製世代、計時識別清理以及 ObjectURL 釋放,可防止舊資料讀取、舊剪貼簿狀態以及資源洩漏。
常見問題
- 圖片轉 Base64 會上傳或儲存我的檔案嗎?
- 不會。檔案讀取、容器偵測、瀏覽器解碼、Base64 編碼、預覽建立與複製皆發生在當前瀏覽器標籤中。當結果變更或工具關閉時,臨時的 ObjectURL 會被廢除。
- 若檔名或 MIME 型別錯誤會怎麼樣?
- 這些內容在格式選擇時會被忽略。轉換器會從其位元組中識別出完整的 PNG、JPEG、GIF 或 WebP 容器,並透過瀏覽器驗證,之後在資料 URL 模式中使用偵測到的 MIME 型別。
- 轉換會調整尺寸、重新壓縮或移除圖片元資料嗎?
- 不會。Base64 輸出代表原始驗證過的檔案位元組,完全不進行畫布繪製或重新繪製圖片,預覽尺寸僅為顯示限制。
- 為何 Base64 輸出大於原始圖片檔案?
- Base64 會用四個文字字元來表示每個三位元組輸入,因此通常會在任何資料 URL 字首之前增加約三分之一的資料量。除非需要文字表示,否則請使用普通圖片檔案與網址。
相關工具
圖片工具 使用指南
查看全部- Image to Base64 in JavaScript Without Writing Code (英文原文)
- Get a Base64 Image String for Flutter Without Uploading (英文原文)
- Convert an Image to Base64 in Angular: A Practical Guide (英文原文)
- How to Convert an Image to Base64 in Your Browser (英文原文)
- How to Add a Background to a PNG for Your Website (英文原文)
- Convert WebP to GIF on Mac Without Uploading It (英文原文)
- How to Convert WebP to GIF in Your Browser (英文原文)
- Convert SVG to PNG With a Transparent Background (英文原文)
- How to Convert SVG to JPG in Windows Without Software (英文原文)
- How to Make an Image a Solid Color in Photoshop (英文原文)
- Add Rounded Corners to a Photo in Your Browser (英文原文)
- How to Convert PNG to JPG Without Losing Quality (英文原文)
- Image Placeholder for Photoshop, Without the App (英文原文)
- Cities: Skylines 2: Create a Reference Overlay PNG Locally (英文原文)
- Turn Your Memento Backpack Division 2 Hunt Into a Meme (英文原文)
- Convert JPG to PNG Without Canva: A Faster Way (英文原文)
- How to Put an Image to PDF Without Uploading It (英文原文)
- Image to ASCII Explained: How Pixels Become Text (英文原文)
- Change Image DPI in Illustrator Without Re-encoding (英文原文)
- Resizing an Image in Paint? Try Your Browser Instead (英文原文)