vue项目中添加水印效果

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

基于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

以上是 vue项目中添加水印效果 的全部内容， 来源链接： utcz.com/z/374592.html

回到顶部