给页面加上水印
export default {
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();
}
}
<template>
<div class="content" :style="{backgroundImage:`url(${orgBackground})`}">123</div>
</template>
<script>
import tool from "../plus/tool";
export default {
data() {
return {
orgBackground: "",
};
},
name: "test",
mounted() {
localStorage.setItem("loginUserName", "ruan");
localStorage.setItem("logunUserPhone", "123456");
this.orgBackground = tool.addWaterMark();
},
};
</script>
<style lang='less' scoped>
.content {
position: relative;
width: 100vw;
height: 100vh;
}
</style>
</script>