vue 使用class创建和清除水印

页面添加水印的方法有很多，以下举例使用class定义的方法进行水印内容渲染：

方法一（推荐）：

1、新建文件：WatermarkClass.js

 1 export default class WatermarkClass {
 2     constructor({id="watermarkID", str = "", fontSize = 18, width = 400, height = 400, fillStyle="#333333", opacity = 1 }) {
 3         this.id = id;
 4         this.str = str;
 5         this.fontSize = fontSize;
 6         this.width = width;
 7         this.height = height;
 8         this.fillStyle = fillStyle
 9         this.opacity = opacity;
10       
11     }
12   
13     // 绘制水印
14     draw() {
15       if (document.getElementById(this.id) !== null) {
16         document.body.removeChild(document.getElementById(this.id));
17       }
18   
19       const canvas = document.createElement("canvas");
20       // 设置canvas画布大小
21       canvas.width = this.width;
22       canvas.height = this.height;
23   
24       const ctx = canvas.getContext("2d");
25       ctx.rotate(-(15 * Math.PI) / 180); // 水印旋转角度
26       ctx.font = `${this.fontSize}px Vedana`;
27       ctx.fillStyle = this.fillStyle;
28       ctx.textAlign = "center";
29       ctx.textBaseline = "middle";
30       this.str.split(",").forEach((item, index) => {
31         ctx.fillText(item, canvas.width / 2, canvas.height / 2 + (index * this.fontSize + 10)); // 水印在画布的位置x，y轴
32       });
33   
34       const div = document.createElement("div");
35       div.id = this.id;
36       div.style.pointerEvents = "none";
37       div.style.top = "30px";
38       div.style.left = "10px";
39       div.style.opacity = this.opacity;
40       div.style.position = "fixed";
41       div.style.zIndex = "999999";
42       div.style.width = `${document.documentElement.clientWidth}px`;
43       div.style.height = `${document.documentElement.clientHeight}px`;
44       div.style.background = `url(${canvas.toDataURL("image/png")}) left top repeat`;
45       document.body.appendChild(div);
46     }
47   
48     setOptions({fontSize = 18, width = 300, height = 300, opacity = 1, str = ""}) {
49       this.fontSize = fontSize;
50       this.width = width;
51       this.height = height;
52       this.fillStyle = fillStyle
53       this.opacity = opacity;
54       this.str = str;
55       this.draw();
56     }
57   
58     // 绘制
59     render() {
60       this.draw();
61       window.onresize = () => {
62         this.draw();
63       };
64     }
65   
66     // 移除水印
67     removeWatermark() {
68       if (document.getElementById(this.id) !== null) {
69         document.body.removeChild(document.getElementById(this.id));
70       }
71     }
72   }
73

2、在页面种引入使用：

 1 import watermarkClass from "@/libs/watermarkClass";
 2 export default {
 3   name: "App",
 4   mounted: function () {
 5     this.initWatermark()
 6   },
 7   methods: {
 8     initWatermark() {
 9       // 方法一
10       let watermark = new watermarkClass({
11         id: "watermarkID",
12         str: "紫藤萝-watermarkClass",
13         fontSize: 20,
14          300,
15         height: 200,
16         fillStyle: "#dddddd",
17         opacity: 0.4,
18       });
19       watermark.render();
20       // 5秒后，清除水印
21       setTimeout(() => {
22         watermark.removeWatermark();
23       }, 5000);
24     }
25   },
26 };