🎞️ #75 Slide Extractor 影片與 PDF 簡報擷取神器：PDF.js + jsPDF + JSZip + Firebase 設定流程的單檔擷取工具
#75 真實名稱「Slide Extractor - 影片與 PDF 簡報擷取神器」— 兩大模式（影片轉圖片 / PDF 轉圖片），用 PDF.js 抓 PDF 每頁渲染成圖、JSZip 打包下載、jsPDF 重新匯出、Firebase 設定流程（立即設定 / 取消 / 儲存並連線）。37,748 字元單檔 HTML 嵌進 Google Sites Embedded HTML。
老師備課最痛的「影片 + PDF → 圖片」
老師備課常需要：
- 把線上影片擷取單獨一幀做成教學圖片
- 把 PDF 簡報每頁轉成圖片貼到 Word / Google Slides
- 把學生作業 PDF 每頁存成 PNG 做歷程紀錄
傳統做法：
- ❌ PPT 截圖 → 解析度差
- ❌ 線上 PDF to JPG → 上傳隱私風險
- ❌ 第三方軟體 → 要付錢 / 裝程式 / Windows 才有
阿凱的 #75 Slide Extractor 反向：純瀏覽器內處理 + Firebase 帳號雲端記錄 + 零上傳到第三方。
#75 真實怎麼做？
真實標題：「Slide Extractor - 影片與 PDF 簡報擷取神器」
兩大模式：
- 影片轉圖片 🎬
- PDF 轉圖片 📄
處理流程章節：
- 「如何使用」（內建教學）
- 「正在處理 PDF 檔案」（進度模態）
Firebase 設定流程（按鈕抽出）：
- 「立即設定」
- 「取消」
- 「儲存並連線」
- → 第一次用要設定 Firebase 連線（存擷取設定 / 歷史 / 圖片資料庫）
真實技術棧（PDF.js + jsPDF + JSZip + Firebase）
純前端單檔 HTML：
- Tailwind CSS
- PDF.js（PDF 渲染每頁成 canvas）
- jsPDF（重新匯出 PDF）
- JSZip（把多張圖片打包下載成 zip）
- Firebase（雲端 config 與圖片儲存）
- 37,748 字元單檔 HTML
- 嵌進
sites.google.com/mail2.smes.tyc.edu.tw/swissknife/影片pdf轉圖片
跟 #94 封面接故事 / #76 WebSlide 的關係
阿凱 3 個 PDF/影片處理工具：
| 工具 | 主要功能 | LLM | 技術棧亮點 |
|---|---|---|---|
| #75 Slide Extractor | 影片 / PDF → 圖片 | ❌ | PDF.js + jsPDF + JSZip + Firebase |
| #76 WebSlide | 簡報播放器（17 種 3D 轉場） | ❌ | PDF.js + jsPDF + JSZip + Lucide |
| #94 封面接故事 | MV 封面 → AI 分鏡腳本 | ✅ Gemini 2.5 | ffmpeg.wasm |
#75 vs #76 技術棧重疊度高（都用 PDF.js / jsPDF / JSZip）— 阿凱「寫一次基礎模組 → 換主題複製做不同工具」的策略。
影片擷取功能怎麼運作？
從技術棧推測（沒有 ffmpeg.wasm signature）：
- 上傳影片 →
<video>元素載入 - 老師拖時間軸到想要的一幀
- 用
<canvas>.drawImage(video)截圖 - 一次截多個時間點 → JSZip 打包下載
跟 #94 封面接故事 用 ffmpeg.wasm 整影片串接不同 — #75 是「簡單擷取單幀」純 video API 路線。
隱私機制
- PDF 完全在瀏覽器內處理（不傳第三方）
- Firebase 只存設定 / config（不存原始檔案）
- 嵌進學校 Google Sites → 掛學校信箱登入才能用 Firebase 功能
配對工具推薦
- #76 WebSlide 簡報播放器 — 同款 PDF.js + jsPDF + JSZip 技術棧
- #94 封面接故事 — 影片進階版（用 ffmpeg.wasm + Gemini 2.5）
- #27 ⬅️好用小工具（許願池） — swissknife 工具集
適用對象
- 各科老師備課（線上影片擷取教學一幀）
- 美術 / 視藝老師（PDF 圖文書 → 每頁 PNG）
- 行政老師（會議簡報 PDF 拆成圖貼網站）
- 想學「PDF.js + JSZip 工作流」的開發者
想試試？
第一次用：拖一個 PDF 進去 → 點「PDF 轉圖片」→ 系統渲染每頁 → 一鍵下載 zip 包。