「Slide Extractor - 影片與 PDF 簡報擷取神器」是阿凱老師為老師備課「線上影片擷取單獨一幀做教學圖、PDF 簡報每頁轉成圖貼到 Word / Google Slides」打造的批次轉檔工具,純瀏覽器內處理 + Firebase 帳號雲端記錄 + 零上傳第三方。
🎯 核心特色
- 🎬 影片轉圖片模式 — 上傳影片 →
<video>元素載入 → 拖時間軸到想要的一幀 →<canvas>.drawImage(video)截圖 → 一次截多個時間點 → JSZip 打包下載 - 📄 PDF 轉圖片模式 — PDF.js 渲染每頁成 canvas → JSZip 打包下載成 zip
- 📦 JSZip 批次打包 — 多張圖片一鍵 zip 下載
- 📑 jsPDF 重新匯出 — 把處理後的圖片再打包成 PDF
- 🔥 Firebase 設定流程 — 「立即設定 / 取消 / 儲存並連線」第一次用設定連線存擷取設定 / 歷史 / 圖片資料庫
- 📴 PDF 完全在瀏覽器內處理 — 不傳第三方,Firebase 只存設定 / config 不存原始檔案
💡 設計理念
純前端單檔 HTML 37,748 字元:Tailwind CSS + PDF.js + jsPDF + JSZip + Firebase,嵌進 sites.google.com/mail2.smes.tyc.edu.tw/swissknife/影片pdf轉圖片(Google Sites Embedded HTML 部署,掛學校信箱登入才能用 Firebase 功能)。跟 #76 WebSlide 技術棧重疊度高(都用 PDF.js / jsPDF / JSZip)— 這是阿凱「寫一次基礎模組 → 換主題複製做不同工具」的策略。
🎒 適合情境
阿凱 3 個 PDF / 影片處理工具對比:
- #75 Slide Extractor(本工具) — 影片 / PDF → 圖片(PDF.js + jsPDF + JSZip + Firebase)
- #76 WebSlide — 簡報播放器(17 種 3D 轉場,同技術棧 + Lucide)
- #94 封面接故事 — MV 封面 → AI 分鏡腳本(Gemini 2.5 + ffmpeg.wasm 進階版)
適合各科老師備課(線上影片擷取教學一幀)、美術 / 視藝老師(PDF 圖文書 → 每頁 PNG)、行政老師(會議簡報 PDF 拆成圖貼網站)、想學「PDF.js + JSZip 工作流」的開發者。也可進 #27 swissknife 許願池 看阿凱完整工具集。第一次用:拖一個 PDF 進去 → 點「PDF 轉圖片」→ 系統渲染每頁 → 一鍵下載 zip 包。