在瀏覽器中安全預覽 Base64 圖片

可靠的圖片預覽包含兩個獨立步驟：解碼 Base64，再解碼圖片格式。字串可以通過第一步，卻因為截斷、型別錯誤或瀏覽器不支援而無法顯示。介面應區分這些狀態。

始終以位元組為中間結果

通過解析器移除已識別的 Data URI，校驗 Base64，然後得到 Uint8Array。不要讓影像位元組經過文本解碼器。本地預覽可以將位元組封裝為 Blob，再生成物件 URL，避免為了顯示而重新構造很長的 Base64。

async function previewRaster(bytes, type, imageElement) {
  const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
  if (!allowed.includes(type)) throw new Error('不支援的點陣圖預覽型別');
  const url = URL.createObjectURL(new Blob([bytes], { type }));
  try {
    imageElement.src = url;
    await imageElement.decode();
    return { width: imageElement.naturalWidth, height: imageElement.naturalHeight,
      dispose: () => URL.revokeObjectURL(url) };
  } catch (error) {
    URL.revokeObjectURL(url);
    imageElement.removeAttribute('src');
    throw error;
  }
}

及時釋放物件 URL

替換或移除預覽時呼叫返回的 dispose。反覆預覽卻不清理會佔用瀏覽器資源。不要在載入完成之前釋放，也不要把已釋放的 URL 用於後續下載。下載需要繼續可用時，應單獨管理生命週期。

使用真實圖片解碼反饋

檔案頭只是初步線索。影像元素的 decode 可以檢查瀏覽器是否能載入，並獲得尺寸。此處失敗時，應說明圖片解碼失敗，同時保留原始位元組供檢查或下載，而不是誤報 Base64 字母表錯誤。

儘可能在昂貴渲染前限制位元組和尺寸，小型壓縮檔案也可能展開為巨大圖片。SVG 屬於結構化標記，不能與普通點陣圖一視同仁，更不能直接把未知 SVG 或 HTML 插入頁面。

預覽與轉換也不同：顯示 JPEG 不會產生 PNG。轉換需要將解碼影像繪製到畫布，再按目標格式匯出，並明確質量和透明度選擇。Data URI 語法見 MDN: data URLs；預覽成功只是瀏覽器格式檢查，不是通用安全認證。