Moocup：把截圖做成展示圖的開源工具，截圖不上傳伺服器

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

打開 Moocup 的網址，把一張 1200×750 的測試截圖拖進畫面，選一個漸層背景，按匯出，幾秒鐘後拿到一張 4480×3340 的 PNG。這一輪我把瀏覽器所有的對外連線都側錄下來，除了站方自己的一份匿名統計腳本，截圖沒有被送到任何伺服器。

有三個數字是量過之後才敢寫的。把圖片轉 20 度，寬度剛好縮成原本的 0.9397 倍，就是 cos 20°；一張 18.34MB、3200×2000 的大圖進到畫面時，已經被換成 2400×1500 的版本，過程沒有跳出任何提示；匯出畫面的 Standard、High、Ultra 三個品質檔位，背後分別是 2、4、6 倍的本機重繪。這三件事各自對應它最值得知道的一面與最該小心的邊界，下面逐項攤開。

一張截圖、一個背景、一條邊框，就是一張展示圖

Moocup 是開發者 Jaydip Sanghani 一人維護的開源工具，動機來自他自己的作品集需求：市面上的截圖展示工具他都覺得不太順手，索性寫一個自己用的。專案 2025 年 8 月放上 GitHub，採 MIT 授權，到 2026-08-31 為止累積 297 顆星，最後一次提交在 2026-08-23，還在持續修錯與調整介面。整個網站是純靜態頁面，原始碼完整公開，任何人都可以照著架一份。

操作流程比大多數同類工具都短：截圖用拖的進來，畫面空著的時候也可以直接 Ctrl+V 貼上，畫面會自動套一層基礎樣式，圖片落在漸層背景中央，外圈加上 8px 邊框和陰影。邊框顏色有個小巧思：工具會從截圖本身抽出一個主色，調成半透明套在邊框上，所以邊框色跟著你的畫面走，抽色失敗時退回固定的灰綠色。要再調整，畫面下方列了三組面板，分別管位置與縮放、旋轉與變換、邊框。內建 17 種漸層背景，命名像深海、紫霧、夏日這種路線，也可以上傳自己的背景圖；旋轉與變換面板附 6 個現成角度預設，懶得拉滑桿就點一顆。全程沒有帳號、沒有付費牆，匯出的圖也沒有浮水印。

Pin

三組面板給的參數比看起來多。位置與縮放用一個九宮格快選負責擺位，點一下就把截圖送到對應位置，縮放滑桿從 0.1 倍拉到 3 倍，邊距另有小中大三段預設對應 20、35、50px；邊框面板能調寬度（0 到 20px）、圓角（0 到 50px）和邊框顏色濃度，陰影則是固定套用，不能調。桌機版的面板是浮動視窗，可以拖到畫面任何角落，原始碼裡也看得到手機版的配置，會把三組面板收進底部分頁，不過我的實測集中在桌面瀏覽器。

它解決的需求很具體：你手上有一張功能截圖，而 README、作品集或提案需要的是有情境感的畫面。開修圖軟體手動加背景、投影、圓角，五分鐘起跳，Moocup 把這件事壓縮到半分鐘內，參數還能重現，同一組設定套在十張截圖上，出來的版面是一致的：背景、角度、位置這些設定會跟著工作階段保留，換一張截圖拖進來，前一張調好的版式直接沿用；邊框是例外，每張新圖都會重新抽主色、寬度回到 8px 預設，貼上的捷徑只對第一張生效，已經有圖時再按貼上只會跳出提示，換圖要靠拖曳或檔案選擇。

旋轉 20 度量得出 cos：它的 3D 其實是壓扁

介面裡最容易被名字誤導的是「旋轉與變換」這組滑桿：Rotate X、Rotate Y、Rotate Z，外加一個 Skew。聽起來像 3D 空間裡的樣機角度，實際量測的結果是純粹的平面幾何。我把 Rotate Y 拉到 -20 度，圖片寬度從 896px 縮到 842px，比例 0.9397，恰好等於 cos 20°；換成 Rotate X 拉 20 度，高度從 560px 縮到 526.2px，同樣是 0.9397。收縮只發生在單一方向，畫面上從頭到尾看不到近大遠小的梯形變形。

