soc_web/src/components/waterCom.vue

<template>
  <div id="water">
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
import Router from "vue-router";
import { mapGetters } from "vuex";

export default {
  name: "SocAppWaterCom",

  data() {
    return {
      // userName: this.$store.getters.name,
      // orgName: "",
      date: "",
    };
  },
  computed: {
    userName() {
      return this.$store.getters.name;
    },
  },
  watch: {
    userName(val) {
      if (val) {
        this.getWater();
      }
    },
  },
  created() {
    this.date = this.newDateDay();

    console.log(this.$store.getters.name);
    // this.name = JSON.parse(window.sessionStorage.getItem("SET_USER_ORGNAME"));
    // this.userName = JSON.parse(window.sessionStorage.getItem("SET_USER_NAME"));
  },
  mounted() {},

  methods: {
    getWater() {
      // console.log(this);
      let text = this.userName;
      let orgName = this.$store.getters.orgShortName;
      const canvas = document.getElementById("canvas"); //获取canvas
      canvas.width = 600; //设置画布宽度
      canvas.height = 600; //设置画布高度
      canvas.style.display = "none"; //隐藏画布本身
      //加层级权重

      const ctx = canvas.getContext("2d"); //获取画笔
      ctx.font = "30px -apple-system";
      //   设置文字大小
      ctx.fillStyle = "rgba(0,0,0,.1)"; //设置文字颜色及透明度
      ctx.rotate(-0.4); //设置文字旋转角度
      

      ctx.fillText(`${text}${orgName}`, -20,180,); //设置显示文字内容
      const img = canvas.toDataURL("image/png"); //参数默认为 image/png,可以是其他image/jpeg等，该方法返回值是一个url，是base64组成的图片的源数据、可以直接赋值给图片的src属性
      const style = `background-image:url(${img});z-index:100000;display:none;`; //定义样式
      water.setAttribute("style", style); //给要添加水印的元素设置样式
    },
    newDateDay(time) {
      var date = time ? new Date(time) : new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
  },
};
</script>
<style lang="scss" scoped>
#water {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  //   z-index: -1;
  pointer-events: none;
}
</style>