ShotEasy 開源網頁截圖美化器，截圖不出瀏覽器直接套外框輸出

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

截圖這種東西，內容對了但畫面太素，貼進簡報就輸一半。灰底的視窗、參差的邊緣、沒有留白，觀眾還沒讀到重點，視線已經先累了。於是你開始找美化工具，然後發現這個品類的選項要嘛是訂閱製的雲端服務，要嘛是付費買斷的桌面 App，而網頁版的免費工具，多數會把你那張可能藏著客戶資料或對話紀錄的截圖，整張送到別人的伺服器上。

ShotEasy 走的是另一條路。它是一款開源 MIT 授權的網頁截圖美化工具，打開瀏覽器就能用，帳號不用註冊，截圖加上漸層背景、圓角、陰影、設備外框，匯出成圖片，全程在自己電腦上完成。我實際把一張自製的 1280×720 測試圖丟進去跑完整個流程，側錄全程的網路請求：從載入網站、上傳圖片、調整樣式到按下匯出，瀏覽器總共只發出 7 個請求，其中唯一一個會把資料送出去的 POST，是網站自己的造訪統計，截圖內容一個位元組都沒有離開瀏覽器。這不是行銷文案，是把整條路走完之後數出來的數字。

先給判決。它適合的人：手上常有截圖要出門的人，寫文件、做簡報、發社群貼文，需要快速把截圖變得體面，而且在意截圖內容隱私；還有想在自己的網站內嵌一套截圖編輯器的開發者，這個專案本來就以 React 組件的形式發布在 npm 上。它不適合的人：需要文字卡片、程式碼渲染卡片、GIF 動圖這些進階形態的人，這三個功能在介面上有按鈕，但都還沒做完。這些觀察的來源先說清楚：網頁版全流程實際操作過、原始碼逐檔讀過、GitHub 與 npm 的版本紀錄也對照過；同名的 Chrome 擴充功能是另外發布的獨立套件。

一張截圖進來，從拖曳到匯出長什麼樣

打開官網，畫面很乾淨：一個大大的拖放區，可以點選、可以拖圖進去，也可以直接貼上剪貼簿裡的圖。旁邊四顆圓形按鈕，分別是螢幕截圖、文字卡片、程式碼卡片、GIF 動圖。圖進來之後介面換成編輯器：中間是畫布，右側一整排控制項，從尺寸、縮放、留白、圓角、陰影，到背景、設備外框、浮水印，一路排到最底下的匯出區。

Pin

Pin

它把「美化」拆成幾個可以獨立調的軸。背景提供 51 組預設，漸層和純色都有，也能自訂顏色；尺寸預設整理成 5 群共 20 組，涵蓋 Instagram 貼文與限時動態、X 的推文圖與封面、YouTube 縮圖與橫幅、Pinterest，加上一組通用比例，發社群圖不用自己去查每個平台的像素規格；設備外框有 5 款，兩款 MacBook、一款 iMac、一款 iPad、一款 iPhone，做產品展示圖的時候很好用。標註工具則有 9 種，空心方框、實心色塊、圓形、斜線、箭頭、自由畫筆、局部放大鏡、步驟編號、表情符號，做教學圖或標重點都夠。

匯出這步給的選項比想像中實在。格式有 PNG、JPG、WebP 三種，倍率有 1x、2x、3x，選 2x 匯出的檔名會自動帶上 @2x。要把圖直接貼進通訊軟體或文件，它也做了複製到剪貼簿的按鈕，等於跳過存檔那一步。我那張 1280×720 的測試圖，什麼樣式都不調、直接用預設的漸層背景匯出，拿到一張 1388×828 的成品：它自動幫圖加上了四邊各 54 像素的留白、圓角和陰影，檔案 353KB，放進簡報完全夠用。另外兩個小細節：JPG 和 WebP 的壓縮品質固定在 0.9，沒有滑桿可以調，而且透明背景會被填成白色，要無損就選 PNG；快捷鍵 Cmd 加 S 是下載、Cmd 加 C 是複製，跟本機軟體的手感一致。

Pin

還有一個對台灣讀者要先說的：介面全英文。功能都不難猜，拖放、下載、背景這些字對照圖示都能理解，若你期待中文環境，這裡只有介面全英文加上一份簡體中文的 README，沒有繁體中文版，連官網的頁面描述裡都還留著一個把 screenshots 拼成 screnshots 的錯字。

圖片不上傳這件事，我全程數過請求

截圖美化工具最敏感的問題，是你那張圖去了哪。截圖經常帶著不該外流的東西：客戶的名字、對話的內容、報價的數字。雲端工具的美化運算在伺服器上做，圖就得先上傳；ShotEasy 的算圖用 Canvas 在瀏覽器裡做，架構上圖根本不需要出門。

