web水印背景集成
目的：出于安全考虑，防止应用内容拍照外泄或截图发现问题时确认操作用户人员。在页面上添加水印效果，水印文字为当前登陆用户名。
特点声明：当前水印会根据页面布局大小自动计算水印的行数和高度，兼容浏览器(火狐，谷歌，IE11)
一.引入水印模板jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>水印</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/cloud/js/cloudGraph/jquery-2.1.3.min.js"></script>
<script src="<%=request.getContextPath()%>/cloud/js/WaterMark.js"></script>
<style>
html,body{
height:100%;
width:100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<input type="hidden" id="username" value="<sec:authentication property="principal.username" />"/>
</body>
<script>
var waterMark = new WaterMark(document.getElementsByTagName('body')[0],{
text:$("#username").val(),
color:"#666666",
text2:"XXX公司"
});
</script>
</html>
注意:如果获取不到用户名需要引入jquery.jar
水印属性解释说明：
1.text ：登陆用户名
可以通过<%@taglib uri=“http://www.springframework.org/security/tags” prefix=“sec”%>标签获取当前用户名，也可以通过session获取。
2. color：水印文字颜色，默认统一标准为“#666666”
3. text2 : 默认为XXX公司
二.具体水印样式WaterMark.js加载：
/*
* 水印
* 说明: 可以添加图片水印和文字水印
* 当水印容器大小发生变化时需要调用refresh方法重新填充水印
* */
function WaterMark(node, options){
if(!options){
options = {};
}
this._init(node, options);
this._resizeSpace();
this._fillContent();
this._bindEvent();
}
WaterMark.prototype = {
/* 初始化 */
_init: function(node, options){
this.options = {
node:node, // 添加水印的节点
text: options.text?options.text:"", // 水印文字内容
opacity: options.opacity?options.opacity:0.15, // 水印透明度
startX: options.startX?options.startX:0, // X轴开始位置
startY: options.startY?options.startY:30, // Y轴开始位置
xSpace: 30, // 横向间隔
ySpace: 30, // 纵向间隔
rows: 0, // 行数
cols:0, // 列数
markWidth: options.markWidth?options.markWidth:150, // 水印高度
markHeight: options.markHeight?options.markHeight:80, // 水印宽度
angle: options.angle?options.angle:20, // 倾斜角度
fontSize: options.fontSize?options.fontSize:12, // 字体大小
color: options.color?options.color:"#000", // 字体颜色
fontFamily: options.fontFamily?options.fontFamily: '微软雅黑', // 字体
//imageSrc: options.imageSrc?options.imageSrc: '', // 图片地址
text2: options.text2?options.text2:'', //用文字替换水印图片
};
node.style.overflow = 'hidden'
},
/* 自动调整每个水印间距 使其可以填充整个页面 */
_resizeSpace: function(){
this.pageWidth = Math.max(this.options.node.scrollWidth,this.options.node.clientWidth);
this.pageHeight = 1 + Math.max(this.options.node.scrollHeight,this.options.node.clientHeight);
// 计算旋转后的元素所占宽度和高度
//var radian = this.options.angle / 180 * Math.PI;
//var newMarkHeight = this.options.markHeight * Math.cos(radian) + this.options.markWidth * Math.sin(radian);
// 获取水印行数 并根据行数调整间距使水印填满屏幕
this.options.rows = Math.ceil((this.pageHeight - this.options.startY) / (this.options.markHeight + this.options.ySpace));
this.options.ySpace = Math.floor((this.pageHeight - this.options.startY) / this.options.rows - this.options.markHeight);
// 获取水印列数 并根据列数调整间距使水印填满屏幕
this.options.cols = 1 + Math.ceil((this.pageWidth - this.options.startX) / (this.options.markWidth + this.options.xSpace));
this.options.xSpace = Math.floor((this.pageWidth - this.options.startX) / this.options.cols - this.options.markWidth);
},
/* 填充水印 */
_fillContent:function(){
var domTemp = document.createDocumentFragment();
for(var i = 0; i < this.options.rows; i++){
var posY = i * (this.options.markHeight + this.options.ySpace) + this.options.startY;
for(var j = 0; j < this.options.cols; j++){
var posX = j * (this.options.markWidth + this.options.xSpace) + this.options.startX;
domTemp.appendChild(this._createWaterMark(posX, posY));
}
}
this.markContainer = document.createElement('div');
this.markContainer.className = 'water-mark-container';
this.markContainer.appendChild(domTemp);
this.options.node.appendChild(this.markContainer);
},
/* 构造每个水印节点 */
_createWaterMark: function(x, y){
var markDiv = document.createElement('div');
markDiv.className = 'water-mark-item';
/** 水印效果一：上部文字 下部图片
if(this.options.imageSrc){
markDiv.innerHTML = "<div>"+this.options.text+"</div><img src='"+this.options.imageSrc+"'/>";
}else{
markDiv.appendChild(document.createTextNode(this.options.text));
}
*/
/**水印实现二: 上部文字 下部文字*/
if(this.options.text2){
markDiv.innerHTML = "<div>"+this.options.text+"</div><p style='margin-top: 5px; white-space:pre;'>" + this.options.text2 + "</p>";
}else{
markDiv.appendChild(document.createTextNode(this.options.text));
}
//设置水印div倾斜显示
markDiv.style.webkitTransform = "rotate(-" + this.options.angle + "deg)";
markDiv.style.MozTransform = "rotate(-" + this.options.angle + "deg)";
markDiv.style.msTransform = "rotate(-" + this.options.angle + "deg)";
markDiv.style.OTransform = "rotate(-" + this.options.angle + "deg)";
markDiv.style.transform = "rotate(-" + this.options.angle + "deg)";
markDiv.style.position = "absolute";
markDiv.style.left = x + 'px';
markDiv.style.top = y + 'px';
markDiv.style.overflow = "hidden";
markDiv.style.zIndex = "99999";
markDiv.style.width = this.options.markWidth + 'px';
markDiv.style.height = this.options.markHeight + 'px';
markDiv.style.display = "block";
markDiv.style.pointerEvents='none';
markDiv.style.opacity = this.options.opacity;
markDiv.style.textAlign = "center";
markDiv.style.fontFamily = this.options.fontFamily;
markDiv.style.fontSize = this.options.fontSize;
markDiv.style.color = this.options.color;
return markDiv;
},
/* 事件监听 */
_bindEvent: function(){
var that = this;
// 监听浏览器大小变化事件 动态调整水印
window.onresize = function() {
that.refresh()
}
},
/* 刷新水印 水印容器大小发生变化是调用 */
refresh: function() {
if(this.markContainer){
this.markContainer.innerHTML = ''
}
this._init(this.options.node, this.options);
this._resizeSpace();
this._fillContent();
},
/* 显示水印图层 */
show: function(){
this.markContainer.style.display = 'block';
},
/* 隐藏水印图层 */
hide: function(){
this.markContainer.style.display = 'none';
}
};
三.最终效果图
四.心得
作者第一次发表文章，不足地方欢迎大家指点。