Finrod Chen
  • 作品
  • 文章
  • 關於
  • 好物
來信聊聊
Finrod Chen

白天在生醫產業做細胞治療,晚上寫 side project。這裡收網站、雲端、3D 列印、Arduino,以及一些工作上的紀錄。

網站

  • 作品
  • 文章
  • 關於
  • 好物

其它

  • GitHub
  • LinkedIn
  • 舊部落格
  • [email protected]
© 2026 Finrod Chen
  • GitHub
  • LinkedIn
  1. 作品
  2. Tool
  3. 頭頭是道

頭頭是道

線上證件照小幫手:拍一張、自動去背、照台灣規格排版列印。

上線Tool2026
頭頭是道 的網站預覽

用瀏覽器就能完成一整套證件照流程:開相機拍或上傳一張正面照,自動去背修圖,輸出符合台灣規格的 1 吋與 2 吋,再把它們混排進一張 4×6 相紙,拿去沖印店直接印。整個過程都在本機瀏覽器完成,照片不會上傳到任何伺服器。

起點是一件每隔幾年就要重做一次的雜事:為了換證件去拍一次大頭照,店家收一份錢給你一疊用不完的相片,尺寸還不一定是這次要的那種。這些步驟其實瀏覽器就做得完。

最重要的一個決定是:照片不離開這台裝置。去背跑的是 MediaPipe 的 WebAssembly 模型,在使用者自己的瀏覽器裡推論,裁切與排版用 Canvas,全程沒有任何一個上傳端點。人臉照片本來就不該為了去背而寄到別人的機器上。

  • 三步流程:拍攝、去背修圖、輸出,每一步都能退回去重來
  • 取景框是虛線疊圖,對齊眉毛與雙耳的位置,拍的時候就知道會不會過關
  • 輸出同時給 1 吋與 2 吋,並混排成一張 4×6,沖印店最低消費不會浪費
  • 拍攝頁附上光線、背景、視線高度的提醒,大部分不合格的照片都壞在這幾件事

規格的部分寫得保守:頁尾註明尺寸僅供參考,實際以受理機關公告為準。各機關規定會改,工具不該讓人以為它保證過件。

基本資料

年份
2026
角色
Design + Build
狀態
上線
分類
Tool

技術

  • Vite
  • TypeScript
  • MediaPipe
  • WebAssembly
  • Canvas
  • Cloudflare Pages
前往 idphoto.finrod.xyz(線上證件照)