前端Vue页面加水印方法(带源码)

方案一

可能会报错,解决办法,下面网址

地址

tool.js

创建utils => tool.js

export default {
    
    
    //tool.js
    addWaterMark() {
    
    
        const strArr = `${
      
      localStorage.getItem(
                "loginUserName"
            )}${
      
      localStorage
                .getItem("logunUserPhone")
                .slice(7, 11)}[${
      
      new Date()}]`;
        let ctx = document.createElement("canvas");
        ctx.width = 250;
        ctx.height = 100;
        ctx.style.display = "none";
        let cans = ctx.getContext("2d");
        cans.rotate((-20 * Math.PI) / 180);
        cans.font = "12px Microsoft YaHei";
        cans.fillStyle = "rgba(17, 17, 17, 0.20)";
        cans.textAlign = "left";
        cans.textBaseline = "Middle";
        cans.fillText(strArr, 0, 100);
        cans.save();
        return ctx.toDataURL();
    }
}

index.vue

可能会报错,解决办法,下面网址
https://blog.csdn.net/weixin_38711005/article/details/117069530

<template>
    <div class="content" :style="{backgroundImage:`url(${orgBackground})`}">aaa</div>
</template>

<script>
import tool from "@/utils/tool";
export default {
      
      
    data () {
      
      
        return {
      
      
            orgBackground: "",
        };
    },
    name: "test",
    mounted () {
      
      
        localStorage.setItem("loginUserName", "ruan");
        localStorage.setItem("logunUserPhone", "123456");
        //实际只需要一行代码
        this.orgBackground = tool.addWaterMark();
        //监听dom属性改变重新生成水印(如果页面有变化需要去监听dom)
        // const org = document.querySelector(".content");
        // const options = {
      
      
        //     attributes: true,
        //     childList: true,
        //     subtree: true,
        // };
        // const observer = new MutationObserver((mutationList) => {
      
      
        // this.orgBackground = tool.addWaterMark();
        // });
        // observer.observe(org, options);
    },
    // methods: {
      
      
    //     // 点击去除水印加这个去除方法
    //     remove () {
      
      
    //         this.orgBackground = null 
    //     }
    // }
};
</script>


<style scoped>
.content {
      
      
    position: relative;
    width: 100%;
    height: 100vh;
}
</style>

效果

方案二

watermark.js

创建utils => watermark.js

let watermark = {
    
    }

let setWatermark = (str) => {
    
    
  let id = '1.23452384164.123412416';

  if (document.getElementById(id) !== null) {
    
    
    document.body.removeChild(document.getElementById(id));
  }

  //创建一个画布
  let can = document.createElement('canvas');
  //设置画布的长宽
  can.width = 120;
  can.height = 120;

  let cans = can.getContext('2d');
  //旋转角度
  cans.rotate(-15 * Math.PI / 180);
  cans.font = '18px Vedana';
  //设置填充绘画的颜色、渐变或者模式
  cans.fillStyle = 'rgba(200, 200, 200, 0.40)';
  //设置文本内容的当前对齐方式
  cans.textAlign = 'left';
  //设置在绘制文本时使用的当前文本基线
  cans.textBaseline = 'Middle';
  //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
  cans.fillText(str, can.width / 8, can.height / 2);

  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(' + can.toDataURL('image/png') + ') left top repeat';
  document.body.appendChild(div);
  return id;
}

// 该方法只允许调用一次
watermark.set = (str) => {
    
    
  let id = setWatermark(str);
  setInterval(() => {
    
    
    if (document.getElementById(id) === null) {
    
    
      id = setWatermark(str);
    }
  }, 500);
  window.onresize = () => {
    
    
    setWatermark(str);
  };
}

export default watermark;

index.vue

<template>
    <div>
        aaa
    </div>
</template>
<script>
import Watermark from '@/utils/watermark';  //路径不要写错

export default {
      
      
    mounted: function () {
      
      
        Watermark.set("添加水印内容")
    }
}
</script>

效果

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！