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