「前端添加水印」你真的了解全面嗎？

## 引言：水印背后的秘密

在Web前端開發中，水印是一種常見且重要的功能，它用于保護版權、防止惡意截圖傳播以及增加品牌曝光度。然而，實現前端水印的方式多種多樣，其中蘊含的技術細節你是否真正掌握全面了呢？本文將深入探討前端水印的實現原理、應用場景、不同方法的優劣對比，并通過具體代碼實例呈現給各位讀者。

### **一、前端水印基礎概念與應用場景**

**1. 水印類型及其作用**

- **靜態水印**：固定位置和內容的水印，常用于頁眉、頁腳或者背景層。

- **動態水印**：可以根據用戶信息動態生成，例如用戶ID、訪問時間等，用于追蹤和防偽。

**2. 常見應用場景**

- **版權保護**：網站內容、圖片或視頻上添加版權聲明，表明所有權。

- **用戶行為跟蹤**：針對用戶操作添加個性化的動態水印，如下載報告、查看數據時記錄用戶身份。

- **內部測試階段標識**：在產品預覽或測試版本中添加“測試版”或“機密”等字樣，防止信息泄露。

### **二、前端水印實現技術解析**

**1. CSS樣式實現**

利用CSS `::before` 和 `::after` 偽元素創建半透明文字或圖片作為水印，適用于靜態水印。

```html

<style>

.watermark {

position: relative;

}

.watermark::before {

content: "Copyright ? Your Company";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

color: rgba(255, 255, 255, 0.5);

font-size: 20px;

font-weight: bold;

background-image: url('watermark.png');

background-repeat: repeat;

mix-blend-mode: multiply;

pointer-events: none;

z-index: -1;

}

</style>

<div class="watermark">

<!-- 頁面主要內容 -->

</div>

```

**2. JavaScript動態生成**

借助JavaScript來動態創建DOM元素，可以靈活控制水印的位置、內容和樣式，尤其適合動態水印。

```javascript

function addWatermark(text, opacity) {

const watermark = document.createElement('div');

watermark.style.position = 'absolute';

watermark.textContent = text;

watermark.style.color = `rgba(0, 0, 0, ${opacity})`;

watermark.style.fontSize = '24px';

watermark.style.zIndex = 9999;

// 動態計算水印位置，這里僅舉例居中顯示

const pageWidth = window.innerWidth;

const pageHeight = window.innerHeight;

watermark.style.left = `${(pageWidth / 2) - (text.length * 12)}px`;

watermark.style.top = `${(pageHeight / 2)}px`;

document.body.appendChild(watermark);

}

addWatermark('User ID: uniqueID', 0.5);

```

**3. Canvas繪圖法**

對于圖片水印或復雜效果，可以利用HTML5 Canvas API在圖片加載后直接在畫布上繪制水印，再轉換為圖片輸出。

```javascript

let canvas = document.createElement('canvas');

let ctx = canvas.getContext('2d');

// 加載原始圖片

let img = new Image();

img.src = 'original.jpg';

img.onload = () => {

canvas.width = img.width;

canvas.height = img.height;

// 繪制原始圖片

ctx.drawImage(img, 0, 0);

// 繪制水印文字

ctx.font = '24px Arial';

ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';

ctx.fillText('Your Watermark Text', 10, 10);

// 將帶有水印的canvas轉為圖片

let dataUrl = canvas.toDataURL('image/jpeg');

let watermarkedImg = new Image();

watermarkedImg.src = dataUrl;

document.body.appendChild(watermarkedImg);

};

```

### **三、前端水印方案選擇與優劣分析**

**1. CSS樣式 vs JavaScript動態生成**

- **CSS樣式**：優點在于簡單易用，無需額外引入JavaScript；缺點是靈活性較低，不適用于動態水印。

- **JavaScript動態生成**：優點是高度靈活，可應對各種復雜的動態場景；缺點是對SEO友好度相對較低，且可能影響頁面加載速度。

**2. Canvas繪圖法**

- **Canvas繪圖**：適用于圖片類資源的水印添加，既能保證原圖質量，又能精確控制水印位置和樣式；但需要注意兼容性問題，尤其是老版本IE瀏覽器可能不支持。

### **四、前沿探索：Web Workers與WebGL在水印技術中的應用**

隨著Web技術的進步，Web Workers可以用來實現后臺線程繪制水印，避免阻塞主線程；而WebGL則能實現更復雜三維效果的水印，比如傾斜、旋轉等，從而擴展前端水印的可能性。

### **結語：**

前端水印技術并非止步于簡單的文字疊加，而是涵蓋了樣式布局、DOM操作、圖形繪制等多個層面的知識點。熟練掌握這些技術，不僅能夠有效保障網站內容的安全性和版權，更能提升用戶體驗，展現獨特的品牌形象。在面對不同的業務需求時，合理選擇并靈活運用前端水印技術顯得尤為重要。持續關注這一領域的發展，方能在實戰中游刃有余，從容應對挑戰。

無聊打發時間，利用css簡單寫一個給網站文章內容的右上角添加一個原創標識；

用來提醒他人本篇為本站原創，轉發文章時候請附轉載地址。

首先，我們修改下方css類名“tx-box”改為你自己文章最外層盒子的類名，找不到可聯系小編鵬仔幫你哦。

然后，修改background 的圖片路徑，圖片大家自行下載（ps簡單做了兩個小圖標，一個帶白的陰影，一個不帶，自行選擇，psd忘記保存，也沒什么需要修改），引入。

下載圖片 iqzhan.com/post/69.html

接著將下方css放到網站公共css中，或者找到文章區域引入css的文件。

CSS

.tx-box .info-con{
    position: relative;
}
.tp-yuanchuang{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    opacity: .8;
    width: 110px;
    height: 70px;
    background: url(圖片路徑) no-repeat;
    background-size: auto;
}

opacity為水印透明度，0-1范圍，如果覺得顏色比較重，可往小的設置 .5

最后，我們在編輯文章時候，哪篇文章需要，我們在文章編輯時，編輯器的html中，放入下方html代碼即可。

Markup

<div class="tp-yuanchuang"></div>

道經緯相機是一個非常好玩的相機軟件，它不僅可以拍攝很好看的照片，還可以在照片上添加經緯度的水印，讓你的照片看起來更加有格調，水印的格式可以自己設置，喜歡的不要錯過。

軟件介紹

元道經緯相機主要用于拍照時將位置信息以水印方式放入相片中。水印信息包括：經緯度、地址、時間、IMEI、備注以及圖片。可設置水印文字字體和顏色，圖片的透明度和樣式。在的新版本當中添加了前置攝像頭拍照的功能。

軟件功能

為水印文字選擇字體、顏色；

可以實時的記錄您的拍攝位置；

為自己拍攝的照片設置水印簽名；

在夜晚拍攝的時候您可以開啟閃光燈；

自由的進行前攝像頭和后攝像頭的切換；

原文地址：http://www.3h3.com/az/162372.html