Flutter 的 Base64 圖片字串，是將原始的 PNG、JPEG、GIF 或 WebP 檔案，使用 RFC 4648 字元集改寫成文字，再貼到 Dart 常數中，這樣 dart:convert 中的 base64Decode() 才能將 Uint8List 傳遞給 Image.memory()。「Image to Base64 Converter」轉換器完全在您的瀏覽器內，從您挑選的本機檔案將圖片轉成 base64，會從檔案位元組而非檔名偵測真正的容器格式，並複製結果，讓您可以放入 Flutter widget、REST 負載或 Firestore 文件欄位中。編碼器遵循 RFC 4648 字元集，使用大寫字母、小寫字母、數字、加號和斜線，當最後一組少於三個位元組時會寫入結尾等號，並以三個位元組對齊的區塊處理，不會進行變動數量的全緩衝轉換，因此數 MB 的圖片不會溢位 JavaScript 呼叫堆疊。由於整個管線——檔案讀取、容器偵測、瀏覽器解碼、Base64 編碼和剪貼簿複製——都在開啟的瀏覽器分頁中執行，原始圖片從不離開本機，這對於不應上傳到外部轉換服務的截圖、內部 mockup 和未發布的美術素材來說非常方便。
為什麼 Flutter 專案需要使用 Base64 字串
Flutter 在行動框架中相當獨特，開發者經常需要將圖片表示為文字。Asset bundle 是已發布美術素材的一般管道，但仍有一長串實際的工作流程需要行內字串：
- 將 logo、啟動畫面圖片或主視覺插圖直接嵌入 widget 程式碼，讓它編譯進二進位檔中，並在離線時仍可使用。
- 將擷取的照片、簽名或掃描文件傳送到只接受透過 REST 端點傳遞 JSON 的後端。
- 將使用者內容保存在像 Firestore 這類文件資料庫中，因為結構化欄位比 blob 參照更容易查詢。
- 為 widget 測試、golden 測試或整合測試產生確定性的 fixtures，讓每次 CI 執行都能渲染相同的圖片。
- 產生 QR code、PDF 或可列印的識別證，其負載通道是純文字。
在每個情況下，開發者都希望將原始檔案位元組轉成字元，而不是重新壓縮、調整大小或校色的版本。
Base64 圖片實際在 Flutter 應用程式中的角色
從遠處看，這些使用案例很相似，但對編碼後的字串施加了不同的限制。下表將每個情境對應到其典型的壓力點，讓正確的編碼路徑在位元組離開來源資料夾之前就一目了然。
| Flutter 情境 | Base64 為何自然契合 | 必須注意的壓力點 |
|---|---|---|
| Firestore 文件欄位 | 行內圖片資料，無需額外的儲存呼叫 | 每份文件 1 MiB 上限 |
| REST API JSON 主體 | 伺服器預期接收字串，而非 multipart 上傳 | 大約 33% 的體積膨脹 |
| Flutter Web 行內資產 | CSS 規則或 HTML 屬性中的 data URL | 瀏覽器對 data URL 的快取規則 |
| QR code 或 PDF 負載 | 純文字傳輸通道 | 實際容量很小 |
| Widget 測試 fixture | 跨機器可重現的位元組 | 編碼必須完全位元組精確 |
對於小型圖示和識別證的使用案例來說，這點開銷無關緊要。但對於 Firestore 和 QR code 的情況，膨脹係數和解碼後的像素面積將決定負載是否能放進接收容器中。
使用瀏覽器工具產生已驗證的字串
在您用於開發的同一個瀏覽器中開啟 Image to Base64 Converter，然後依序執行以下三個步驟。
- 從磁碟挑選一個 PNG、JPEG、GIF 或 WebP 檔案，並選擇輸出模式：用於 Dart 常數的純 Base64，或在您需要 Flutter Web、CSS 或 HTML 的自含字串時，使用完整的 data URL。
- 執行轉換並閱讀工具在預覽旁邊顯示的中繼資料區塊。確認偵測到的位元組格式、實際解碼後的寬度和高度、檔案大小以及渲染的預覽，全部都與您打算編碼的圖片相符。
- 複製完整的輸出。在 data URL 模式下，前綴為 data:image/png;base64,、data:image/jpeg;base64,、data:image/gif;base64， 或 data:image/webp;base64,，取決於結構偵測器在位元組中實際找到的內容——而不是檔名或檔案選擇器所宣稱的內容。
更換檔案或切換輸出模式會在新執行開始前清除預覽、輸出文字、錯誤訊息、忙碌指示器和任何「已複製」狀態，因此舊的文字不會洩漏到剪貼簿或使用它的 widget 樹中。
對 Flutter 負載有影響的限制
這個工具刻意採用嚴格限制，而其中幾個嚴格的邊界正好對應到 Flutter 的痛點。輸入上限正好是 5 MiB，等於 5,242,880 bytes。瀏覽器回報的檔案大小會在讀取前檢查，而產生的 ArrayBuffer 長度會在讀取後再次檢查，因此邊界本身會被接受，超過一個位元組則會以明確的錯誤訊息拒絕，而不是默默截斷。
在該位元組預算內可容納的最大 Base64 字串長度為 6,990,508 個字元；最長支援的 data URL 前綴會額外增加 23 個字元，使輸出上限達到 6,990,531 個字元，下一個字元會被拒絕。不會默默截斷任何內容，過大的檔案會產生明確的錯誤，不會有部分結果。
解碼後，任何一邊不得超過 20,000 像素，總像素面積不得超過 40,000,000 像素。這項限制的存在，是因為高度壓縮的圖片可能會膨脹成大得多的解碼後點陣圖，而在 Image.memory() 中失控的記憶體配置，正是那種難以重現且無法出貨的當機類型。如果來源圖片已達到或接近這些限制，請先用 Image Compressor 壓縮檔案，或在編碼前先變更尺寸。
轉換過程會逐字保留原始位元組。工具絕不會繪製到 canvas 上、不會重新壓縮、不會重新上色、不會壓平透明度、不會從動畫 GIF 中挑選單一影格、不會去除中繼資料，也不會修復損壞。受限制的預覽僅是版面配置細節。動畫 GIF 和動畫 WebP 負載在 Flutter 消費者能播放時仍會保持動畫。
從 Base64 文字到 Flutter Widget
將複製的字串放入 Dart 檔案頂端的 const 中，解碼一次，然後將位元組傳遞給 Image.memory。dart:convert 中的 base64Decode 呼叫會回傳 Uint8List，這正好是 Image.memory 所需的型別。一個典型的程式碼區塊如下：
const String kLogoBase64 = "iVBORw0KGgo...";
final Uint8List logoBytes = base64Decode(kLogoBase64);
final Widget logo = Image.memory(logoBytes);
對於 data URL 模式，相同的模式也適用，但 base64Decode 不認識 data:image/png;base64， 前綴。請手動跳過第一個逗號來去除前綴，或僅將純 Base64 輸出貼入常數中。對於 Flutter Web，請將完整的 data URL 直接貼到 Image.network 呼叫中（將其視為一般 URL），或貼到 web/index.html 模板內的 CSS background-image 規則中。
提交前的來回驗證檢查
簡短的來回驗證檢查值得花時間執行。將複製的字串貼到 Base64 to Image Converter 中進行解碼，並確認渲染的預覽與原始圖片相符。反向工具使用相同的結構偵測器和相同的瀏覽器解碼器，因此成功的來回驗證是 Flutter 將收到的位元組完整且位元組精確的有力證據。
何時應先使用配套工具
有些任務屬於 Base64 步驟的上游，將它們合併到編碼器中會破壞 Flutter 負載所依賴的逐位元組保證。
- 當檔案已達 5 MiB 邊界，或目的地（Firestore 文件、SMS、QR code）無法承受 33% 的額外負擔時，請使用 Image Compressor。
- 當解碼後的像素任一邊超過 20,000 或總面積超過 40,000,000，或目的地僅需要較小的點陣圖時，請先使用縮放工具。
- 當後端給您一個 Base64 字串，而您需要驗證、預覽或下載它所代表的圖片時，請使用 Base64 to Image Converter。
- 當目的地平台不支援編碼器接受的四種容器格式之一時，請使用格式轉換工具（PNG 轉 JPG、JPG 轉 PNG、WebP converter）。
將編碼與最佳化、縮放和格式轉換分開處理，可以讓產生的字串可預測，也讓使用它的 Flutter widget 更容易除錯。
如需更深入的瞭解，請參閱 How to Edit EXIF Data in Windows 11 Without Uploading。
如需更深入的瞭解，請參閱 How to Invert Colours on an Image Without Uploading It。