自動為 AI 生成的圖片批次加上標題文字與浮水印，支援視覺化設定編輯介面。
檔案下載:
https://github.com/max32002/ai-cover-generator與 AI 的聊天過程:
https://stackoverflow.max-everyday.com/2026/03/ai-image-with-chinese-title/
📖 目錄
🚀 專案簡介
AI Cover Generator 是一套專為內容創作者設計的自動化圖文包裝工具。它能解決 AI 生成圖片雖然精美，但往往缺乏標題與品牌識別的問題。
本工具會自動掃描 raw_images/ 資料夾，為圖片疊加具有設計感的漸層遮罩、標題文字、標題背景塊以及品牌浮水印。它特別適合用於 YouTube 縮圖、社群貼文封面、部落格文章配圖 等需要快速大量產出一致性設計的需求。
與一般工具不同，我們提供了基於瀏覽器的 視覺化即時預覽編輯器，讓您不必具備寫程式知識，也能輕鬆調校出理想的排版效果。
✨ 功能特色
- ⚡ 一鍵批次處理：採用高效
sharp引擎，數秒內即可處理數十張 JPG / PNG / WebP 圖片。 - 👁️ 視覺化即時預覽：內建
edit-config網頁介面，調整參數時 Canvas 畫布會 120ms 內即時重繪，所見即所得。 - 🌗 智慧環境感知：自動偵測原圖底色亮度，智慧切換深淺色文字（亦可手動指定），確保標題始終清晰。
- 🖼️ 進階標題樣式：
- 自訂背景塊：可設定背景色、透明度、外擴內距與圓角，提升在雜亂背景下的閱讀率。
- 文字特效：支援粗體、斜體與自訂陰影顏色，強化視覺層次感。
- 📐 動態版面配置：
- 比例座標系：所有字級、邊距皆以圖片寬度比例計算，面對不同解析度原圖也能維持比例一致。
- 多行智慧斷行：獨家字寬計算法（中文1，ASCII 0.55），支援置中、靠左、靠右自動對齊。
- 🔤 系統字型列舉：自動抓取您電腦中已安裝的所有字型，並提供搜尋與即時套用功能。
- 💧 品牌保護：內建浮水印系統，可自由調整位置與透明度，防止作品被隨意盜錄。
🛠️ 安裝環境
前置需求：
- Node.js v18 以上
安裝依賴套件：
npm install
主要依賴套件為
sharp，用於高效合成 SVG 文字圖層至圖片上。
⚡ 快速開始
- 將原始圖片放入
raw_images/資料夾（支援.jpg、.jpeg、.png、.webp） - 確認
config.json內的title為你想要的標題文字 - 執行批次處理：
npm start
或直接雙擊 run.bat，或在終端機執行：
run.bat
- 輸出圖片將存放於
final_posts/資料夾，檔名前綴為covered_
📝 add-text.js 使用說明
add-text.js 是本專案的核心批次處理程式，執行後會自動：
- 讀取
config.json取得所有參數 - 掃描
config.paths.inputDir（預設./raw_images）中的所有圖片 - 對每張圖片執行以下處理：
- 偵測圖片平均亮度，決定文字為白色或深色
- 在圖片底部 40% 區域疊加漸層遮罩
- 將
config.title文字依layout.maxCharsPerLine自動斷行 - 渲染陰影層 + 主文字層（SVG 合成）
- 若啟用浮水印，在指定位置疊加浮水印
- 輸出至
config.paths.outputDir（預設./final_posts），檔名加上covered_前綴
執行方式
# 單次執行 npm start # 或直接用 node node add-text.js # 監聽模式（修改 config.json 後自動重新執行） npm run dev
執行輸出範例
✅ 已處理: covered_image01.jpg
✅ 已處理: covered_image02.png
❌ 錯誤: raw_images/broken.jpg unsupported image format
文字渲染與繪圖原理
為了確保輸出品質與效能，系統採用 SVG Layering 技術進行多圖層合成：
- 基礎圖層 (Base Layer): 載入並處理原始圖片快取。
- 遮罩圖層 (Mask Layer): 自動生成線性斜向漸層 SVG，覆蓋在底部提供文字閱讀所需的對比度。
- 背景圖層 (Background Layer): 若啟用了「標題背景」，系統會預先計算文字渲染後的包圍矩形，並繪製具圓角的填充色塊。
- 文字圖層 (Text Layer): 依據對齊方式、字型優先順序 (Font Stack) 生成具備陰影與正確斷行的 SVG Text。
- 浮水印 (Watermark): 最後在指定角落疊加具透明度的品牌標註。
- 最終壓製: 透過
sharp影像引擎將所有 SVG 與緩衝區圖層壓製，產出最高品質的成品。
| 渲染細節 | 技術邏輯 |
|---|---|
| 自適應置中 | 透過計算每行字寬與內距，自動校準背景矩形的起始點位置 |
| 斷行計算 | ASCII 字元計 0.55，中文字計 1，依 maxCharsPerLine 精確強制換行 |
| 座標系統 | 使用 Relative Scalable System，參數 0.06 即代表圖片寬度的 6% |
| 環境偵測 | 縮放圖片至 1×1px 以 YUV 權重取值，當亮度 < 0.5 時切換為亮色方案 |
🖥️ edit-config 視覺化編輯器
edit-config.bat 會啟動一個本機網頁伺服器（editor-server.js），並自動開啟瀏覽器，讓你在視覺化介面中編輯 config.json，無需手動修改 JSON 檔案。
啟動方式
直接雙擊 edit-config.bat，或在終端機執行：
edit-config.bat
瀏覽器會自動開啟 http://localhost:3737
按 Ctrl+C 或關閉終端機視窗即可停止伺服器。
介面功能
左側：🔤 系統字型選擇器
- 自動列舉出電腦上所有已安裝的系統字型（支援 Windows / macOS / Linux）
- 搜尋框可即時篩選字型名稱
- 點擊任一字型可即時預覽「漢字 Abc 123 いろは」的渲染效果
- 選取字型後，會自動覆蓋
config.fontFamily陣列的第一項，其餘 Fallback 字型保持不變
右側：⚙️ 參數設定
可直接在表單中修改以下設定：
| 欄位 | 對應 config.json 參數 |
|---|---|
| title | 標題文字內容 |
| align | 文字對齊方向（center / left / right） |
| maxCharsPerLine | 每行最大字元數（中文1，ASCII 0.55） |
| fontSizeRatio | 字級比例（相對於圖片寬度） |
| paddingRatio | 邊距比例（相對於圖片寬度） |
| bold | 是否啟用粗體文字 |
| italic | 是否啟用斜體文字 |
| shadowEnable | 是否啟用文字陰影 |
| shadowOffset | 陰影偏移量（像素） |
| titleBgEnable | 是否啟用標題背景色塊 |
| titleBgColor | 標題背景顏色（支援 hex, rgb, rgba） |
| titleBgOpacity | 標題背景透明度（0.0 ~ 1.0） |
| titleBgOffsetYRatio | 標題背景垂直偏移微調（正值向上） |
| titleBgPaddingRatio | 標題背景向外擴張的內距比例 |
| titleBgRadius | 標題背景矩形的圓角大小 |
| useAutoLuminance | 是否啟用自動亮度偵測 |
| forceTextColor | 強制文字顏色（停用自動亮度時生效） |
| forceShadowColor | 強制陰影顏色 |
| watermark.enable | 是否啟用浮水印 |
| watermark.text | 浮水印文字 |
| watermark.fontSizeRatio | 浮水印字級比例 |
| watermark.opacity | 浮水印透明度（0 ~ 1） |
| watermark.bottomRatio | 浮水印垂直位置（佔圖片高度比例，從底部算起） |
| watermark.position.right | 浮水印靠右（true）或靠左（false） |
| inputDir | 來源圖片資料夾路徑 |
| outputDir | 輸出圖片資料夾路徑 |
儲存設定
點擊右上角 💾 儲存 config.json 按鈕，所有變更會立即寫回 config.json 檔案。
⚙️ config.json 參數說明
{
"paths": {
"inputDir": "./raw_images", // 原始圖片來源資料夾
"outputDir": "./final_posts", // 輸出圖片目標資料夾
},
"title": "讓 AI 封面圖自動加上中文標題", // 疊加在圖片上的標題文字
"align": "center", // 文字對齊：center | left | right
"fontFamily": [
// 字型優先順序（陣列，依序 Fallback）
"PingFang TC",
"Noto Sans TC",
"Microsoft JhengHei",
"sans-serif",
],
"customColors": {
"useAutoLuminance": true, // true = 自動依圖片亮度決定文字顏色
"forceTextColor": "#ffffff", // 停用自動亮度時的強制文字顏色
"forceShadowColor": "rgba(0,0,0,0.5)", // 停用自動亮度時的強制陰影顏色
},
"layout": {
"maxCharsPerLine": 15, // 每行最大字元數（中文字計1，英文字元計0.55）
"fontSizeRatio": 0.055, // 字級 = 圖片寬度 × fontSizeRatio
"paddingRatio": 0.06, // 邊距 = 圖片寬度 × paddingRatio
"bold": false, // 是否啟用粗體
"italic": false, // 是否啟用斜體
"shadowEnable": true, // 是否啟用文字陰影
"shadowOffset": 2, // 陰影偏移像素值
"titleBgEnable": true, // 是否顯示標題背景色塊
"titleBgColor": "#c9c5c5", // 標題背景顏色
"titleBgOpacity": 0.5, // 標題背景透明度 (0.0 ~ 1.0)
"titleBgOffsetYRatio": 0.0, // 垂直偏移微調 (正值向上，負值向下)
"titleBgPaddingRatio": 0.2, // 背景向外擴張內距 (相對於字級)
"titleBgRadius": 8 // 背景圓角像素值
},
"watermark": {
"enable": true, // 是否顯示浮水印
"text": "Max的每一天", // 浮水印文字
"fontSizeRatio": 0.01, // 浮水印字級比例
"opacity": 0.1, // 浮水印透明度（0.0 ~ 1.0）
"position": {
"right": true, // true = 靠右，false = 靠左
"bottomRatio": 0.9, // 距底部的高度比例（0.9 表示距底部 90% 處）
},
},
}
📁 目錄結構
ai-cover-generator/
├── add-text.js # 核心批次處理程式
├── editor-server.js # 視覺化設定編輯器後端伺服器
├── edit-config.bat # 一鍵啟動視覺化編輯器（Windows）
├── config.json # 所有可調整參數設定檔
├── package.json
├── raw_images/ # 📥 原始圖片放置於此
└── final_posts/ # 📤 處理後圖片輸出於此
Facebook網友回應
