為了保證數據的安全，使得信息的傳播可以追溯，和微博圖片右下角的水印類似，一些站點會要求加上自己的專屬水印。
為了顯示的需要，我把其中一個水印顏色做了處理，大致效果如下：
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
