圖片編輯器

🖼️

上傳圖片開始編輯

拖放或點擊上傳

未选择图片

線上編輯圖片，加入文字、箭頭、圖形、馬賽克、裁切與縮放，適合截圖標註、隱私打碼與輕量修圖。

相關推薦

圖片裁切

圖片浮水印

圖片旋轉翻轉

圖片濾鏡

圖片圓角

SVG 檢視器

什麼是網頁版圖片編輯器？

網頁版圖片編輯器是一種無需下載和安裝、開啟瀏覽器即可使用的線上圖片處理工具。和傳統 Photoshop、Paint.NET 不同，線上編輯器基於 HTML5 Canvas 技術直接在瀏覽器內渲染像素，所有處理都在你的裝置本地完成，不需要把圖片上傳到伺服器。

**它能做什麼？** 它把日常圖片處理中最高頻的幾類需求整合到一個頁面裡：標註（箭頭、文字、矩形、圓形、高亮）、打碼（馬賽克）、裁切、縮放、塗鴉（畫筆、鉛筆）、橡皮擦和撤銷重做。這些功能覆蓋了辦公、教學、營運、客服、產品回饋 90% 以上的「改圖」需求。

**為什麼能線上編輯？** 現代瀏覽器配合 pdf-lib、PDF.js 等開源函式庫已經能在用戶端解析和重寫 PDF。本工具基於 pdf-lib 直接操作 PDF 物件模型，把修改後的內容以「新增圖層 / 替換文字流 / 嵌入圖像」的方式寫回新檔案。

**哪些操作安全？** 新增註解（文字 / 高亮 / 圖形 / 圖章 / 簽名）本質上只是在 PDF 上疊加新圖層，不影響原內容流，是無損操作。把現有文字擦除後改成新文字則需要重建文字流，字體可能略有差異，因此原版式可能微調。

**最常見場景：** 簽合約前補上簽名 / 日期、PDF 筆記高亮、PDF 新增浮水印 / 印章、合約條款補充說明、教材重點標註、商務 PDF 加 Logo 等。本工具聚焦於疊加型編輯，這是 80% 的日常需求。

適用場景

  • 產品回饋或 Bug 回報需要圈出問題位置，並加箭頭和文字說明。
  • 客服工單、合約截圖、訂單截圖分享前，需要隱藏姓名、電話、地址或帳號。
  • 教學、知識庫、簡報和技術文件需要把操作步驟標註得更清楚。
  • 不方便安裝 Photoshop 或系統繪圖工具時，臨時完成裁切、縮放、塗鴉和加文字。
  • 社群素材或部落格配圖需要加標題、框選重點區域，再匯出無浮水印圖片。
  • LINE 對話、錯誤視窗和網頁截圖需要快速貼上、編輯並傳給同事。

使用方法

  1. 上傳 PNG、JPG、WEBP、BMP 圖片，或直接貼上剪貼簿截圖。
  2. 選擇文字、箭頭、圖形、高亮、馬賽克、裁切、縮放或畫筆工具。
  3. 在畫布上編輯圖片，必要時放大查看細節，並用復原重做調整效果。
  4. 確認無誤後匯出圖片，下載高清無浮水印 PNG 檔。

功能特點

  • 截圖標註工具齊全：文字、箭頭、矩形、圓形、直線、高亮、底線與刪除線都能直接加入。
  • 隱私打碼更順手：馬賽克塗抹可遮住人臉、帳號、地址、訂單號、聊天紀錄等敏感資訊。
  • 本機瀏覽器處理：圖片透過 Canvas 在目前裝置內完成編輯，不需要上傳到伺服器。
  • 剪貼簿截圖直用：支援 Ctrl+V 或 Command+V 貼上截圖，省去先存檔的步驟。
  • 裁切與縮放同頁完成：可保留比例調整尺寸，也能裁掉多餘畫面，只留下重點區域。
  • 復原重做放心試錯：誤畫、誤刪、誤打碼都可以回退，再繼續修改。
  • 高清無浮水印匯出：完成後下載 PNG 圖片，適合文件、工單、教學和社群分享。

常見問題

這款線上圖片編輯器免費嗎？

免費使用，無需註冊。文字、箭頭、圖形、馬賽克、裁切、縮放、塗鴉等工具都可直接使用，匯出圖片不加浮水印。

圖片會上傳到伺服器嗎？

不會。頁面使用瀏覽器 Canvas 處理圖片，標註、裁切、縮放和馬賽克都在本機完成，適合處理含個資或工作內容的截圖。

