移动端设置水印

直接上代码

<script>
export default {
created() {
this.water();
},
beforeDestroy() {
clearInterval(this.timer)
window.onresize = null
},
methods: {
water() {
this.setMark(this.$store.state.userInfo.loginUserName+'
'+this.$store.state.userInfo.employeeName+'
'+this.CurentTime());
},
setMark(str) {
let id = this.setWatermark(str);
this.timer = setInterval(() => {
if (document.getElementById(id) === null) {
id = this.setWatermark(str);
}
}, 500);
window.onresize = () => {
this.setWatermark(str);
};
},
setWatermark(str) {
let id = "floatCavs";
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
let can = document.createElement("canvas");
can.width = 321;
can.height = 50;
let cans = can.getContext("2d");
cans.rotate((-10 * Math.PI) / 180);
cans.font = "14.8px Vedana";
cans.fillStyle = "rgba(200, 200, 200, 0.50)";
cans.textAlign = "center";
cans.textBaseline = "Middle";
cans.fillText(str, can.width / 3, can.height / 1);
let div = document.createElement("div");
div.id = id;
div.style.pointerEvents = "none";
div.style.top = "0px";
div.style.left = "0px";
div.style.position = "fixed";
div.style.zIndex = "100000";
div.style.width = "100%";
div.style.height = "100%";
div.style.background =
"url(" + can.toDataURL("image/png") + ") left top repeat";
document.body.appendChild(div);
return id;
}
}
}
</script>

最后

以上就是坚定乌冬面为你收集整理的移动端设置水印的全部内容，希望文章能够帮你解决移动端设置水印所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。