Pin

白話說，這四個滑桿做的是壓扁、平面旋轉和歪斜，數學上屬於仿射變換。截圖不管怎麼轉，四個角構成的形狀都脫離不了平行四邊形的家族，轉不出真正的透視角度，就是那種手機斜放、螢幕面朝鏡頭的立體樣機感。從原始碼可以找到原因：套用變換的清單裡根本沒有透視函式，rotateX 和 rotateY 在沒有透視設定的前提下，效果就注定是單方向的壓縮。六顆角度預設裡最複雜的一顆同時轉 X 30 度、Y -15 度、Z 25 度，疊起來仍然是壓扁加旋轉加歪斜的組合。Skew 滑桿拉的是歪斜，把矩形推成平行四邊形，上下邊保持平行，這也是它看起來有點立體感的來源，但平行線永遠平行，跟透視變形是兩回事。想要那種成品要找別的工具；Moocup 給的是「有質感的卡片」，旋轉和歪斜的用途是讓畫面不要太死板。附帶一提，正因為所有變換都是仿射，匯出才有辦法跟畫面完全一致，這是下一節的主題。

匯出跟畫面一模一樣，因為它重畫的是同一份網頁元素

很多網頁工具的匯出讓人緊張：畫面上一個樣，存檔後另一個樣。Moocup 沒有這個問題，原因藏在它使用的匯出函式庫 html2canvas：按下匯出時，它在你的瀏覽器裡把畫布那塊網頁元素重新繪製成一張圖，並非另外合成一份，畫面上長什麼樣，重畫的依據就是什麼。我把轉過角度的成品匯出後跟畫面截圖比對，兩張圖裡截圖區域的長寬比例都是 1.569，四個角同樣對齊，差別只在解析度。

品質檔位對應的重繪倍率是 Standard 2 倍、High 4 倍、Ultra 6 倍。預設的 High 檔位匯出 4480×3340，畫布顯示區是 1120×835，剛好四倍。格式有 PNG、JPEG、WebP 三種，JPEG 以最高品質輸出，檔名固定是 moocup 加上時間戳。以我的測試圖為例，High 的 PNG 是 1.5MB，同一張轉成 WebP 剩 70KB，實際截圖的色彩比較複雜，檔案會再大一些，但兩種格式的差距大致就是這個量級。

匯出視窗裡還留了一封作者的信，除了自我介紹，放了兩個贊助入口：一個 Ko-fi 連結，一張 UPI 行動支付的 QR code，後者是印度本地的付款方式。對照功能面看得很清楚：這個工具的收入模型就是贊助，沒有任何功能被鎖在付費牆後面，程式裡也找不到計數或額度的邏輯。專案的 GitHub 連結也掛在同一個視窗，喜歡的人可以直接去看原始碼或幫忙修問題。

截圖不出瀏覽器，但會被留在瀏覽器裡

側錄全程對外請求，名單很短：頁面本身，加上站方掛在自己網域 analytics.jaydip.me 下的匿名統計腳本，就這樣。那份統計腳本是站方自架的服務，不是 Google Analytics 這類第三方，也不綁帳號，統計的對象是造訪頁面這件事，不是你的圖。截圖的處理、變換、匯出全部在瀏覽器裡完成，原始碼裡也找不到任何上傳端點；作者在匯出視窗的自我介紹裡寫得直白，說這是個簡單的離線工具。對還沒公開的產品截圖、內部系統畫面來說，這條邊界值得放心。

另一面要自己記得：上傳的截圖和所有設定會存進瀏覽器的本機儲存空間，關掉分頁再打開，圖還在。這對連續作業是方便，在共用電腦上就等於把截圖留在那台機器。介面的 Reset 鈕會把圖和樣式一起清掉（上傳過的自訂背景圖除外），離開共用環境前按一下就乾淨；沒有雲端專案檔，換電腦工作要自己把原圖帶著；背景、邊框這些設定同樣只存在本機，換一台機器就從預設值重新開始。

