## 一、核心方法 `createWatermark`
```
this.define("createWatermark", function(text, options = {}) {
// 合并配置参数
const config = {
fontSize: 16,
showPrint: true,
fontFamily: 'Arial',
color: 'rgba(128, 128, 128, 0.3)',
angle: -30,
container: document.body,
width: 200,
height: 150,
zIndex: 9999,
...options
};
// 创建画布并绘制水印
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = config.width;
canvas.height = config.height;
ctx.font = `${config.fontSize}px ${config.fontFamily}`;
ctx.fillStyle = config.color;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.translate(config.width / 2, config.height / 2);
ctx.rotate((Math.PI / 180) * config.angle);
ctx.fillText(text, 0, 0);
// 创建并设置水印容器样式
const watermarkDiv = document.createElement('div');
watermarkDiv.className = 'print-watermark';
const watermarStyle = `
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:${config.zIndex};
pointer-events:none;
background-image:url('${canvas.toDataURL()}');
background-repeat:repeat;
`;
watermarkDiv.setAttribute('style', watermarStyle);
// 动态添加CSS以控制打印时的显示
const style = document.createElement('style');
style.textContent = `
.print-watermark {
display: ${config.showPrint ? 'block' : 'none'} !important;
}
@media print {
.print-watermark {
display: block !important;
}
}
`;
document.head.appendChild(style);
// 防删除机制
const observer = new MutationObserver(() => {
if (!watermarkDiv.isConnected) {
config.container.appendChild(watermarkDiv);
}
});
// 启动监听并添加水印
observer.observe(config.container, { childList: true, subtree: true });
config.container.appendChild(watermarkDiv);
return {
destroy: () => {
observer.disconnect();
watermarkDiv.remove();
}
};
});
```
## 二、参数说明
|参数名|类型|是否必选|默认值|说明|
|:-:|:-:|:-:|:-:|:-:|
|`text`|`string`|是|-|水印文字内容|
|`fontSize`|`number`|否|16|字体大小（px）|
|`showPrint`|`boolean`|否|true|控制打印可见性|
|`fontFamily`|`string`|否|'Arial'|字体系列|
|`color`|`string`|否|rgba(128,128,128,0.3)|文字颜色|
|`angle`|`number`|否|-30|旋转角度（度）|
|`container`|`DOM`|否|document.body|水印容器|
|`width`|`number`|否|200|单张水印宽度（px）|
|`height`|`number`|否|150|单张水印高度（px）|
|`zIndex`|`number`|否|9999|层叠顺序|
## 三、功能特性
### 1. 打印支持
```css
/* 自动注入的打印控制CSS */
@media print {
.print-watermark {
display: block !important;
}
}
```
### 2. 防删除机制
```
// 自动恢复被删除的水印
const observer = new MutationObserver(() => {
if (!watermarkDiv.isConnected) {
config.container.appendChild(watermarkDiv);
}
});
observer.observe(config.container, { childList: true, subtree: true });
```
## 四、使用示例
### 1. 基础用法
```
const watermark = createWatermark("版权所有 © 2023", {
color: 'rgba(100, 100, 100, 0.4)',
fontSize: 24,
angle: -20
});
```
### 2. 高级配置
```
createWatermark("内部文档", {
fontFamily: '微软雅黑',
width: 250,
height: 200,
container: document.getElementById('main-content'),
zIndex: 10000
});
```
### 3. 销毁水印
```
watermark.destroy();
```
## 五、注意事项
1. 水印文字建议保持简洁，避免复杂排版
2. 透明度过低可能影响可读性，建议值 0.2-0.5
3. 旋转角度范围建议 - 45° ~ 45°
4. 大尺寸水印可能影响页面性能
5. 特殊字符需要进行 HTML 转义处理
