引入下文的js文件后，只需要在html中写一行js，即可给网页加水印
html部分不用加css，只需要引入这个js文件，并且在需要的时机调用加水印的方法即可。
html部分,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水印</title>
</head>
<body>
<div style="text-align:center;">
<div id="app">
这是页面的主体内容
</div>
</div>
<script src="./watermarkDiv.js"></script>
<script>
var config = {watermark_txt:'这是一段水印，宽高，文字大小，间距，旋转角度均可配置'}
watermark(config);
//监听窗口变动
window.onresize = function() {
watermark(config);
}
</script>
</body>
</html>
新建一个watermarkDiv.js文件，放在html的同级目录，源代码如下，注释已补齐
/**
* @description 调用并传入配置，即可生成水印
* @param { Object } config 传入的配置，参考defaultSettings的配置项
* @param { String } config.waterText 水印文字
* @param { Number } config.watermark_x 水印起始位置x轴坐标
* @param { Number } config.watermark_y 水印起始位置Y轴坐标
* @param { Number } config.watermark_rows 水印行数
* @param { Number } config.watermark_cols 水印列数
* @param { Number } config.watermark_x_space 水印x轴间隔
* @param { Number } config.watermark_y_space 水印y轴间隔
* @param { String } config.watermark_color 水印字体颜色
* @param { Number } config.watermark_alpha 水印透明度
* @param { String } config.watermark_fontsize 水印字体大小
* @param { String } config.watermark_font 水印字体
* @param { Number } config.watermark_width 水印宽度
* @param { Number } config.watermark_height 水印高度
* @param { Number } config.watermark_angle 水印倾斜度
*/
function watermark(config) {
//每次打水印之前先移除旧的dom，防止重复渲染或其他问题
removeWatermark('water-div')
var water = document.createElement('div')
water.id = "water-div"
//初始设置水印容器高度
water.innerHTML = "";
water.style.height = window.screen.availHeight + "px";
water.style.height = document.documentElement.clientHeight + "px";
document.body.appendChild(water)
//水印样式默认设置
var defaultSettings={
watermark_txt:'水印内容',
watermark_x:20,//水印起始位置x轴坐标
watermark_y:20,//水印起始位置Y轴坐标
watermark_rows:2000,//水印行数
watermark_cols:2000,//水印列数
watermark_x_space:70,//水印x轴间隔
watermark_y_space:30,//水印y轴间隔
watermark_color:'#aaaaaa',//水印字体颜色
watermark_alpha:0.4,//水印透明度
watermark_fontsize:'15px',//水印字体大小
watermark_font:'微软雅黑',//水印字体
watermark_width:210,//水印宽度
watermark_height:80,//水印长度
watermark_angle:15//水印倾斜度数
};
var settings = mergeObjects(defaultSettings,config)
//获取页面最大宽度
var page_width = Math.max(water.scrollWidth,water.clientWidth);
//获取页面最大高度
var page_height = Math.max(water.scrollHeight,water.clientHeight);
// console.log( page_height)
//水印数量自适应元素区域尺寸
settings.watermark_cols=Math.ceil(page_width/(settings.watermark_x_space+settings.watermark_width));
settings.watermark_rows=Math.ceil(page_height/(settings.watermark_y_space+settings.watermark_height));
var x;
var y;
for (var i = 0; i < settings.watermark_rows; i++) {
y = settings.watermark_y + (settings.watermark_y_space + settings.watermark_height) * i;
for (var j = 0; j < settings.watermark_cols; j++) {
x = settings.watermark_x + (settings.watermark_width + settings.watermark_x_space) * j;
var mask_div = document.createElement('div');
//mask_div.id = 'mask_div' + i + j;
mask_div.className = 'mask_div';
//mask_div.appendChild(document.createTextNode(settings.watermark_txt));
mask_div.innerHTML=(settings.watermark_txt);
//设置水印div倾斜显示
mask_div.style.webkitTransform = "rotate(-" + settings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + settings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + settings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + settings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + settings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
mask_div.style.left = x + 'px';
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "9999";
mask_div.style.pointerEvents='none';//pointer-events:none 让水印不遮挡页面的点击事件
//mask_div.style.border="solid #eee 1px";//兼容IE9以下的透明度设置 mask_div.style.filter="alpha(opacity=50)";
mask_div.style.opacity = settings.watermark_alpha;
mask_div.style.fontSize = settings.watermark_fontsize;
mask_div.style.fontFamily = settings.watermark_font;
mask_div.style.color = settings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = settings.watermark_width + 'px';
mask_div.style.height = settings.watermark_height + 'px';
mask_div.style.display = "block";
water.appendChild(mask_div);
}
}
insertXHLStyle(`
#water-div{pointer-events:none;position:fixed;top:0;left:0;right:0;bottom:0;}
.mask_div{pointer-events:none;}
`)
}
/**
* @description 给html中添加style标签
* @param {string} styleStr
*/
function insertXHLStyle(styleStr) {
if (document.all) { // document.createStyleSheet(url)
window.customStyle = styleStr;
document.createStyleSheet("javascript:customStyle");
} else { //document.createElement(style)
var styleNode = document.createElement('style');
styleNode.type = 'text/css';
var styleTextNode = document.createTextNode(styleStr);
styleNode.appendChild(styleTextNode);
document.getElementsByTagName('HEAD').item(0).appendChild(styleNode);
}
}
/**
* @description 移除水印功能，防止重复渲染
* @param {string} boxId
*/
function removeWatermark(boxId){
let water_div = document.getElementById(boxId)
if(water_div){
document.body.removeChild(water_div)
}
}
/**
* @description 合并默认配置和传入的配置，传入配置的优先级高于默认
* @param {*} A 默认配置
* @param {*} B 传入的配置
* @returns 合并后的配置
*/
function mergeObjects(A, B) {
let result = Object.assign({}, A);
for (let key in B) {
if (B[key]) {
result[key] = B[key];
}
}
return result;
}
效果图：
2024-11-25更新
js文件的内容做了一些更新。使用jsdoc的方式显示地声明参数的类型，更加易用。
