摘要：
今天遇到一个需求：就是html+layui和uniapp（vue）给某个页面或者某个div添加水印效果！
html+layui：给点击弹出添加水印的
var activityOpen;
function openActivity2(unReadActivityCount) {
if (unReadActivityCount > 0) {
activityOpen = layer.open({
type: 1,
content: $('#view-member-div'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
title: '标题',
area: ['57%', '80%'],
btnAlign: 'c',
zIndex: layer.zIndex,
move: false,
closeBtn: 0,
resize: false,
success: function (layero, index) {
activitySuccess();
},
end: function (index, layero) {
if (unReadActivityCount > 0) {
layer.msg("还有" + unReadActivityCount + "条未读公告", {
icon: 1,
time: 1200
});
var innerActivity = $('#innerActivity');
innerActivity.html('<img src="../images/home/ZY-unread-activity.png">');
} else {
$('#activity_li').hide();
var innerActivity2 = $('#innerActivity2');
innerActivity2.html('<img src="../images/home/activity.gif">');
}
return false;
}
});
var userData = JSON.parse(sessionStorage.getItem('user'));
var watermark_txt = userData.realname + "(" + userData.username + ")" + userData.phone.substring(userData.phone.length - 4);
watermark({
"watermarl_element":"layui-layer2", "watermark_txt":watermark_txt});
}
}
通用方法：
function watermark(settings) {
//默认设置
var defaultSettings={
watermarl_element:"body",
watermark_txt:"",
watermark_x:10,//水印起始位置x轴坐标
watermark_y:10,//水印起始位置Y轴坐标
watermark_rows:3000,//水印行数
watermark_cols:3000,//水印列数
watermark_x_space:50,//水印x轴间隔
watermark_y_space:50,//水印y轴间隔
watermark_color:'#999',//水印字体颜色
watermark_alpha:0.3,//水印透明度
watermark_fontsize:'15px',//水印字体大小
watermark_font:'微软雅黑',//水印字体
watermark_width:320,//水印宽度
watermark_height:50,//水印长度
watermark_angle:20//水印倾斜度数
};
//采用配置项替换默认值，作用类似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;
//获取页面最大宽度
var page_width = Math.max(maskElement.scrollWidth,maskElement.clientWidth);
//获取页面最大高度
var page_height = Math.max(maskElement.scrollHeight,maskElement.clientHeight,maskElement.scrollTop);
//水印数量自适应元素区域尺寸
defaultSettings.watermark_cols=Math.ceil(page_width/(defaultSettings.watermark_x_space+defaultSettings.watermark_width));
defaultSettings.watermark_rows=Math.ceil(page_height/(defaultSettings.watermark_y_space+defaultSettings.watermark_height));
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 = "1029"; // 9999
// pointer-events:none 让水印不遮挡页面的点击事件
mask_div.style.pointerEvents='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);
}
效果：
vuevue(uniapp)(uniapp)：给每个页面添加水印
插件库：waterMark.js
//全局添加水印方法，该方法只允许调用一次
const watermark = {
}
const setWatermark = (str = null, str1 = null) => {
//传入多个str 或者传入一个对象
const id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
const can = document.createElement('canvas')
can.width = 170
can.height = 100
const cans = can.getContext('2d')
cans.rotate(-20 * Math.PI / 180)
cans.font = '12px Vedana'
cans.fillStyle = 'rgba(170,170,170, 0.4)'
cans.textAlign = 'left'
cans.textBaseline = 'Middle'
cans.fillText(str, can.width / 6, can.height)
if(!!str1) {
cans.fillText(str1, can.width / 3, can.height / 1.7) //这里渲染多行就可以展示多行，具体效果需调试，这里要调整高度的比例就可以做到换行的效果
}
const div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '70px'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '100000' //这里设置层级 设为负值可以在页面下层
div.style.width = document.documentElement.clientWidth + 'px'
div.style.height = document.documentElement.clientHeight - 130 + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
}
// 该方法只允许调用一次
watermark.set = (str, str1) => {
//这里要把传入的参数传进来
let id = setWatermark(str, str1)
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str, str1)
}
}, 500)
window.onresize = () => {
setWatermark(str, str1)
}
}
export default watermark;
app.vue：
<script>
import waterMark from "./common/waterMark.js"
export default {
name: "app",
data(){
return {
pathRoute:"",
jsApiList:[]
}
},
methods:{
initwxworkconfig() {
if (/wxwork/i.test(navigator.userAgent)) {
let url = window.location.href.split("#")[0];
let that = this;
that.$axios
.get("/commonNoSession.do", {
params: {
method: "xxx.xxx.get",
data: {
url: url,
appKey: "corpid",
},
},
})
.then((res) => {
if (res.data.code == 0) {
wx.config({
beta: true,
debug: false,
appId: res.data.data.appId,
timestamp: res.data.data.timestamp,
nonceStr: res.data.data.noncestr,
signature: res.data.data.signature,
jsApiList: that.jsApiList
});
wx.ready(function() {
if(that.pathRoute){
wx.hideOptionMenu();
}else{
wx.showOptionMenu();
}
})
wx.error(function(res) {
//config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
let result = res.resultStr // eslint-disable-line no-unused-vars
console.log("ready失败！")
})
} else {
Toast(JSON.stringify(res), "获取签名失败");
}
});
} else {
console.log("非企业微信");
}
},
},
watch: {
'$route' (to, from) { //监听路由是否变化
if(to.name == "noticeDetail"){
this.pathRoute = to.name;
this.jsApiList = ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareWechat','shareAppMessage']
this.initwxworkconfig()
if(to.path !== '/') {
let user = JSON.parse(sessionStorage.getItem("user"));
let showWaterMark = user.realname + "(" + user.username + ")" + user.phone.substring(user.phone.length - 4);
waterMark.set(showWaterMark); //全局水印背景，添加多行水印 waterMark.set(str1,str2)
}
}else {
this.pathRoute = ""
this.jsApiList = []
this.initwxworkconfig()
waterMark.set('');
}
}
}
}
</script>
上面添加了企业微信禁用当前页面的胶囊分享功能，如果在当前页面触发会隐藏所有页面的胶囊的！
效果：
