創(chuàng)建watermark.js文件
let watermark = {}
const idd = '1.234523841642.1234124163'
let _interval = null
let setWatermark = (str) => {
let id = idd
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
// 創(chuàng)建一個(gè)畫布
let can = document.createElement('canvas')
// 設(shè)置畫布的長(zhǎng)寬
can.width = 220
can.height = 120
let cans = can.getContext('2d')
// 旋轉(zhuǎn)角度
cans.rotate(-15 * Math.PI / 180)
cans.font = '14px Vedana'
// 設(shè)置填充繪畫的顏色弯蚜、漸變或者模式
cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
// 設(shè)置文本內(nèi)容的當(dāng)前對(duì)齊方式
cans.textAlign = 'left'
// 設(shè)置在繪制文本時(shí)使用的當(dāng)前文本基線
cans.textBaseline = 'Middle'
// 在畫布上繪制填色的文本（輸出的文本曙旭，開始繪制文本的X坐標(biāo)位置，開始繪制文本的Y坐標(biāo)位置）
cans.fillText(str, can.width / 8, can.height / 2)
let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '60px'
div.style.left = '0px'
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = document.documentElement.clientWidth + 'px'
div.style.height = document.documentElement.clientHeight + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
}
// 該方法只允許調(diào)用一次
watermark.set = (str) => {
let id = setWatermark(str)
_interval = setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str)
}
}, 500)
// 監(jiān)聽頁(yè)面雏搂，例如窗口大小改變掉方法更新椒袍，如果不需要也可以去掉
`有可能出現(xiàn)不需要水印的頁(yè)面按F12（或者頁(yè)面改變）顯示水印的問題`
window.onresize = () => {
setWatermark(str)
}
}
// 移除
watermark.remove = () => {
let box = document.getElementById(idd)
box.parentNode.removeChild(box)
_interval ? clearInterval(_interval) : ''
}
export default watermark
1.在需要添加水印的頁(yè)面引入watermark.js（如果是全項(xiàng)目都需要就把他放在App.vue）
import Watermark from '@/utils/watermark'
2.在created函數(shù)中調(diào)用
created() {
Watermark.set('水印內(nèi)容')
}
3.在destroyed函數(shù)中銷毀驼唱，這樣別的頁(yè)面就不會(huì)也有水印了
destroyed() {
Watermark.remove()
}
版權(quán)聲明：本文來(lái)自 Mazhitaoooo 的CSDN 博客 ，全文地址請(qǐng)點(diǎn)擊：
本文鏈接：https://blog.csdn.net/qq_38158631/article/details/88058535
