h5添加水印

1.创建一个js文件

import dayjs from 'dayjs'
const ID = '1.23452384164.123412415'
const WIDTH = 300;
const HEIGHT = 150;

//获取像素比
const getPixelRatio = function (context) {

  var backingStore = context.backingStorePixelRatio ||

    context.webkitBackingStorePixelRatio ||

    context.mozBackingStorePixelRatio ||

    context.msBackingStorePixelRatio ||

    context.oBackingStorePixelRatio ||

    context.backingStorePixelRatio || 1;

  return (window.devicePixelRatio || 1) / backingStore;

};
let setWatermark = (str1, str2, str3) => {
  let id = ID
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  let canvas = document.createElement('canvas')
  // canvas.style.width = WIDTH 
  // canvas.style.height = HEIGHT

  let ctx = canvas.getContext('2d')
  const ratio = getPixelRatio(ctx);
  console.log('ration======',ratio);
  canvas.width = WIDTH * ratio;
  canvas.height = HEIGHT * ratio;
  // ctx.rotate(-30 * Math.PI / 180)
  ctx.font = 12 * ratio + 'px -apple-system, BlinkMacSystemFont,PingFang SC, Microsoft YaHei, Arial Regular'
  // ctx.fillStyle = '#666666'
  ctx.fillStyle = '#696969'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'Middle'
  str1 && ctx.fillText(str1, (WIDTH / 2) * ratio, HEIGHT * ratio/2)
  str2 && ctx.fillText(str2, (WIDTH / 2) * ratio, HEIGHT * ratio + 20)
  str3 && ctx.fillText(str3, (WIDTH / 2) * ratio, HEIGHT * ratio + 40)


  let div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  // div.style.top = '20px'
  // div.style.left = '0px'
  div.style.opacity = '0.2'
  div.style.position = 'fixed'
  div.style.width = document.documentElement.clientWidth * 2 + 'px'
  div.style.height = document.documentElement.clientHeight * 2 + 'px'
  div.style.top = '-200px';
  div.style.left = '-200px';
  div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
  div.style.backgroundSize = `${WIDTH}px ${HEIGHT}px`;
  div.style.transform = "rotate(-35deg)"
  document.body.appendChild(div)
  return id
}
let interval = null; //定时器
const changeText = (str1, str2, str3) => {
  const time = dayjs().format('YYYY/MM/DD HH:mm');
  if (document.getElementById(ID) !== null) {
    document.body.removeChild(document.getElementById(ID))
  }
  setWatermark(`${str1}-${time}`, str2, str3)
}
// 添加水印
export const setWaterMark = (str1, str2, str3) => {
  changeText(str1, str2, str3)
  interval = window.setInterval(()=>{changeText(str1, str2, str3)}, 60000)
}
// 移除水印
export const removeWatermark = () => {
  let id = ID
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  interval && window.clearInterval(interval)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

此的水印结构为工号-姓名-yyyy/mm-dd HH：MM

2.以Vue全局引入为例 在文件中引入

<template>
  <div id="app">
    <keep-alive>
    <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>

  </div>
</template>
<script>
import {setWaterMark, removeWatermark} from '@/utils/water-mark.js';
export default {
 name: 'WdclHrGalaxyFrontApp',
  computed: {
     //获取员工工号和姓名字符串
    text(){
      const {userName='', userNo=''} = JSON.parse(sessionStorage.getItem('aesInfo'))||{};
      return userNo?`${userNo}-${userName}`:'';
    }
  },
  mounted() {
    this.setGloblWaterMark();
  },
  watch: {
    text(n){
      n && this.setGloblWaterMark()
    }
  },
  methods: {
    //设置全局水印
    setGloblWaterMark(){
      const {text} = this;
      text && setWaterMark(text);
    }
  },
  beforeDestroy(){
    removeWatermark()
  }
};
</script>
<style lang="less" scoped>
#app {
  .wh(100%;100vh);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

ok～～～～