架構是宣稱，行為才是證據，所以把它當黑盒子從外面數請求。完整跑一輪之後總請求數是 7 個：載入頁面本身 1 個，JavaScript 包和樣式表各 1 個，示範圖 1 個，本機圖片的 blob 位置 1 個，剩下兩個都是 Umami 統計服務的請求，一個載入腳本、一個上報造訪資料。把流程拆開看更清楚：上傳圖片那一步，沒有任何請求；調背景、調圓角那些操作，沒有任何請求；按匯出，檔案直接從瀏覽器記憶體落地成下載，還是沒有請求。整個編輯過程對外只有統計那一筆 POST，而 Umami 送的是頁面造訪紀錄，不含你的圖片。

原始碼也印證了同一件事。把倉庫抓下來逐檔看，整個專案裡沒有任何後端 API 端點，唯一一處 fetch 呼叫是在匯出時把記憶體裡的圖片資料轉成下載檔案的內部轉換。換句話說，就算你想把圖送出去，這個程式也沒有那條路。

不過「不上傳」和「沒有追蹤」是兩件事，這裡要分開講。網站掛了 Umami 雲端版的統計腳本，記錄頁面造訪；這在免費網頁工具裡屬於常見做法，等級也遠比把截圖內容送出去輕。真正值得知道的是另外一件事：那行統計腳本連同網站識別碼，就寫在開源倉庫的 index.html 裡。這代表誰要是照著文件把這個專案自架一份，只要沒有先刪掉那行，自己網站的造訪數字會默默送進原作者的統計帳號。自架前花十秒鐘處理這一行，是基本的衛生習慣。

該有的都有了，但有三顆按鈕按下去只會說快來了

再看看首頁那四顆圓形按鈕。第一顆螢幕截圖是真的：它呼叫瀏覽器原生的螢幕擷取介面，選完畫面直接進編輯器。另外三顆，文字卡片、程式碼卡片、GIF 動圖，按下去只會跳一行英文提示，意思是開發中，之後才會有。按鈕沒有藏著什麼功能，就是明明白白還沒做出來，而且看得出來短期內不會變：專案的待辦清單上，這三項和復原功能、背景圖庫一起掛著，最早從 2024 年的版本就列在那裡。

復原這件事值得單獨講，因為它是這個工具最實際的使用風險。介面上沒有復原鍵，畫錯了沒有後悔藥，只能把那個標註刪掉重畫。更有意思的是原始碼裡的痕跡：工具箱裡躺著一個寫好的復原管理器，但整個專案沒有任何地方引用它，編輯器頂欄的復原處理函式整段被註解掉，連圖示都還留在圖示庫裡。功能寫到一半停工，然後留在待辦清單上，這個專案的完成度就停在這裡：已經做出來的部分扎實好用，沒做出來的部分，介面照樣把位置留給你看。

對多數人來說這不是硬傷。截圖美化的操作多半是加背景、調圓角、補一兩個箭頭，失誤成本很低。但若你的工作流是重度標註，一張圖要疊十幾個元素，沒有復原就會開始痛。這條邊界在選工具之前知道，比用了之後發現好。

另外兩個小限制順便記下。圖片來源支援常見的 PNG、JPG、WebP、GIF 靜態影格，但匯出就只有前面講的三種格式；批次處理沒有，一張一張來。深色模式有做，主題會記在瀏覽器裡。

搜尋結果裡那 4.6 顆星，是站方自己寫進網頁的

接下來這件事，跟功能無關，跟信任有關。在搜尋引擎眼裡，這個網站掛著一份結構化資料，裡面寫著：平均評分 4.6 顆星，來自 4,872 則評價。聽起來很威，對吧？把幾個數字擺在一起看就會發現不對勁：這個工具的 GitHub 倉庫有 137 顆星，同作者的 Chrome 擴充功能顯示 2,000 名用戶，而一個連帳號系統都沒有的靜態網頁，理論上根本沒有讓使用者留下評分的地方。再查網際網路檔案館的歷史存檔，2024 年 8 月的頁面裡就已經是同一組數字，4.6 顆星、4,872 則，兩年多來一動也不動。

合理的解讀只有一個：那組星等是站方手動寫進網頁原始碼的裝飾，不是任何真實評分機制的產物。它影響的是機器讀到的訊號，不是你在頁面上看到的東西，所以多數使用者永遠不會發現。這種做法在搜尋引擎的規範裡叫結構化資料濫用，被查到是可能受罰的。放在免費工具的脈絡裡，它傷害不到你什麼，但它提醒你一件事：這個專案的工程品質和行銷品質，是兩條不同的線。

同一個脈絡下還有兩個觀察。網站沒有任何法律頁面，隱私權、使用條款、關於我們，全部查無此頁，對一個不收錢、不收帳號的靜態工具來說後果很輕，但商用前想找授權依據的人會撲空。而那個拚錯的 screnshots，從 2024 年存檔到今天都還在原地，跟星等數字一起，說明這個網站上架之後基本沒有人再花力氣整理門面。

開源碼和官網之間，隔著一次沒有提交的部署

