LINE 貼圖實作營成果牆

同一場活動的學員把 LINE 套組 ZIP 拖進網頁，整組透明 PNG 立即出現在共同成果牆。每個人可切換「全部作品／我的作品」，主持人的簡報則用 display=1 嵌入同一面牆。

線上版：https://yazelin.github.io/line-sticker-wall/?event=sticker-2026-08-05

學員上傳連結（自動帶入活動碼）：https://yazelin.github.io/line-sticker-wall/?event=sticker-2026-08-05&code=WALL-0805-LINE

展示模式：https://yazelin.github.io/line-sticker-wall/?event=sticker-2026-08-05&display=1

功能

• 直接讀取貼圖製造機輸出的 ZIP，只取 01.png～40.png
• 支援 LINE 的 8／16／24／32／40 張套組
• 上傳前本機預覽；作者顯示名稱與展示同意必填
• 分享網址可用 code 參數自動帶入活動上傳碼，伺服器端仍會照常驗證
• 全部作品／我的作品切換；上傳後自動切到自己的作品
• 每 2 秒同步一次，所有學員與簡報看到同一份成果
• 整組放大、上一組／下一組，適合現場成果巡禮
• 原上傳瀏覽器可改名、刪除；主持人可進管理模式
• 圖片與作者資料都存在 Cloudflare D1；GitHub Pages 不持有學員資料

架構

GitHub Pages
  ├─ index.html / app.js / styles.css
  ├─ JSZip 在瀏覽器解開 ZIP
  └─ 每 2 秒 GET 最新成果
             │
             ▼
Cloudflare Worker: line-sticker-wall-api
  ├─ POST /api/submissions         驗證上傳碼、PNG、尺寸與同意
  ├─ GET  /api/events/:id/submissions
  ├─ GET  /media/:submission/:file
  └─ PATCH/DELETE /api/submissions/:id
             │
             ▼
Cloudflare D1: k-rider-signups（獨立 wall_* 表）
  ├─ wall_submissions  作者、梯次、所有權 token hash
  └─ wall_images       PNG BLOB（每張限制 1.5 MB）

這個 Cloudflare 帳號目前尚未啟用 R2，且免費方案的 D1 資料庫數量已滿，所以工作坊版在既有活動報名庫 k-rider-signups 內使用完全隔離的 wall_* 表，直接以 D1 BLOB 保存圖片；原有 signups、registrations 不會被讀寫。D1 單一 BLOB 上限 2 MB，前後端把單張限制在 1.5 MB；LINE 貼圖本身又以 1 MB 為目標，因此有足夠安全空間。若日後擴大為長期公開服務，可保留相同 API，將 wall_images 換成 R2。

本機開發

npm install
npm run serve

開啟 http://localhost:4173/?event=sticker-2026-08-05。

Worker：

cd worker
npm install
npm run db:apply:remote
npx wrangler secret put UPLOAD_CODE
npx wrangler secret put ADMIN_TOKEN
npm run deploy

本機 Worker 可在 worker/.dev.vars 放：

UPLOAD_CODE=local-upload-code
ADMIN_TOKEN=local-admin-token

API

Method	Path	用途
GET	/health	健康檢查
GET	/api/events/:event/submissions	取得某場全部作品
POST	/api/submissions	multipart/form-data 上傳
PATCH	/api/submissions/:id	作者或管理員改名
DELETE	/api/submissions/:id	作者或管理員刪除
GET	/media/:submission/:filename	讀取 PNG

作者權限使用上傳時回傳、只存在瀏覽器 localStorage 的 owner token；D1 只保存 SHA-256 hash。管理員權杖只存在當前分頁的 sessionStorage。

測試

npm test

上線後另以真實 ZIP 走一次建立 → 全場讀取 → 圖片讀取 → 刪除 smoke test。

授權

MIT License © 2026 林亞澤

---

GitHub · Facebook · Buy Me a Coffee