vue项目中添加水印效果

Posted 2020-12-17 lgjava

基于vue的架构中，在网页中添加水印效果，具体实现 代码如下：

新建js文件：例如warterMark.js

 1 ‘use strict‘
 2  
 3 let watermark = {}
 4  
 5 let setWatermark = (str) => {
 6   let id = ‘1.23452384164.123412415‘
 7  
 8   if (document.getElementById(id) !== null) {
 9     document.body.removeChild(document.getElementById(id))
10   }
11  
12   let can = document.createElement(‘canvas‘)
13   can.width = 150
14   can.height = 120
15  
16   let cans = can.getContext(‘2d‘)
17   cans.rotate(-20 * Math.PI / 180)
18   cans.font = ‘20px Vedana‘
19   cans.fillStyle = ‘rgba(200, 200, 200, 0.20)‘
20   cans.textAlign = ‘left‘
21   cans.textBaseline = ‘Middle‘
22   cans.fillText(str, can.width / 3, can.height / 2)
23  
24   let div = document.createElement(‘div‘)
25   div.id = id
26   div.style.pointerEvents = ‘none‘
27   div.style.top = ‘70px‘
28   div.style.left = ‘0px‘
29   div.style.position = ‘fixed‘
30   div.style.zIndex = ‘100000‘
31   div.style.width = document.documentElement.clientWidth - 100 + ‘px‘
32   div.style.height = document.documentElement.clientHeight - 100 + ‘px‘
33   div.style.background = ‘url(‘ + can.toDataURL(‘image/png‘) + ‘) left top repeat‘
34   document.body.appendChild(div)
35   return id
36 }
37  
38 // 该方法只允许调用一次
39 watermark.set = (str) => {
40   let id = setWatermark(str)
41   setInterval(() => {
42     if (document.getElementById(id) === null) {
43       id = setWatermark(str)
44     }
45   }, 500)
46   window.onresize = () => {
47     setWatermark(str)
48   }
49 }
50  
51 export default watermark

使用方式：

在App.vue文件中 引入该js文件：

import warterMark from ‘./warterMark‘

接下来再App.vue中的mounted方法中调用，代码如下所示：

<script>
import Watermark from ‘../static/js/watermark‘
export default {
  name: ‘App‘,
  mounted: function () {
    Watermark.set(‘要添加的水印内容‘)
  }
}
</script>

转至:https://blog.csdn.net/qq_32917123/article/details/87253716