水印添加方法

/** 水印添加方法 */

import logo from "../assets/logo.png";



let setWatermark = (str1, str2) => {

 let id = "1.23452384164.123412415";

 if (document.getElementById(id) !== null) {

   document.body.removeChild(document.getElementById(id));

 }

 let can = document.createElement("canvas");

 // 设置canvas画布大小

 can.width = 200;

 can.height = 100;

 let cans = can.getContext("2d");

 // 清空Canvas

 cans.clearRect(0, 0, can.width, can.height);

 // 将原点移到Canvas中心

 cans.translate(can.width / 3, can.height / 3);

 // 旋转90度（弧度制）

 cans.rotate(Math.PI / -3);

 // 绘制图像

 const image = new Image();

 image.src = logo; // 替换为你的图像路径

 image.onload = () => {

  // 绘制图片;

   cans.drawImage(image, -10, -40, 20, 20); // 在Canvas中心附近绘制图片 drawImage(图片路径，x,y，宽，高)

   cans.font = "16px Verdana";

   cans.fillStyle = "#666666";

   cans.textAlign = "center";

   cans.textBaseline = "middle";

   cans.fillText(str1, 0, 0); // 水印在画布的位置x，y轴

   cans.fillText(str2, 0, 22);

   // 生成数据 URL

   const dataURL = can.toDataURL("image/png");

   console.log(dataURL);

   let div = document.createElement("div");

   div.id = id;

   div.style.pointerEvents = "none";

   div.style.top = "40px";

   div.style.left = "0px";

   div.style.opacity = "0.15";

   div.style.position = "fixed";

   div.style.zIndex = "100000";

   div.style.width = document.documentElement.clientWidth + "px";

   div.style.height = document.documentElement.clientHeight + "px";

   // 将canvas作为背景添加到div

   div.style.background = `url(${dataURL}) left top repeat`;

   div.style.background = "url(" + dataURL + ") left top repeat";

   document.body.appendChild(div);

 };



 return id;

};



// 添加水印方法

export const setWaterMark = (str1, str2) => {

 let id = setWatermark(str1, str2);

 if (document.getElementById(id) === null) {

   id = setWatermark(str1, str2);

 }

};



// 移除水印方法

export const removeWatermark = () => {

 let id = "1.23452384164.123412415";

 if (document.getElementById(id) !== null) {

   document.body.removeChild(document.getElementById(id));

 }

};

使用方法

import { removeWatermark, setWaterMark } from "@/utils/waterMark";
export default {
  created() {
    setTimeout(() => {
      setWaterMark(this.$store.state.fullname, this.$store.state.date);
    }, 1000);
  },
  destroyed() {
    removeWatermark();
  },
}

效果图