封装utils
watermark.js
let watermark = {};
let idd = '1.23452384164.123412416';
let setWatermark = (str, srt1, srt2, srt3) => {
let id = idd;
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
//创建一个画布
let can = document.createElement('canvas');
//设置画布的长宽
can.width = 600;
can.height = 450;
let cans = can.getContext('2d');
//旋转角度
cans.rotate((-15 * Math.PI) / 180);
cans.font = '18px Vedana';
//设置填充绘画的颜色、渐变或者模式
cans.fillStyle = 'rgba(200, 200, 200, 0.40)';
//设置文本内容的当前对齐方式
cans.textAlign = 'left';
//设置在绘制文本时使用的当前文本基线
cans.textBaseline = 'Middle';
//在画布上绘制填色的文本(输出的文本,开始绘制文本的X坐标位置,开始绘制文本的Y坐标位置)
cans.fillText(str + srt1, can.width / 8, can.height / 2);
cans.fillText(srt2, can.width / 8, can.height / 2.3);
cans.fillText(srt3, can.width / 8, can.height / 2.7);
let div = document.createElement('div');
div.id = id;
const styleStr = `
position:fixed;
visibility:visible !important;
top:30px;
width:${document.documentElement.clientWidth}px;
height:${document.documentElement.clientHeight}px;
left:0;
z-index:100000;
pointer-events:none;
background:url('${can.toDataURL('image/png')}') left top repeat`;
div.setAttribute('style', styleStr);
return id;
};
// 该方法只允许调用一次
watermark.set = (str, srt1, srt2, srt3) => {
let id = setWatermark(str, srt1, srt2, srt3);
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str, srt1, srt2, srt3);
}
}, 500);
window.onresize = () => {
setWatermark(str, srt1, srt2, srt3);
};
};
// 移除
const outWatermark = (id) => {
if (document.getElementById(id) !== null) {
const div = document.getElementById(id);
div.style.display = 'none';
}
};
watermark.remove = () => {
const str = idd;
outWatermark(str);
};
// 将 watermark 的控制方法挂载到 window 对象上
window.watermark = watermark;
export default watermark;
页面使用
mounted() { // 水印
if (!Watermark) {
Watermark = null;
// console.log("无水印",Watermark)
return;
} else {
Watermark.set('admin', '', '禁止截图', '2024-4-8');
}
}
全局使用+个别页面去掉
router.afterEach((to) => {
let Watermark= window.watermark
if(!Watermark ){
Watermark=null
// console.log(store.state.app.watermark,"store.state.app.watermark");
return
}
if (
to.fullPath === "/login" || to.fullPath === "/test"
) {
Watermark.remove()
} else {
Watermark.set(
'第一行','第二行','第三行','第二行'
)
}
})
附ps:头像马赛克实现,css样式
//filter函数
filter: blur(5px);