为了保证数据的安全，使得信息的传播可以追溯，和微博图片右下角的水印类似，一些站点会要求加上自己的专属水印。
为了显示的需要，我把其中一个水印颜色做了处理，大致效果如下：
image.png
以下为同事提供的一个水印生成脚本
var isIE9 = document.all && document.addEventListener && !window.atob;
var WaterMark = {
WaterMarkModel: {
frontX: "",
frontY: "",
frontRows: "",
frontCols: "",
maskTxt: "",
color: '#000000',
width: 130,
height: 50,
fontSize: '18px',
frontFont: '微软雅黑',
frontBackgroundAlpha: 0,
frontTxtAlpha:0.03,//隐藏水印，通过PS软件调整对比度可以看到底色// 0.1,
angle: 15,
frontXSpace: 150,
frontYSpace: 30,
backgroundColor: '#000000'
},
Init: function () {
WaterMark.CreateWaterMark();
},
CreateWaterMark: function () {
var oTemp = document.createDocumentFragment();
var frontXSpace = WaterMark.WaterMarkModel.frontXSpace;
var frontYSpace = WaterMark.WaterMarkModel.frontYSpace;
var frontRows = WaterMark.WaterMarkModel.frontRows;
var frontCols = WaterMark.WaterMarkModel.frontCols;
var frontX = WaterMark.WaterMarkModel.frontX;
var frontY = WaterMark.WaterMarkModel.frontY;
var maskTxt = WaterMark.WaterMarkModel.maskTxt;
var frontTxtAlpha = WaterMark.WaterMarkModel.frontTxtAlpha;
var fontSize = WaterMark.WaterMarkModel.fontSize;
var frontFont = WaterMark.WaterMarkModel.frontFont;
var width = WaterMark.WaterMarkModel.width;
var height = WaterMark.WaterMarkModel.height;
var angle = WaterMark.WaterMarkModel.angle;
var color = WaterMark.WaterMarkModel.color;
var maxWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth) - 20;
var maxHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - 20;
if (frontCols == 0 || (parseInt(frontX + width * frontCols + frontXSpace * (frontCols - 1)) > maxWidth)) {
frontCols = parseInt((frontXSpace + maxWidth - frontX) / (width + frontXSpace));
frontXSpace = parseInt(((maxWidth - frontX) - width * frontCols) / (frontCols - 1));
if (!frontXSpace) {
frontXSpace = 0;
}
}
if (frontRows == 0 || (parseInt(frontY + height * frontRows + frontYSpace * (frontRows - 1)) > maxHeight)) {
frontRows = parseInt((frontYSpace + maxHeight - frontY) / (height + frontYSpace));
frontYSpace = parseInt(((maxHeight - frontY) - height * frontRows) / (frontRows - 1));
if (!frontYSpace) {
frontYSpace = 0;
}
}
var x;
var y;
for (var i = 0; i < frontRows; i++) {
y = frontY + (frontYSpace + height) * i;
for (var j = 0; j < frontCols; j++) {
x = frontX + (width + frontXSpace) * j;
var maskDiv = document.createElement('div');
var m = WaterMark.GetRotation(-angle);
maskDiv.id = 'mask_div' + i + j;
maskDiv.appendChild(document.createTextNode(maskTxt));
maskDiv.style.webkitTransform = "rotate(-" + angle + "deg)";
maskDiv.style.MozTransform = "rotate(-" + angle + "deg)";
maskDiv.style.msTransform = "rotate(-" + angle + "deg)";
maskDiv.style.OTransform = "rotate(-" + angle + "deg)";
maskDiv.style.transform = "rotate(-" + angle + "deg)";
maskDiv.style.visibility = "";
maskDiv.style.position = "absolute";
maskDiv.style.left = x + 'px';
maskDiv.style.top = y + 'px';
maskDiv.style.overflow = "hidden";
//mask_div.style.border="solid #eee 1px";
maskDiv.style.opacity = frontTxtAlpha;
if (isIE9) {
maskDiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + frontTxtAlpha * 100 + ")";
} else {
maskDiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + frontTxtAlpha * 100 + ") progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + m[0] + ", M12=" + m[1] + ", M21=" + m[2] + ", M22=" + m[3] + ")";
}
maskDiv.style.fontSize = fontSize;
maskDiv.style.fontFamily = frontFont;
maskDiv.style.color = color;
maskDiv.style.textAlign = "center";
maskDiv.style.width = width + 'px';
maskDiv.style.height = height + 'px';
maskDiv.style.display = "block";
maskDiv.style.zIndex = "2";
oTemp.appendChild(maskDiv);
};
};
document.body.appendChild(oTemp);
},
GetRotation: function (deg) {
var deg2Rad = Math.PI * 2 / 360;
var rad = deg * deg2Rad;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
return [m11, m12, m21, m22];
}
};
页面引入以上的js 文件，调用方法如下：
//WaterMarkdom 要显示水印的页面元素的id
var relation = document.getElementById('WaterMarkdom');
var relationTop = relation.offsetTop;
var relationHeight = relation.offsetHeight;
var relationWidth = relation.offsetWidth;
var relationLeft = relation.offsetLeft;
WaterMark.WaterMarkModel.maskTxt = '我是水印';//水印文字
WaterMark.WaterMarkModel.frontX = relationLeft;
WaterMark.WaterMarkModel.frontY = relationTop;
WaterMark.WaterMarkModel.frontXSpace = 20;
WaterMark.Init();
水印生成成功，要是这么简单就好了。同事写的脚本原理是在页面上方生成绝对定位的浮动层，即每个水印标签都是一个反转透视的浮动div。那么如果你的div区域还有事件热点区域就惨了，比如我的这个页面要支持滑动，手指上移或者下移要触发页面滚动事件，实际操作时，手指与屏幕的接触位置可能是水印，接触点不在事件的有效元素。
如图，水印所在位置形成了一个事件盲点区域。
image.png
为了解决这个问题，我首先尝试手指接触到屏幕时，隐藏水印，但没什么卵用，因为touchstart已经触发。然后我尝试将水印层下移，即z-index比当前层低一层，设置页面整体的透明度，这个效果可以实现，但真个页面的呈现效果会变得比较诡异。
上线在即，我又开始各种检索，最后一个知乎网友处找到方案，但仅支持css3标准，不管啦，问题已经部分解决。万能的简友，有好的方案请一定要给我留言。
什么，你说解决方案。差点忘了，是这样的。首先在脚本里面增加一句，给每个水印加个class属性：
maskDiv.className = "mask_div";
然后在样式表里增加一句：
.mask_div { pointer-events: none;}
关于该属性的说明如下：
image.png
网友评论