跳至主要内容

五月天阿信相片館

· 閱讀時間約 3 分鐘

V1.2 — 任何人都能直接上傳自己的照片，不需要 IG。

一個輕量、響應式且具備 IG 風格的相片收藏館。支援手機與電腦本機照片上傳、自動壓縮、分類標籤、愛心按讚、下載，以及 Firebase 雲端即時同步。

網頁：https://kaichen0621.github.io/ashin/

License HTML5 JavaScript Firebase

✨ 核心特色​

  • 📷 簡單上傳，不綁定 IG：核心流程只有「選擇照片＋文字」。手機或電腦中的照片都能直接加入相片館。
  • ⬇️ 可下載的照片版本：本機照片會產生展示圖與可下載的高畫質版本；高畫質版本最長邊限制為 1920px，兼顧畫質與同步穩定性。
  • 🔧 IG／網路圖片為進階設定：需要時才展開填寫網路圖片網址或 IG 原始貼文，平常上傳不必接觸這些欄位。
  • ⚡️ 開站同步保護：首次進入會顯示同步畫面，等待照片與標籤資料都完成載入才開放操作，避免讀取中的資料被覆蓋；同步逾時則安全使用本機資料。
  • 🏷️ 更穩定的標籤同步：標籤獨立儲存與同步；新增、重新命名、刪除後會立即更新介面與雲端資料。
  • 👋 首次使用導覽：第一次開啟網站會顯示簡短教學，說明切換編輯模式與新增照片的步驟。
  • ❤️ 愛心按讚與互動：使用者可針對喜愛的照片點擊愛心按讚，愛心數與下載次數均即時廣播並同步儲存於雲端資料庫。
  • 📸 快捷貼上與自動壓縮：支援直接使用鍵盤快捷鍵 (Cmd + V / Ctrl + V) 貼上剪貼簿圖片，並透過 Canvas API 自動將檔案壓縮，兼顧畫質與載入速度。
  • 🌓 深淺色主題切換：內建深色（Dark）與淺色（Light）視覺模式，自動記憶使用者的主題偏好。
  • ✏️ 雙重模式（檢視 / 編輯）：可一鍵切換「檢視模式」與「編輯模式」，防止日常瀏覽時誤觸刪除或編輯按鈕。
  • 📱 行動版操作優化：手機底部按鈕採三欄網格，編輯模式會自動換行，支援安全區域並避免按鈕擁擠。
  • 🪟 易讀的檢視視窗：照片說明可獨立捲動，愛心、貼文與下載按鈕固定在底部；可按 Esc 關閉視窗。

🛠️ 技術棧​

  • 前端：HTML5, CSS3 (原生變數 & Grid/Flexbox), ES6+ JavaScript
  • 字型：Google Fonts (Plus Jakarta Sans, Noto Sans TC)
  • 雲端資料庫：Firebase Realtime Database (Web SDK v10)
  • 本地儲存 / 圖像處理：LocalStorage + HTML5 Canvas API（用於圖片 Resize 與壓縮）

📂 專案結構​

.
├── index.html       # 主程式碼 (包含 UI、樣式與 JavaScript 邏輯)
├── ashin.jpg        # 大頭貼預設圖片 (或 ashin.png)
└── README.md        # 專案說明文件

使用方式​

  1. 開啟網站，等待初始同步完成。
  2. 切換至「編輯模式」。
  3. 按「新增」，選擇照片並輸入文字內容後儲存。
  4. 需要連結 IG 或外部圖片時，再展開「進階設定」。

照片會自動同步至 Firebase；也可使用「☁️ 手動同步」立即寫入目前資料。

趕快看看

趕快看看