圖片加浮水印工具
為圖片加入文字或圖片浮水印，支援調整位置、透明度、大小
拖拽圖片到此處，或點選選擇檔案
支援 JPG、PNG、WebP、BMP 格式，可一次選擇多張
什麼是圖片加浮水印？
圖片浮水印是在照片或設計圖上疊加文字、Logo 或另一張圖片，用來標示版權、來源、品牌、使用狀態或發布情境。它常用於商品圖、作品集、活動照片、教學資料、社群內容和交付前預覽。浮水印不是越大越好，重點是在可辨識與不破壞畫面之間取得平衡：既要降低隨手盜用的可能，又不能遮住主體、紋理、文字或重要細節。位置、透明度、尺寸、平鋪方式與旋轉角度都應依圖片類型調整。本工具在瀏覽器本地處理，適合快速標註與輕量保護。
使用方式
使用方式
- 拖曳或點選上傳圖片（支援多張）
- 選擇浮水印類型：文字或圖片浮水印
- 設定浮水印內容、位置、透明度、大小和旋轉角度
- 點選「加入浮水印」按鈕，預覽並下載
浮水印檢查
- 請預覽不同尺寸的圖片；在大圖上看起來清楚的浮水印，縮圖上可能過於搶眼或難以辨識。
- 保留一份未加浮水印的原始檔，方便日後調整位置、透明度或文字內容。
使用場景
技術原理
浮水印完全在 2D canvas 上完成。來源圖片透過 ctx.drawImage 以其原始像素尺寸繪製到 HTMLCanvasElement 中，然後使用 ctx.fillText 疊加文字，或使用第二次 drawImage 呼叫疊加光柵 Logo。透明度由 ctx.globalAlpha 控制，它會乘到後續每個 Alpha 通道上；對一個 50% 透明的 PNG 使用 0.5 的 globalAlpha，最終像素為 25%，這是最常見的「為什麼我的浮水印不可見」問題報告的原因。 定位使用標準 canvas 變換：ctx.translate 將原點移動到放置錨點（左上、右上、中心、右下，或 3×3 格線的每個格子），ctx.rotate(angle) 圍繞該原點傾斜對角戳記，繪製呼叫在無額外偏移的情況下放置標記。平鋪浮水印使用 CanvasPattern.createPattern 配合旋轉的來源，然後用 ctx.fillRect 填滿整個 canvas，這就是為什麼全頁 DRAFT 條紋無論來源尺寸如何都能保持均勻間距。字型度量來自 ctx.measureText，它報告 CSS 像素，因此在 2x 顯示器上適配預覽的 28px 標籤在 1x 行動裝置匯出時可能會被裁切。 匯出步驟呼叫 canvas.toBlob，指定 'image/png'、'image/jpeg' 或 'image/webp' 以及有損格式的可選品質參數。canvas 在來源解析度下執行，因此輸出保留原始像素尺寸但不會攜帶來源 EXIF 方向、ICC 設定檔或其他元資料。超過約 30 張大檔案的批次會開始阻塞 UI 執行緒，因為 toBlob 雖然是非同步的，但繪製堆疊在主執行緒上同步執行，這就是為什麼繁重的工作負載適合將 canvas 工作移入帶有 OffscreenCanvas 的 Web Worker。
- 合成堆疊：ctx.drawImage 繪製底圖，ctx.fillText（或第二次 drawImage）繪製標記，ctx.globalAlpha 控制透明度乘法。
- Alpha 計算：globalAlpha 乘以每個像素的現有 Alpha，因此 0.5 的標記在 0.5 Alpha 的 PNG 上渲染為 0.25，而非 0.5。
- 旋轉：ctx.translate 移至錨點，ctx.rotate(angle) 以弧度為單位，然後在原點 (0,0) 繪製，使變換保持以放置點為中心。
- 平鋪：createPattern 回傳 CanvasPattern，fillRect 可在整個 canvas 上繪製，無論來源尺寸如何都能保持間距均勻。
- 文字度量：measureText 報告 CSS 像素，因此在 2x 預覽上調整大小的標籤在 1x 行動裝置匯出時可能溢出圖片邊緣；有疑慮時以 canvas.width 為比例調整大小。
- 匯出：toBlob('image/png' | 'image/jpeg' | 'image/webp', quality) 保留來源解析度但移除 EXIF 和 ICC；若需要正確的直向/橫向，請在繪製前根據 EXIF 方向進行旋轉。
範例
右下角版權文字
類型：文字浮水印
文字："(c) 2026 ToolAct Studio"
字型：28 px，白色 (#FFFFFF)
位置：右下角
不透明度：50%
用途：作品集照片、部落格主視覺圖全圖斜向平鋪草稿標記
類型：文字浮水印，平鋪
文字："DRAFT - DO NOT SHARE"
字型：48 px，淺灰色 (#CCCCCC)
旋轉：-30 度
不透明度：25%
平鋪間距：200 px
用途：客戶審閱中的未發布商品照左上角 PNG Logo，15% 縮放
類型：圖片浮水印
浮水印檔案：brand-logo.png（透明背景）
位置：左上角，內縮 20 px
縮放：原圖寬度的 15%
不透明度：80%
結果：在 1920 px 主視覺圖上 logo 寬 288 px批次處理 30 張商品照
輸入：30 張 JPG 商品照，每張 2000 x 2000 px
浮水印：文字 "shop.toolact.com"
位置：底部置中，邊距 40 px
不透明度：60%，輸出格式：JPG，品質 92
處理時間：約 8 秒，輸出總計：24 MB常見問題
加浮水印時會上傳圖片嗎？
不會。浮水印是在你的瀏覽器中以 canvas 合成到圖片上，原始位元組與加完浮水印的成果都不會離開你的裝置。
支援哪些浮水印樣式？
支援文字浮水印（自訂字串、字級、顏色、不透明度、旋轉角度，以及鋪滿全圖的平鋪／重複）與圖片浮水印（你自己的 logo 疊加在指定位置與不透明度）。多數版本可同時使用兩種。
浮水印該放在哪裡？
放在角落（通常為右下）最不影響閱讀，但容易被裁掉。整張平鋪的浮水印較難乾淨地去除，但會犧牲視覺美感。置中且半透明則是兩者折衷。請依「閱讀體驗優先」或「版權保護優先」自行取捨。
浮水印可以被去除嗎？
有心人通常可以透過裁切或內容感知填補來去除單一角落的浮水印，特別是在背景單純的照片上。平鋪、半透明的浮水印較難處理。沒有任何浮水印是無法去除的——請把它當成嚇阻與版權標示，而非真正的保護。
輸出格式與品質為何？
PNG 能讓浮水印邊緣保持銳利（建議用於線稿與截圖）。JPEG 會重新編碼結果，可能讓浮水印略為模糊；想要乾淨的成品請選品質 90 以上。頁面允許你自選格式與品質。
EXIF 與中繼資料會保留嗎？
通常不會——基於 canvas 的處理多半會丟掉 EXIF 與 ICC 設定檔資料。對隱私是好事（相機中繼資料、GPS 位置與時間戳會被移除），但也代表加完浮水印的副本不再是鑑識原檔。
可以批次幫多張圖片加浮水印嗎？
可以。一次拖入多個檔案，會套用同一個浮水印。批次大小受限於瀏覽器記憶體——批次過大時處理會變慢，行動裝置上甚至可能耗盡記憶體。建議每批控制在約 20-50 張。