用開源工具有一個常見假設：官網跑的就是倉庫裡那份程式。這裡剛好可以驗證，而且驗出一個小斷層。官網部署包裡引用的設備外框圖檔，檔名是 imac-pro、macbook-pro-16 這一批；但倉庫主分支的程式碼裡，介面實際引用的是另一批檔名，imac、macbookpro。兩邊都能用，但內容不保證一致，也就是說官網的版本和 GitHub 上公開的版本之間，存在至少一次沒有同步進倉庫的部署。自架者拿到的介面，和官網看到的可能有些微差異，遇到功能對不上的時候，先想到這一層。

維護節奏也值得攤開來看，因為它決定你踩到坑的時候有沒有人接。這個倉庫的提交紀錄是爆發式的：2024 年 7 月到 8 月兩個月把主體做完，然後安靜了超過一年半；2026 年 3 月有人提交了一份 HDR 功能的合併請求，作者收了；2026 年 7 月 2 日一口氣升級繪圖引擎依賴、修掉匯出問題、更新版本號，然後又停了。中間有個故事很能說明節奏：2025 年 3 月有使用者反映新版的繪圖引擎讓匯出壞掉了，附上完整的重現步驟和解法，這則 issue 躺了 16 個月零答覆，直到 2026 年 7 月那波大修才跟著關掉。問題最後是修了，但等待的人是等到差點忘記的等法。

版本號也有三本帳：GitHub 的正式發布頁凍結在 2024 年 8 月的 v1.0.0 之後再也沒發過；npm 上的組件包後來在 2026 年 7 月補發了 1.0.5；而倉庫裡的版本欄位寫的是 1.0.4。三個地方三個數字，對一般使用者無感，但想追蹤更新的人會不知道該看哪裡。

把鏡頭拉遠一點，這個斷層就有解釋了。原作者同一時期還經營著另一個更大的專案，主站 ShotEasy 的網站倉庫有 1,166 顆星，最後推送停在 2026 年 9 月，比截圖美化器這個倉庫活躍得多；Chrome 擴充功能也在官網大修的隔天跟著更新。看起來截圖美化器是整個產品線裡的一個組件，作者的主力放在截圖與壓縮的主站和擴充功能上。這對使用者是中性訊息：工具本身能用、授權乾淨，但期待這個網頁版快速長出新功能，多半會落空。

和訂閱製工具怎麼選，還有站上哪些替代路線

截圖美化這個品類，付費那一端的賣點正是 ShotEasy 還沒做的那些：程式碼渲染卡片、文字排版卡片、雲端素材庫、跨裝置同步，代價是月費或年費，以及截圖要交給雲端處理。ShotEasy 站在免費、開源、零上傳這一端，把最核心的那件事做到能用。選擇其實不難：你的截圖多半帶著敏感內容、需求就是快速加個背景外框，ShotEasy 的位置就是為你留的；你的產出需要精緻的卡片版式，那就把預算給訂閱工具，兩者是不同任務的解方。

站內也已有幾條相鄰路線可以搭配著看。想在 Mac 上隨手截圖隨手美化、偏好本機 App 的，SkreenPro 是開源的桌面選項，走 CleanShot X 的平價替代定位；要把截圖變成產品展示圖、在意素材不上傳的，Moocup 同樣開源，主打截圖變展示圖；手機 App 的截圖想做成 3D 動態樣機，iMockup 提供免費網頁版；而單純只需要在截圖上畫箭頭、遮敏感資訊、不背景不外框的，Litemark 這類輕量標註工具更快。需求不同，工具就不同，這幾個剛好把截圖後處理的幾種常見任務各占一角。

開發者還有一條特別的路：這個專案在 npm 上以 image-beautifier 的名字發布成 React 組件，安裝之後一行語法就能把整套截圖美化編輯器嵌進自己的網站，介面、匯出、標註工具全部現成。月下載量只有幾十次，屬於冷門但可用的狀態。對要做文件站、問題反映表單或內容工具的團隊來說，這比從頭寫一個畫布編輯器省下的是以週計的工時。

適合誰，不適合誰

整理成一張決策表。你會想用它：文件工程師或技術寫作者，每週要產出帶截圖的說明稿；社群小編，需要快速把產品截圖變成合乎平台尺寸的貼圖；在意隱私的任何人，截圖內容不該經過第三方的伺服器；想嵌入編輯器的開發者，MIT 授欅加上組件化設計正好取用。你該往別處看：需要文字卡片與程式碼卡片的人，這裡只有三顆還在排隊的按鈕；重度標註者，沒有復原功能的工作流會磨人；需要繁體中文介面與文件的人；還有把快速支援列入採購條件的人，issue 等十六個月的前科請納入考量。

最後一句話收尾。ShotEasy 證明了一件小事：截圖美化的雲端、帳號、月費一概可以免了，一份乾淨的開源程式碼加一個瀏覽器就夠了。它的邊界也一樣清楚，已經做出來的都好用，還沒做出來的，介面上那些位置你只能看，不能按。帶著這個認知去用它，它是一款稱職的免費工具；期待它是完整的付費產品，那就是對不上頻道了。