在 html 中添加圖片水印的核心方法包括使用 css 背景圖片和 canvas 繪圖。1. css 方案適合靜態水印，通過 background-image、background-repeat、background-position 和 background-size 屬性控制，適用于對樣式要求不高的場景；2. canvas 方案更靈活，支持動態繪制圖片或文字水印，并可通過 JavaScript 控制水印的位置、大小、透明度等；3. 適配不同屏幕時，css 可借助 background-size 和媒體查詢，canvas 則通過動態計算尺寸實現響應式布局；4. 添加文字水印需設置字體、顏色并使用 filltext 或 stroketext 方法；5. 防止用戶移除水印的方法包括多重水印、不規則位置、內容融合、服務器端生成及將 canvas 轉換為 data url 等策略。
在 HTML 中添加圖片水印效果，核心在于利用 CSS 的背景圖片和定位屬性，或者使用 Canvas 動態生成帶有水印的圖片。Canvas 方案更靈活，但稍微復雜一些。
解決方案
CSS 背景圖片方案：
這種方案簡單直接，適合對水印位置和樣式要求不高的場景。
立即學習“前端免費學習筆記（深入）”；
- 準備水印圖片： 創建一個透明背景的水印圖片（PNG 格式最佳）。
- CSS 樣式： 將水印圖片設置為目標元素的背景圖片，并調整 background-repeat、background-position 和 background-size 屬性。
<div class="watermarked-image"> @@##@@ </div> <style> .watermarked-image { position: relative; /* 確保定位上下文 */ } .watermarked-image img { display: block; /* 移除圖片下方的額外空間 */ } .watermarked-image::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('watermark.png'); /* 替換為你的水印圖片 */ background-repeat: repeat; /* 或 no-repeat，根據需要調整 */ background-position: center; /* 調整水印位置 */ background-size: 100px; /* 調整水印大小 */ opacity: 0.5; /* 調整水印透明度 */ pointer-events: none; /* 防止水印遮擋下方元素 */ } </style>
Canvas 方案：
Canvas 方案更強大，可以動態生成水印，支持文字水印、圖片水印，以及更復雜的水印布局。
- 創建 Canvas 元素： 在 HTML 中添加一個 Canvas 元素。
- JavaScript 代碼： 使用 JavaScript 獲取 Canvas 上下文，加載原始圖片和水印圖片，然后將它們繪制到 Canvas 上。
<canvas id="watermarkCanvas" width="800" height="600"></canvas> <script> const canvas = document.getElementById('watermarkCanvas'); const ctx = canvas.getContext('2d'); const image = new Image(); image.src = 'your-image.jpg'; // 替換為你的原始圖片 const watermark = new Image(); watermark.src = 'watermark.png'; // 替換為你的水印圖片 image.onload = () => { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); watermark.onload = () => { // 繪制水印，可以多次繪制實現重復水印 for (let i = 0; i < 5; i++) { for (let j = 0; j < 5; j++) { ctx.globalAlpha = 0.3; // 設置透明度 ctx.drawImage(watermark, i * 150, j * 100, 100, 50); // 調整水印位置和大小 ctx.globalAlpha = 1.0; // 恢復透明度 } } }; }; </script>
如何處理水印圖片在不同屏幕尺寸下的適配問題？
CSS 背景圖片方案可以通過 background-size 的 cover 或 contain 屬性進行簡單的適配。更復雜的適配，例如在不同斷點下使用不同大小的水印圖片，需要媒體查詢。
Canvas 方案則可以通過 JavaScript 動態計算水印的位置和大小，根據屏幕尺寸進行調整。 例如，獲取屏幕寬度，然后按比例縮放水印大小和間距。
const screenWidth = window.innerWidth; const watermarkSize = screenWidth * 0.1; // 水印大小為屏幕寬度的 10% const watermarkSpacingX = screenWidth * 0.2; // 水平間距 const watermarkSpacingY = screenWidth * 0.15; // 垂直間距 watermark.onload = () => { for (let i = 0; i < 5; i++) { for (let j = 0; j < 5; j++) { ctx.globalAlpha = 0.3; ctx.drawImage(watermark, i * watermarkSpacingX, j * watermarkSpacingY, watermarkSize, watermarkSize * 0.5); ctx.globalAlpha = 1.0; } } };
如何添加文字水印，而不是圖片水印？
Canvas 方案非常適合添加文字水印。
- 設置字體樣式： 使用 ctx.font 設置字體、大小和樣式。
- 設置文本顏色： 使用 ctx.fillStyle 設置文本顏色。
- 繪制文本： 使用 ctx.fillText() 或 ctx.strokeText() 繪制文本。
image.onload = () => { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); ctx.font = '30px Arial'; // 設置字體 ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 設置顏色和透明度 ctx.textAlign = 'center'; // 設置文本對齊方式 ctx.fillText('Watermark Text', canvas.width / 2, canvas.height / 2); // 繪制文本 };
如何防止用戶輕易移除水印？
完全防止移除水印幾乎是不可能的，但可以增加移除難度。
- 多重水印： 在圖片上添加多個水印，增加移除成本。
- 不規則水印位置： 避免將水印放在圖片邊緣，放置在內容區域。
- 水印與內容融合： 設計水印時，使其與圖片內容有一定的融合，增加移除后的痕跡。
- 服務器端水印： 在服務器端生成水印圖片，避免客戶端操作。 這需要后端配合，前端只負責展示。
- 使用 Canvas 生成 Data URL： 將帶有水印的 Canvas 內容轉換為 Data URL，這樣用戶下載的圖片就是帶有水印的圖片，無法直接獲取原始圖片。
image.onload = () => { // ... (繪制水印) const dataURL = canvas.toDataURL('image/jpeg', 0.8); // 轉換為 Data URL，可以設置圖片質量 // 可以將 dataURL 賦值給 img 標簽的 src 屬性，或者下載 // 例如： document.getElementById('downloadLink').href = dataURL; };
