情境: AI神器查詢出的有用資訊，常常屬文字為主、表格為輔之核心重要資訊，雖可將它導出至Google Docs ,再列印成PDF檔；而如果善用Skill技能(亦即將下面PROMPT藍色提示詞)預先存成HTM2JPEG,只要於綜整結果文件後方加入 @html2jpeg 即可於雲端，立馬產出成可讀性佳JPEG圖檔。
# html2jpeg
將語意化 HTML/CSS 設計轉換為出版級、高清晰度、文字可讀性極佳的 JPEG 圖片渲染技能。
## Summary
本技能整合 WeasyPrint（向量排版引擎）、pypdfium2（PDFium 雙倍高清光柵化引擎）與 Pillow（影像最佳化封裝），建立沙盒內二進位閉環的無瀏覽器渲染架構。徹底規避傳統 Chromium/Puppeteer 在沙盒環境易發生的死鎖、超時或字型破碎問題，產出支援繁體中文（CJK）、排版緊湊、色彩豐富的高解析圖檔。
## When to Use
當使用者提出以下需求時觸發：
- 將文字報告、分析結論、商業簡報、技術架構或重點宣傳轉為易讀圖檔、手機長圖或資訊圖表
- 需要生成高解析度 JPEG 或 PNG 圖檔（如社群發布、LINE 圖卡、簡報圖檔、知識卡片）
- 要求排版具備卡片式容器、多階標籤、關鍵數據動態高亮與主題色塊視覺層次
- 需要將既有 HTML 檔案編譯轉存為圖片檔案交付給使用者
## Architecture & Core Pipeline
渲染流程依序執行三階段管線：
1. **語意化 HTML/CSS 結構化編排**：
- 設定繁體中文首選字型堆疊（`Noto Sans CJK TC, PingFang TC, Microsoft JhengHei, sans-serif`）。
- 透過 `@page` 注入超長單頁虛擬高度（如 `280mm 520mm`），搭配 `.container { page-break-inside: avoid; }` 避免跨頁切斷。
- 使用 CSS Grid / Flexbox 建立結構化資訊卡片、指標儀表板、時序步驟或對比矩陣。
2. **WeasyPrint 向量化編譯**：
- 透過 `weasyprint.HTML(string=...).write_pdf()` 於記憶體或暫存區生成無失真向量 PDF。
- 擺脫外部網路依賴與 GPU/瀏覽器程序鎖定。
3. **pypdfium2 雙倍採樣與智慧裁切**：
- 以 `scale=2.0`（Retina 視網膜級解析度，約 144~300 DPI）渲染為 PIL 影像。
- 轉為標準 RGB 色彩空間，並透過 NumPy 陣列自動偵測底色邊界，智慧裁減底部多餘空白。
- 以 `quality=95` 搭配 `optimize=True` 輸出體積小、文字邊緣無雜訊的 JPEG 圖檔。
## Step-by-Step Workflow & Python Script
執行轉圖任務時，執行以下核心 Python 渲染程式碼：
```python
import weasyprint
import pypdfium2 as pdfium
import numpy as np
from PIL import Image
def convert_html_to_jpeg(html_content: str, output_jpg_path: str, scale: float = 2.0, quality: int = 95):
page_style = '''
<style>
@page { size: 280mm 520mm; margin: 0; }
html, body { margin: 0; padding: 0; }
body { background-color: #f1f5f9; padding: 24px; }
.container { max-width: 100%; page-break-inside: avoid; }
</style>
'''
styled_html = html_content.replace('</head>', page_style + '</head>') if '</head>' in html_content else page_style + html_content
# 1. 向量 PDF 生成
pdf_bytes = weasyprint.HTML(string=styled_html).write_pdf()
# 2. 高解析光柵化
pdf = pdfium.PdfDocument(pdf_bytes)
page = pdf[0]
img = page.render(scale=scale).to_pil().convert('RGB')
# 3. 智慧底部空白裁切
arr = np.array(img)
bg_color = arr[0, 0]
diff = np.abs(arr.astype(int) - bg_color.astype(int)).sum(axis=2)
non_bg_rows = np.where(diff > 12)[0]
if len(non_bg_rows) > 0:
top = max(0, non_bg_rows[0] - 36)
bottom = min(img.height, non_bg_rows[-1] + 48)
img = img.crop((0, top, img.width, bottom))
# 4. 最佳化 JPEG 存檔
img.save(output_jpg_path, 'JPEG', quality=quality, optimize=True)
return output_jpg_path
```
## HTML & CSS Layout Best Practices（通用萬用規範）
- **字型與排版層次**：
- 標題採 `font-weight: 800`，內文採 `font-weight: 400~500`，行高設定在 `1.5` 至 `1.6` 之間。
- **核心關鍵數據動態高亮**：依當次任務主題（如 KPI 數據、關鍵量化指標、核心發現、成效統計或重點警語等）使用大字級（`22px~28px`）及鮮明色彩重點呈現，避免將欄位屬性寫死。
- **色彩與視覺心理學（依任務動態對位，非寫死單一領域）**：
- **核心原則**：樣版應具備泛用性，色彩系統須依每一次任務主題特性（商業財經、技術架構、教育培訓、法規警示、醫療生活等）動態指派語意色彩，嚴禁盲目套用特定行業名詞。
- **通用語意色彩映射指引（Semantic Color Mapping）**：
- **正向／達成／收益／健康項目**：綠色系（建議背景 `#f0fdf4`、文字/邊框 `#16a34a`）。適用於業績增長、合格通過、獎勵補助、正面效益等。
- **嚴重／警告／風險／負向項目**：紅色系（建議背景 `#fef2f2`、文字/邊框 `#dc2626`）。適用於重大虧損、高風險漏洞、重罰裁處、錯誤異常等。
- **注意／提醒／查核／中性警示**：琥珀/黃橙色系（建議背景 `#fffbeb`、文字/邊框 `#d97706`）。適用於待辦審核、潛在風險、重點抽查、提示注意等。
- **標準／流程／資訊／科技與行政**：深藍/科技淡藍（建議背景 `#eff6ff`、文字/邊框 `#2563eb`）。適用於常規流程、架構步驟、系統狀態、規範說明等。
- **進階／特色／維度拓展**：可依主題彈性選用紫青色系（如創新亮點 `#7c3aed`）、石板灰（中立輔助 `#475569`）等，維持全圖色彩主題一致性（主色不超過 3 種語意主軸）。
- **防斷頁設定**：
- 務必對主要區塊加入 `page-break-inside: avoid;`，防止渲染引擎拆解卡片。
## Gotchas
- 切勿使用不帶使用者資料目錄的 headless Chromium，避免觸發沙盒 SingletonLock 崩潰或超時。
- JPEG 格式不支援透明通道（Alpha），從 RGBA 轉換至 JPEG 前必須先執行 `.convert('RGB')`，否則會觸發 OSError 錯誤。
- `@page` 的高度必須大於 HTML 容器實際高度，以維持單張長圖呈現；後續透過自動裁切修剪多餘邊距即可。
- 樣版文字與標籤設定需具備通用適應能力，禁止在萬用核心規範中將數據類型或標籤名稱鎖定在單一特定事件或業務情境。
自訂Gemini技能:
如果此PROMPT提示詞常使用,可以經由WEB版選單左下方⌈設置⚙️⌋|技能 |創建🔽| 手動創建✏️|將上面藍色部分提示詞當⌈指令⌋貼上，命名為html2jpeg ,下次呼叫 只需簡單輸入@html2jpeg + 將前揭綜整資訊轉換成可讀性佳 JPEG圖檔 ，立馬轉換成JPEG圖檔之好幫手😊
