為了保證數(shù)據(jù)的安全断医，使得信息的傳播可以追溯黔衡，和微博圖片右下角的水印類(lèi)似，一些站點(diǎn)會(huì)要求加上自己的專(zhuān)屬水印耗美。
為了顯示的需要京髓，我把其中一個(gè)水印顏色做了處理航缀，大致效果如下：
image.png
以下為同事提供的一個(gè)水印生成腳本
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,//隱藏水印，通過(guò)PS軟件調(diào)整對(duì)比度可以看到底色// 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];
}
};
頁(yè)面引入以上的js 文件堰怨，調(diào)用方法如下：
//WaterMarkdom 要顯示水印的頁(yè)面元素的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();
水印生成成功芥玉，要是這么簡(jiǎn)單就好了。同事寫(xiě)的腳本原理是在頁(yè)面上方生成絕對(duì)定位的浮動(dòng)層备图，即每個(gè)水印標(biāo)簽都是一個(gè)反轉(zhuǎn)透視的浮動(dòng)div灿巧。那么如果你的div區(qū)域還有事件熱點(diǎn)區(qū)域就慘了，比如我的這個(gè)頁(yè)面要支持滑動(dòng)揽涮，手指上移或者下移要觸發(fā)頁(yè)面滾動(dòng)事件抠藕，實(shí)際操作時(shí)，手指與屏幕的接觸位置可能是水印蒋困，接觸點(diǎn)不在事件的有效元素幢痘。
如圖，水印所在位置形成了一個(gè)事件盲點(diǎn)區(qū)域家破。
image.png
為了解決這個(gè)問(wèn)題颜说，我首先嘗試手指接觸到屏幕時(shí)，隱藏水印汰聋，但沒(méi)什么卵用门粪，因?yàn)閠ouchstart已經(jīng)觸發(fā)。然后我嘗試將水印層下移烹困，即z-index比當(dāng)前層低一層玄妈，設(shè)置頁(yè)面整體的透明度，這個(gè)效果可以實(shí)現(xiàn)髓梅，但真?zhèn)€頁(yè)面的呈現(xiàn)效果會(huì)變得比較詭異拟蜻。
上線(xiàn)在即，我又開(kāi)始各種檢索枯饿，最后一個(gè)知乎網(wǎng)友處找到方案酝锅，但僅支持css3標(biāo)準(zhǔn)，不管啦奢方，問(wèn)題已經(jīng)部分解決搔扁。萬(wàn)能的簡(jiǎn)友，有好的方案請(qǐng)一定要給我留言蟋字。
什么稿蹲，你說(shuō)解決方案。差點(diǎn)忘了鹊奖，是這樣的苛聘。首先在腳本里面增加一句，給每個(gè)水印加個(gè)class屬性：
maskDiv.className = "mask_div";
然后在樣式表里增加一句：
.mask_div { pointer-events: none;}
關(guān)于該屬性的說(shuō)明如下：
image.png
