方案一
可能会报错,解决办法,下面网址
tool.js
创建utils => tool.js
export default {
//tool.js
addWaterMark() {
const strArr = `${
localStorage.getItem(
"loginUserName"
)}${
localStorage
.getItem("logunUserPhone")
.slice(7, 11)}[${
new Date()}]`;
let ctx = document.createElement("canvas");
ctx.width = 250;
ctx.height = 100;
ctx.style.display = "none";
let cans = ctx.getContext("2d");
cans.rotate((-20 * Math.PI) / 180);
cans.font = "12px Microsoft YaHei";
cans.fillStyle = "rgba(17, 17, 17, 0.20)";
cans.textAlign = "left";
cans.textBaseline = "Middle";
cans.fillText(strArr, 0, 100);
cans.save();
return ctx.toDataURL();
}
}
index.vue
可能会报错,解决办法,下面网址
https://blog.csdn.net/weixin_38711005/article/details/117069530
<template>
<div class="content" :style="{backgroundImage:`url(${orgBackground})`}">aaa</div>
</template>
<script>
import tool from "@/utils/tool";
export default {
data () {
return {
orgBackground: "",
};
},
name: "test",
mounted () {
localStorage.setItem("loginUserName", "ruan");
localStorage.setItem("logunUserPhone", "123456");
//实际只需要一行代码
this.orgBackground = tool.addWaterMark();
//监听dom属性改变重新生成水印(如果页面有变化需要去监听dom)
// const org = document.querySelector(".content");
// const options = {
// attributes: true,
// childList: true,
// subtree: true,
// };
// const observer = new MutationObserver((mutationList) => {
// this.orgBackground = tool.addWaterMark();
// });
// observer.observe(org, options);
},
// methods: {
// // 点击去除水印加这个去除方法
// remove () {
// this.orgBackground = null
// }
// }
};
</script>
<style scoped>
.content {
position: relative;
width: 100%;
height: 100vh;
}
</style>
效果
方案二
watermark.js
创建utils => watermark.js
let watermark = {
}
let setWatermark = (str) => {
let id = '1.23452384164.123412416';
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
//创建一个画布
let can = document.createElement('canvas');
//设置画布的长宽
can.width = 120;
can.height = 120;
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, can.width / 8, can.height / 2);
let div = document.createElement('div');
div.id = id;
div.style.pointerEvents = 'none';
div.style.top = '30px';
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 + 'px';
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
document.body.appendChild(div);
return id;
}
// 该方法只允许调用一次
watermark.set = (str) => {
let id = setWatermark(str);
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str);
}
}, 500);
window.onresize = () => {
setWatermark(str);
};
}
export default watermark;
index.vue
<template>
<div>
aaa
</div>
</template>
<script>
import Watermark from '@/utils/watermark'; //路径不要写错
export default {
mounted: function () {
Watermark.set("添加水印内容")
}
}
</script>
效果
最后
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!