可以直接貼上系統截圖再標註嗎？

可以。複製截圖後在頁面按 Ctrl+V 或 Command+V，就能直接進入編輯區，適合快速處理 LINE 對話、錯誤截圖和產品回饋圖。

如何給截圖加箭頭和文字說明？

上傳或貼上圖片後，選擇文字或箭頭工具，在畫布上點擊或拖曳即可加入。也能調整顏色、線寬和字級，讓重點更清楚。

怎樣給身分證號、電話或聊天紀錄打碼？

選擇馬賽克工具後在敏感區域拖曳塗抹即可。需要微調時可切換橡皮擦或復原上一步，避免遮擋過多內容。

能裁切圖片並調整尺寸嗎？

可以。裁切工具用於保留重點區域，調整大小工具可設定目標寬高，並支援等比縮放避免圖片變形。

支援哪些圖片格式？

支援常見 PNG、JPG/JPEG、WEBP、BMP 圖片上傳或匯出。預設匯出 PNG，適合保存帶文字和標註的截圖。

手機或平板可以使用嗎？

頁面支援觸控操作，但複雜標註和精細馬賽克更適合桌面瀏覽器。行動裝置可用於簡單裁切、打碼和下載。

術語表

Canvas
HTML5 提供的畫布元素，配合 2D Context API 可以在瀏覽器內繪製點陣圖。本工具的所有標註、馬賽克、裁切都是透過 Canvas 即時合成實現的。
點陣圖（Bitmap / Raster）
由像素組成的圖像，每一格都有固定的顏色值。與向量圖不同，點陣圖放大時會失真，但能表達複雜色彩，是網頁截圖、照片、掃描件的天然格式。
馬賽克（Mosaic / Pixelation）
把目標區域的像素按一定步長合併為大塊色塊的處理方式，讓人眼無法辨認原始細節。常用於打碼人臉、車牌、證件號等敏感資訊。
高亮筆（Highlighter）
半透明的筆刷工具，常用黃色或綠色模擬真實螢光筆。在本工具中預設以 50% 透明度疊加在原圖上，用於強調關鍵文字段落而不完全遮擋。
無損編輯（Non-destructive Editing）
編輯過程中不修改原始像素，每次操作疊加一層，撤銷時回到上一步。區別於「光柵化 + 重採樣」，本工具因為有無限撤銷重做棧，所以是典型的無損編輯。
PNG / JPG / WEBP / BMP
四種主流點陣圖格式。PNG 支援透明通道無損，適合帶標註的截圖；JPG 是壓縮照片格式，體積小但不支援透明；WEBP 在 JPG 基礎上再小 25-35%，相容性穩定；BMP 是 Windows 歷史無損點陣圖，體積較大。
toBlob / toDataURL
Canvas 提供兩種匯出方式：toBlob 產生二進位檔案可直接下載，toDataURL 產生 Base64 字串適合直接嵌入 HTML。本工具預設走 toBlob，下載得到的就是原始檔案。

內建編輯工具一覽

不同的編輯任務使用不同工具，注意區分疊加型與重建型。

工具類別工具典型使用場景
選取與編輯選取 / 刪除選中或移除已有標註元素
選取與編輯文字給截圖加文字說明或標題
選取與編輯填充矩形區域灌色，做高亮遮擋
幾何工具矩形 / 圓形框選區域、突出重點
幾何工具箭頭 / 直線指示位置、畫流程圖
標註工具高亮筆黃色高亮強調文字段落
標註工具底線 / 刪除線標註文字審閱修改痕跡
塗鴉繪製畫筆 / 鉛筆手繪塗鴉、簽名、畫線
塗鴉繪製橡皮擦擦除馬賽克或繪製內容
光柵工具裁剪自由矩形裁剪圖片
光柵工具馬賽克塗抹隱藏人臉、帳號、地址等敏感資訊
光柵工具調整大小縮放畫布到目標尺寸

支援的上傳與匯出格式

不同格式的可編輯性與畫質特性不同。

格式可作為來源檔案可匯出說明
PNG✅✅支援透明通道，編輯無損，推薦預設輸出
JPG / JPEG✅✅壓縮照片，體積小，但不支援透明
WEBP✅✅現代網頁格式，體積比 JPG 小 25-35%
BMP✅✅原始點陣圖，無損但體積大
剪貼簿貼上✅❌直接貼上系統截圖，無需存為檔案

5 種編輯場景與推薦操作對比

選錯操作可能破壞原 PDF，本表列出常見場景的推薦做法。

Authoritative References