TextCards – 九宮格卡片生成器

之前都是手動使用 photoScape X 拼貼收到的到圖片, 然後再打上文字, 但是沒什麼效率, 於是在電腦上建立一個空白的資料夾之後, 再執行 gemini CLI 開始跟 AI 聊天. 總共聊了 2 小時, 實際大約只有 30分鐘左右, 其他時間我出門去採買了.

│  Agent powering down. Goodbye!                                     │
│                                                                    │
│  Interaction Summary                                               │
│  Session ID:                 1c4157e7-c957-4c2e-a125-27c5123223fe  │
│  Tool Calls:                 30 ( ✓ 30 x 0 )                       │
│  Success Rate:               100.0%                                │
│  User Agreement:             100.0% (30 reviewed)                  │
│  Code Changes:               +1290 -1013                           │
│                                                                    │
│  Performance                                                       │
│  Wall Time:                  2h 17m 10s                            │
│  Agent Active:               14m 22s                               │
│    » API Time:               13m (90.4%)                           │
│    » Tool Time:              1m 22s (9.6%)                         │
│                                                                    │
│  Model                   Reqs   Input Tokens   Cache Reads  Output │
│  ──────────────────────────────────────────────────────────────────│
│  gemini-2.5-flash-lite     10         41,480             0         │
│  gemini-3-flash-preview    44        318,244       437,966         │
│                                                                    │
│  Savings Highlight: 437,966 (54.9%) of input tokens were served    │
│  from the cache, reducing costs.  

聊完天之後, 順便請 AI 寫一個 Readme.md 並分享到 github 上:
https://github.com/max32002/text-cards

結論：開始在電腦使用 GUI 之前，請先嘗試 CLI
https://max-everyday.com/2026/03/cli-first/

---

第二張圖片是, 設定好參數(grid.json)之後，點2下即可取得拼貼的結果.

這是一個基於 Node.js 與 Sharp 影像處理庫開發的自動化工具，旨在將多張圖片快速合併成專業的「九宮格卡片式（Card Style）」圖片。支援圓角處理、間距控制、自動置中排列，以及進階的文字疊加功能。

🌟 主要功能

• 九宮格合併：自動讀取目錄圖片，生成自定義行列（預設 3×3）的網格圖。
• 卡片風格：每張小圖支援獨立的圓角半徑與邊框間距。
• 自動置中：指定畫布大小後，九宮格內容會自動在畫布置中對齊。
• 進階文字疊加：
  • 支援 \n 手動換行。
  • 自動亮度感應 (Auto Luminance)：根據背景深淺自動切換文字顏色。
  • 多行背景框 (Title Background)：增強標題在複雜背景下的易讀性。
  • 精確偏移微調：可手動微調文字的 X, Y 座標。
• 全參數化設定：透過 grid.json 即可控制所有外觀細節，無需修改程式碼。
• 高效處理：使用 sharp 高效能影像處理庫，速度快且記憶體佔用低。

🛠️ 安裝說明

1. 確保已安裝 Node.js (建議 v18 以上)。
2. 安裝必要套件：npm install sharp

🚀 使用方法

1. 將原始圖檔放入 raw_images 資料夾。
2. 編輯 grid.json 調整您需要的參數。
3. 執行程式：node merge-images.js
4. 結果將儲存在 final_posts 資料夾中。

⚙️ 設定檔 (grid.json) 參數說明

參數	說明
canvas_width / canvas_height	最終畫布的大小。設為 0 則由內容自動決定。
card_width / card_height	每張小卡片的寬度與高度。
spacing	卡片與卡片之間的間距。
radius	卡片圓角半徑。
force_jpg	是否強制輸出為 JPG (預設為 true)。若為 false 則輸出帶透明背景之 PNG。
background_color	畫布背景顏色 (RGBA 格式)。
text_overlay.title	疊加在正中央的標題，支援 \n。
text_overlay.font_size	固定字體大小。設為 0 則依照畫布比例自動縮放。
text_overlay.offset_x / offset_y	標題位置的像素級微調。

📦 依賴項目

• sharp – 高效能影像處理引擎。