1、实时状态中实现添加水印未连接 代码记录，通过在网上找到了js为页面添加水印的方法，后来经过自己的改进，可以实现为页面部分元素添加水印，最终效果如下图：
1、自己测试的效果如下：
参考代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.mask_div {
/* vertical-align: central;
text-align: center;
margin: 0 auto;*/
}
body {
text-align: center
}
</style>
</head>
<body id="all">
<!--<script charset="utf-8">
function addWaterMarker(str) {
var can = document.createElement('canvas'); var body = document.body;
body.appendChild(can);
can.width = 400; can.height = 200; can.style.display = 'none';
var cans = can.getContext('2d'); cans.rotate(-20 * Math.PI / 180); cans.font = "16px Microsoft JhengHei"; cans.fillStyle = "rgba(17, 17, 17, 0.50)"; cans.textAlign = 'left'; cans.textBaseline = 'Middle'; cans.fillText(str, can.width / 3, can.height / 2);
body.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
}
addWaterMarker("2019年1月25日")
addWaterMarker("这是添加的水印")
</script>-->
<h2>这是标题</h2><p>这个网页中，你会看到被加了水印</p>
<form name="user" action="#" method="get">
<table align="center">
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="name" checked="checked" />男
<input type="radio" name="name" />女
</td>
</tr>
<tr>
<td>地址</td>
<td>
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
</select>
<select>
<option>海淀区</option>
<option>朝阳区</option>
<option>昌平区</option>
</select>
</td>
</tr>
<tr> <td>爱好</td> <td> <input type="checkbox" name="sport" checked="checked" />运动 <input type="checkbox" name="basketball" />篮球 <input type="checkbox" name="volleyball" />排球 </td> </tr>
<tr> <td>邮箱</td> <td> <input type="text" name="emall" /> </td> </tr>
<tr> <td>电话号码</td> <td> <input type="text" name="phone" /> </td> </tr>
<tr> <td>上传头像</td> <td> <input type="file" name="file" /> </td> </tr>
<tr> <td>其他</td> <td> <textarea rows="15" cols="50"></textarea> </td> </tr>
<tr> <td></td> <td> <input type="button" value="普通按钮" /> <input type="submit" name="tijiao" value="注册" /> <input type="reset" name="quxiao" value="取消" /> </td> </tr>
<tr> <td></td> <td> <input type="image" name="img" src="btn.gif" /> </td> </tr>
</table>
</form>
<script>
function watermark(settings) {
//默认设置
var defaultSettings = {
watermarl_element: "body",
watermark_txt: "",
watermark_x: 20,//水印起始位置x轴坐标
watermark_y: 20,//水印起始位置Y轴坐标
watermark_rows: 1,//水印行数
watermark_cols: 1,//水印列数
watermark_x_space: 70,//水印x轴间隔
watermark_y_space: 30,//水印y轴间隔
watermark_color: '#aaa',//水印字体颜色
watermark_alpha: 0.4,//水印透明度
watermark_fontsize: '20px',//水印字体大小
watermark_font: '微软雅黑',//水印字体
watermark_width: 300,//水印宽度
watermark_height: 100,//水印长度
watermark_angle: 350//水印倾斜度数
};
//采用配置项替换默认值，作用类似jquery.extend
if (arguments.length === 1 && typeof arguments[0] === "object") {
var src = arguments[0] || {};
for (key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
continue;
else if (src[key])
defaultSettings[key] = src[key];
}
}
var oTemp = document.createDocumentFragment();
var maskElement = document.getElementById(defaultSettings.watermarl_element) || document.body;
console.log("maskElement.scrollWidth====" + maskElement.scrollWidth + "maskElement.clientWidth====" + maskElement.clientWidth)
//获取页面最大宽度
var page_width = Math.max(maskElement.scrollWidth, maskElement.clientWidth);
//获取页面最大高度
var page_height = Math.max(maskElement.scrollHeight, maskElement.clientHeight);
//水印数量自适应元素区域尺寸
//defaultSettings.watermark_cols = 1;
//defaultSettings.watermark_rows = 1;
defaultSettings.watermark_cols = Math.ceil(page_width / (defaultSettings.watermark_x_space + defaultSettings.watermark_width))-1;
defaultSettings.watermark_rows = Math.ceil(page_height / (defaultSettings.watermark_y_space + defaultSettings.watermark_height));
console.log("defaultSettings.watermark_cols==" + defaultSettings.watermark_cols + "defaultSettings.watermark_rows==" + defaultSettings.watermark_rows);
var x;
var y;
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.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(defaultSettings.watermark_txt));
mask_div.innerHTML = (defaultSettings.watermark_txt);
//设置水印div倾斜显示
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + defaultSettings.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 = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = defaultSettings.watermark_width + 'px';
mask_div.style.height = defaultSettings.watermark_height + 'px';
mask_div.style.display = "block";
oTemp.appendChild(mask_div);
};
};
maskElement.appendChild(oTemp);
}
watermark({
"watermarl_element": "all", "watermark_txt": "未连接"
});
</script>
</body>
</html>
3169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
