Screenshot Annotation標註截圖
就在擷取的原位上
不必離開頁面就能標註截圖。擷取後，把方框、圓圈、箭頭、文字、編號步驟等直接放到圖上——每個形狀都會吸附到你滑鼠指向的真實 UI 元素，所以標註會精準對齊，而不是看起來像手畫的。
「標註截圖」是什麼意思？
標註截圖是指在圖片上方加上註解，讓讀者知道該看哪裡、該做什麼：在要點擊的按鈕周圍畫個方框、用箭頭指向錯誤、為每個步驟編號、加上文字說明修復方式。這就是原始截圖與真正能傳達訊息的截圖之間的差別。
最痛苦的部分從來不是想法，而是執行。你擷取、貼到編輯器、畫一個矩形、發現它跟按鈕差了兩像素、復原、重畫。每個形狀、每張截圖都來一遍。吸附到真實頁面元素的標註把這一切完全拿掉——指向元素、點擊，標註就贴合它的精準邊界。
為什麼要原位標註截圖？
另外開一個編輯器意味著切換脈絡、產生第二個檔案，而且形狀會與它們本來該指向的像素偏離。原位標註讓你留在頁面上、保留完整解析度的來源，並讓每個標註保持對齊。這在以下情境尤其重要：
- 錯誤回報——用贴合的方框和編號備註，把工程師精準指向損壞的元素，而不是歪歪扭扭的橢圓。
- 教學與文件——當「這裡」是圍繞真實控制項的吸附矩形時，「點這裡」就毫無模糊空間。
- 客戶支援——在客戶的截圖上加註，指出他們需要更改的設定。
- 審查與回饋——不必開另一個應用程式，就能用箭頭與文字標註設計或草稿。
十二種工具，全部吸附到真實元素
這套標註工具是我親手打造的，以下是放置標註時的實際行為。
- 形狀會吸附到元素。指向任何按鈕、卡片、圖片或文字區塊，擴充功能就會讀取它的
getBoundingClientRect。點擊——你會得到一個贴合這些精準邊界的矩形、圓形、箭頭或底線。一次點擊，像素精準。 - 單一工具列、十二種工具。矩形、橢圓、直線、箭頭、高亮筆、文字、編號步驟、戳記、馬賽克（像素化 / 模糊 / 黑塊）與原位放大。用單一按鍵切換。
- 編號步驟自動重新編號。依序放下步驟 1、2、3，新增與重新排列時它們會自動維持順序。
- 所有內容以完整解析度匯出。標註是在原始擷取上渲染（包含高 DPI 像素），所以方框與文字保持銳利，不會模糊。
兩個能力能讓標註在需要時更強大：
- 高亮與遮蔽——高亮筆可凸顯文字，而馬賽克工具能把密碼、API 金鑰與人臉模糊或像素化。參見模糊截圖與高亮截圖。
- 放大細節——把一小塊區域原位放大，讓小圖示或標籤清晰可讀，同時不失周圍脈絡。參見截圖放大。
標註存在於頁面上的覆蓋編輯器中——不開新分頁、不上傳。關閉編輯器時，完成的圖片早已複製到剪貼簿。
如何標註截圖
從擷取到完整標註的圖片，不用一分鐘。
擷取
按 Alt+A（Win）或 ⌘⇧S（Mac）擷取可視範圍，Alt+C / ⌘⇧X 拖曳自訂範圍，或在頁面上按右鍵並選擇自由範圍。編輯器會在頁面上開啟。
加上標註
指向元素並點擊以吸附贴合的形狀，或按工具鍵——R 矩形、O 橢圓、A 箭頭、T 文字、N 編號、H 高亮。也可以在空白處自由繪製。
匯出
關閉編輯器——標註後的圖片會自動複製到剪貼簿。或下載為 PNG / JPG / PDF。
讓截圖標註更乾淨的訣竅
- 求精準就點擊、不要拖曳。指向並點擊元素，就能一次取得它的精準邊界——比手畫方框緊實得多。
- 多步驟流程用編號。使用編號工具（
N），讓讀者能依序跟著 ① → ② → ③；它們會自動重新編號。 - 分享前先遮蔽。任何含憑證、權杖或個人資訊的截圖，都應該先用馬賽克工具處理——模糊或像素化，絕不能只是裁剪。
- 挑一個強調色。方框與箭頭用單一粗體色，比彩虹色系看起來更乾淨。工具會記住你上次使用的顏色與粗細。
截圖標註，解答
標註是免費的嗎？
是的。全部十二種標註工具都免費——沒有付費方案、沒有浮水印、不必註冊。整款擴充功能完全免費。
在高 DPI 螢幕上標註會保持銳利嗎？
會。標註是在完整解析度的擷取上渲染，包含高 DPI 像素，所以方框、箭頭與文字在 Retina 與 4 K 顯示器上都保持銳利。
放置標註後還能編輯嗎？
可以。選取任何標註即可移動、調整大小、改色或刪除。重新排列編號步驟時會自動重新編號。
可以離線使用 / 會把資料送到任何地方嗎？
完全離線可用，且不發出任何網路請求。截圖永遠不會離開你的裝置——沒有後端。
作者：Virgil
我是這款工具的獨立開發者，本頁描述的標註工具——DOM 吸附、十二種工具、自動重新編號的步驟——都是由我打造的。之所以做它，是因為我用過的每款截圖編輯器都得讓我手繪永遠對不齊 UI 的形狀。
我會看每一封來信並定期推出更新；更新紀錄列出了各版本的所有變更。對標註有疑問？請來信 virgil1126@gmail.com。