Back

圖片合併引擎升級

圖片合併引擎升級

更新日期:2026-08-18

更新類型:核心最佳化

原生 Canvas 引擎

首頁Grid 頁的圖片合併功能已從 DOM 截圖方案切換為瀏覽器原生 Canvas。圖片的位置、尺寸、間距、外框、圓角、背景與 cover 裁切效果現在由 Canvas 直接繪製,預覽仍保留原有的頁面互動。

新的處理方式減少了對完整 DOM 與 CSS 截圖的依賴,也為後續的尺寸控制與輸出最佳化提供更穩定的基礎。所有圖片處理仍在本機瀏覽器中完成。

輸出格式與檔案大小

輸出流程現在使用 Blob,並依照下載選項重新編碼:

  • PNG:無損格式,適合透明背景、文字與圖形;檔案大小通常不會明顯小於其他 PNG 檔案。
  • JPEG:適合照片拼接,通常比 PNG 更小;透明區域會使用白色背景。
  • WebP:在畫質與檔案大小之間取得更好的平衡。
  • BMP:由於瀏覽器 Canvas 沒有統一可靠的 BMP 編碼器,會回退為 PNG 並使用 .png 副檔名。

JPEG 與 WebP 目前使用約 86% 的輸出品質。即使在預覽視窗中重新選擇格式,下載時也會依照目前選擇重新編碼,確保副檔名與實際內容一致。

背景顏色快速預設

首頁與 Grid 頁的背景顏色設定新增了可直接點選的預設色塊,包括白色、霧灰、暖橙、柔黃、薄荷綠、天藍、淡紫與深灰。

使用者可以點選色塊快速套用背景,也可以繼續開啟顏色選擇器自訂顏色。背景色會影響外框、圖片間距、圓角裁切後的區域以及透明圖片的顯示效果。

首頁垂直預覽最佳化

首頁預覽會依照版面方向採用不同的捲動策略:垂直版面會自動限制內容寬度並隱藏水平捲軸,水平版面則保留水平捲動能力,方便查看寬圖拼接結果。垂直版面的寬度限制也避免隱藏捲軸後裁切圖片內容。

隱私保護維持不變

圖片選擇、版面計算、Canvas 繪製、格式編碼與下載都在使用者自己的瀏覽器中完成。圖片不會上傳到伺服器,也不會交由第三方處理。