后台管理系统加水印

首先创建一个waterMark.js文件

let watermark = {};

let setWatermark = (line1, line2, line3) => {

  let id = "1.23452384164.123412416";

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

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

  }

  //创建一个画布

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

  //设置画布的长宽

  can.width = 400;

  can.height = 280;

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

  //旋转角度

  cans.rotate((-15 * Math.PI) / 150);

  cans.font = "18px Vedana";

  //设置填充绘画的颜色、渐变或者模式

  cans.fillStyle = "rgba(200, 200, 200, 0.50)";

  //设置文本内容的当前对齐方式

  cans.textAlign = "left";

  //设置在绘制文本时使用的当前文本基线

  cans.textBaseline = "middle";

  const textWidth1 = cans.measureText(line1).width;

  const textWidth2 = cans.measureText(line2).width;

  const textWidth3 = cans.measureText(line3).width;

  const maxWidth = Math.max(textWidth1, textWidth2, textWidth3);

  if (maxWidth <= can.width) {

    cans.fillText(line1, (can.width - textWidth1) / 2, can.height / 2 - 20);

    cans.fillText(line2, (can.width - textWidth2) / 2, can.height / 2);

    cans.fillText(line3, (can.width - textWidth3) / 2, can.height / 2 + 20);

  } else {

    const scale = can.width / maxWidth;

    cans.scale(scale, scale);

    cans.fillText(

      line1,

      (can.width / scale - textWidth1) / 2,

      can.height / 2 / scale - 20 / scale

    );

    cans.fillText(

      line2,

      (can.width / scale - textWidth2) / 2,

      can.height / 2 / scale

    );

    cans.fillText(

      line3,

      (can.width / scale - textWidth3) / 2,

      can.height / 2 / scale + 20 / scale

    );

  }

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

  div.id = id;

  div.style.pointerEvents = "none";

  div.style.top = "120px";

  div.style.left = "0px";

  div.style.position = "fixed";

  div.style.zIndex = "100000";

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

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

  div.style.background =

    "url(" + can.toDataURL("image/png") + ") left top repeat";

  document.body.appendChild(div);

  return id;

};

// 该方法只允许调用一次

watermark.set = (line1, line2, line3) => {

  let id = setWatermark(line1, line2, line3);

  setInterval(() => {

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

      id = setWatermark(line1, line2, line3);

    }

  }, 500);

  window.onresize = () => {

    setWatermark(line1, line2, line3);

  };

};

const outWatermark = (id) => {

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

    const div = document.getElementById(id);

    div.style.display = "none";

  }

};

watermark.out = () => {

  const str = "1.23452384164.123412416";

  outWatermark(str);

};

export default watermark;

 这段代码是添加三行水印，可以根据自己的需求来改写

在main.js中引入

// //水印

import warterMark from "@/utils/waterMark";

router.afterEach((item) => {

  //warterMark.set("水印")

  if (item.name !== "login") {

    //判断是否为登录页面

    //warterMark.set('我是水印-张三')

  } else {

    warterMark.out(); // 清除水印

  }

});

 然后在需要的地方通过

  warterMark.set(

                "xxxxx",

                `用户名：${this.$store.state.user.name}`,

                this.gettiem()

            );  调用

        warterMark.out(); // 清除水印