zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue页面加水印

Vue 页面 加水
2023-09-11 14:17:22 时间
 addWaterMark() {
      let id = "1.23452384164.123412416";

      if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
      }
      const employeeId = getEmployeeId();
      const strArr = `${employeeId.nickName}-${sys_endDate()}`;
      console.log(strArr);
      let ctx = document.createElement("canvas");
      ctx.width = 300;
      ctx.height = 200;
      ctx.style.display = "none";
      let cans = ctx.getContext("2d");
      cans.rotate((-20 * Math.PI) / 180);
      cans.font = "16px Microsoft YaHei";
      cans.fillStyle = "rgba(17, 17, 17, 0.15)";
      cans.textAlign = "left";
      cans.textBaseline = "Middle";
      cans.fillText(strArr, 0, 100);
      cans.save();
      let div = document.createElement("div");
      div.id = id;
      div.style.pointerEvents = "none";
      div.style.top = "30px";
      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(" + ctx.toDataURL("image/png") + ") left top repeat";
      document.body.appendChild(div);
      // return ctx.toDataURL();
    },