2MB 是一條看不見的線

原始碼裡有一個不會出現在介面上的分支：截圖超過 2MB 時，工具會先在背景把它重畫到最長邊 2400×1800 以內，再放上畫布。我把一張 18.34MB、3200×2000 的測試圖丟進去，畫面呈現的已經是 2400×1500 的版本，沒有提示，也沒有確認。對 4K 螢幕的整頁截圖來說，這代表細節在上傳當下就先被砍一輪，後面就算選 Ultra 的 6 倍匯出，放的也是縮過的圖，原始解析度救不回來。

實際影響要看你的輸出用途。2400×1800 的上限放在社群貼文、README 或投影片裡綽綽有餘，多數平台自己還會再壓一次；會踩到痛點的是想輸出印刷品，或者截圖裡有細小文字要放大看的情境。想把細節留住，能做的是在上傳前自己用影像軟體先把截圖縮到 2MB 以內，讓工具跳過它的重畫分支，自己控制輸出的品質。

自訂背景那邊是另一套規則：格式只收 JPG 和 PNG，比主畫面嚴；上限 10MB，反而比主畫面的重畫門檻寬。格式不對或超過大小時，介面只會把對話框默默關掉，原因寫在瀏覽器開發者工具的主控台裡，一般使用者看不到。有趣的是主畫面的截圖上傳反而寬鬆，介面文案寫支援 JPG、PNG，實際上任何圖片格式都吃，WebP 截圖直接丟沒問題。兩套標準放在同一個工具裡，用的時候心裡有數就好。

開修圖軟體之前，先確認你要的是哪一種成品

Moocup 的定位是快，不是全。它沒有文字、箭頭、螢光筆這類標註功能，官方 issue 裡已經有人許願，還沒排進開發。要圈重點的截圖，先用 螢幕標註工具 Inkeys 處理再丟進來，或用 SkreenPro 這類截圖美化工具在源頭整理。要在展示圖裡說故事的，例如一段影片或可旋轉的 3D 機模，iMockup 那類影片樣機工具比較對口，代價是免費版有解析度上限和浮水印。手上的素材是文字，想輸出成圖卡，Markdown 轉圖片工具走的是另一條路。

跟開 Photoshop 手動做相比，Moocup 換到的是速度和一致性：背景現成、參數拉一拉就出圖，同一組設定在多張截圖上可以重現。你放掉的是自由度：背景就是一張漸層圖，沒有圖層、遮罩、透視變形這些選項。快與全之間，它站在快那一邊，而且原始碼在你手上。

想要一份自己的，一行指令就能架

因為是 MIT 授權的純靜態網站，自架門檻低到一行指令：docker pull jellydeck/moocup:latest，把容器接上 8080 埠，就有一份自己的實例。不想碰 Docker 的話，把 GitHub 專案接上 Vercel、Railway 或 Netlify 的標準靜態部署流程也可以，Railway 還提供一鍵部署按鈕；再原始一點，clone 專案下來跑一次建置，把產生的靜態檔案資料夾丟上任何網頁空間就能動。團隊要處理不能外流的內部截圖時，一份自己架的實例，比說服所有人相信第三方網站來得容易。

半分鐘能做完的事交給它，正式素材另外找工具

適合的情境很明確：開發者要幫 README 補一張有背景的功能圖、作品集要放幾張整齊的介面截圖、提案文件需要看起來有質感的畫面，這些 Moocup 都能在半分鐘內交出一張乾淨成品，而且截圖不出你的瀏覽器。反過來，需要真透視的立體樣機、要在圖上標重點、要輸出影片或印刷級構圖的，它幫不上忙，直接找對口的工具比較省時間。

專案本身是一人維護的開源工具，好處是問題回報有人理，issue 從提出到關閉的紀錄都看得到；風險則是所有關鍵決策繫在一個人身上。以 MIT 授權加上 Docker 自架的退路來看，就算哪天官網收掉，你手上仍然有一份能跑的程式碼。對一個不收錢、不留你的圖、幾分鐘就能上手的免費工具來說，這樣的保障算完整。