頁面新增水印的方法有很多，以下舉例使用class定義的方法進行水印內容渲染：

1、新建檔案：WatermarkClass.js

export default class WatermarkClass {
  constructor({id="watermarkID",str = "",fontSize = 18,width = 400,height = 400,fillStyle="#333333",opacity = 1 }) {
    this.id = id;
    this.str = str;
    this.fontSize = fontSize;
    this.width = width;
    this.height = height;
    this.fillStyle = fillStyle
    this.opacity = opacity;

  }

  // 繪製水印
  draw() {
   if (document.getElementById(this.id) !== null) {
    document.body.removeChild(document.getElementById(this.id));
   }

   const canvas = document.createElement("canvas");
   // 設定canvas畫布大小
   canvas.width = this.width;
   canvas.height = this.height;

   const ctx = canvas.getContext("2d");
   ctx.rotate(-(15 * Math.PI) / 180); // 水印旋轉角度
   ctx.font = `${this.fontSize}px Vedana`;
   ctx.fillStyle = this.fillStyle;
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   this.str.split(",").forEach((item,index) => {
    ctx.fillText(item,canvas.width / 2,canvas.height / 2 + (index * this.fontSize + 10)); // 水印在畫布的位置x，y軸
   });

   const div = document.createElement("div");
   div.id = this.id;
   div.style.pointerEvents = "none";
   div.style.top = "30px";
   div.style.left = "10px";
   div.style.opacity = this.opacity;
   div.style.position = "fixed";
   div.style.zIndex = "999999";
   div.style.width = `${document.documentElement.clientWidth}px`;
   div.style.height = `${document.documentElement.clientHeight}px`;
   div.style.background = `url(${canvas.toDataURL("image/png")}) left top repeat`;
   document.body.appendChild(div);
  }

  setOptions({fontSize = 18,width = 300,height = 300,opacity = 1,str = ""}) {
   this.fontSize = fontSize;
   this.width = width;
   this.height = height;
   this.fillStyle = fillStyle
   this.opacity = opacity;
   this.str = str;
   this.draw();
  }

  // 繪製
  render() {
   this.draw();
   window.onresize = () => {
    this.draw();
   };
  }

  // 移除水印
  removeWatermark() {
   if (document.getElementById(this.id) !== null) {
    document.body.removeChild(document.getElementById(this.id));
   }
  }
 }

2、在頁面種引入使用：

import watermarkClass from "@/libs/watermarkClass";
export default {
 name: "App",mounted: function () {
  this.initWatermark()
 },methods: {
  initWatermark() {
   // 方法一
   let watermark = new watermarkClass({
    id: "watermarkID",str: "紫藤蘿-watermarkClass",fontSize: 20,width: 300,height: 200,fillStyle: "#dddddd",opacity: 0.4,});
   watermark.render();
   // 5秒後，清除水印
   setTimeout(() => {
    watermark.removeWatermark();
   },5000);
  }
 },};

以上就是vue 使用class建立和清除水印的示例程式碼的詳細內容，更多關於vue 建立和清除水印的資料請關注我們其它相關文章！