vue项目添加水印，防止刷新页面水印消失

112 阅读 0 评论 74 点赞

我是靠谱客的博主合适大象，这篇文章主要介绍vue项目添加水印，防止刷新页面水印消失，现在分享给大家，希望可以做个参考。

引入一个waterMark.js文件之后 IE各种问题
问题1：页面出现空白，登录页面都没有显示出来
问题2：IE低版本（11以下）总是报语法错误
问题1出现的原因是js文件包含箭头函数
问题2出现的原因是const变量 Ie低版本无法识别

呈上js文件

复制代码

'use strict'
let watermark = {}
let setWatermark = function(str) {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
let can = document.createElement('canvas')
can.width = 600
can.height = 120
let cans = can.getContext('2d')
cans.rotate(-10 * Math.PI / 180)
cans.font = '18px Vedana'
cans.fillStyle = 'rgba(200, 200, 200, 0.60)'
cans.textAlign = 'center'
cans.textBaseline = 'Middle'
// drawText("Hello, World!What a nice day.",0,30,110)
var w= can.width / 3;
var h = can.height / 2;
//cans.fillText(str, can.width / 3, can.height / 2)
var chr = str.split(" ");
// var chr
var temp = "";
var row = [];
for(var a = 0; a < chr.length; a++){
if( cans.measureText(temp).width < w ){
}
else{
row.push(temp);
temp = "";
}
temp += chr[a];
}
row.push(temp);
for(var b = 0; b < row.length; b++){
cans.fillText(row[b],120,56+(b+1)*30);
}
let 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 = '10000000000'
div.style.width = document.documentElement.clientWidth - 100 + 'px'
div.style.height = document.documentElement.clientHeight - 100 + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
}
// 该方法只允许调用一次
watermark.set =function(str) {
let id = setWatermark(str)
setInterval(function(str) {
if (document.getElementById(id) === null) {
id = setWatermark(str)
}
}, 500)
window.onresize = function() {
setWatermark(str)
}
}
export default watermark

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
'use strict'
let watermark = {}
let setWatermark = function(str) {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
let can = document.createElement('canvas')
can.width = 600
can.height = 120
let cans = can.getContext('2d')
cans.rotate(-10 * Math.PI / 180)
cans.font = '18px Vedana'
cans.fillStyle = 'rgba(200, 200, 200, 0.60)'
cans.textAlign = 'center'
cans.textBaseline = 'Middle'
// drawText("Hello, World!What a nice day.",0,30,110)
var w= can.width / 3;
var h = can.height / 2;
//cans.fillText(str, can.width / 3, can.height / 2)
var chr = str.split(" ");
// var chr
var temp = "";
var row = [];
for(var a = 0; a < chr.length; a++){
if( cans.measureText(temp).width < w ){
}
else{
row.push(temp);
temp = "";
}
temp += chr[a];
}
row.push(temp);
for(var b = 0; b < row.length; b++){
cans.fillText(row[b],120,56+(b+1)*30);
}
let 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 = '10000000000'
div.style.width = document.documentElement.clientWidth - 100 + 'px'
div.style.height = document.documentElement.clientHeight - 100 + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
}
// 该方法只允许调用一次
watermark.set =function(str) {
let id = setWatermark(str)
setInterval(function(str) {
if (document.getElementById(id) === null) {
id = setWatermark(str)
}
}, 500)
window.onresize = function() {
setWatermark(str)
}
}
export default watermark

在两个页面调用一下
首先、在app.vue页面调用一下
mounted: function () {
var content = “xxxxx-1298877770 李小龙”
//watermark.set(‘t要添加的水印内容’);
watermark.set(content)
},
但是这个时候一上来就调用的话其实并没有获取到用户的基本信息，但是在app页面也必须调用（原因是防止页面刷新，水印消失）
其次在login页面调用一下（主要就是赋值使用）