Vue專案在頁面新增水印及在某乙個頁面去除水印功能

（1）系統內頁面出現水印；

（2）登入頁面沒有水印【備註：退出登入時，登入頁面不會顯示水印**】

# 建立水印功能網上一大把，隨便搜一下

'use strict'
const watermark =
const setwatermark =
(str)
=>
const can = document.createelement(
'canvas'
)  can.width = 150
can.height = 120
const cans = can.getcontext(
'2d'
)  cans.rotate(-20 * math.pi / 180)
cans.font =
'20px vedana'
cans.fillstyle =
'rgba(200, 200, 200, 0.20)'
cans.textalign =
'left'
cans.textbaseline =
'middle'
cans.filltext(str, can.width / 3, can.height / 2)
const div = document.createelement(
'div'
)  div.id =
id  div.style.pointerevents =
'none'
div.style.top =
'70px'
div.style.left =
'0px'
div.style.position =
'fixed'
div.style.zindex =
'100000'
div.style.width = document.documentelement.clientwidth - 100 + 'px'
div.style.height = document.documentelement.clientheight - 100 + 'px'
div.style.background =
'url(' + can.todataurl(
'image/png'
) + ') left top repeat'
returnid}
// 該方法只允許呼叫一次
watermark.set =
(str)
=>
}, 500)
window.onresize =()
=>
}export default watermark

; //路徑不要寫錯

2.在函式中呼叫，一種就可以

mounted： 寫法

mounted()

created： 寫法

created(

)第二種做法： 配置js檔案，在main.js檔案中引入

本人通過配置 permission.js檔案

import

'@/permission' //路徑不要寫錯喲

// permission主要**

router.beforeeach(async(to, from, next)
=>}}
)router.aftereach((to)
=>
else
})

// 在watermark.js檔案中

const outwatermark =
(id)
=>
}watermark.out =()
=>

當然這些可能不是最優的解決方案，但希望能給你帶來幫助。

最新vue專案新增水印

在utils資料夾中建立 wartermark.ts 檔案 位置看自己的元件放那，這都行 內容如下 1 use strict 23 const setwatermark str any 910 建立乙個畫布 11 const can document.createelement canvas 12 ...

vue 頁面新增水印的方法

1 建立乙個watermark.js檔案 let watermark let setwatermark str 建立乙個畫布 let can document.createelement canvas 設定畫布的長寬 can.width 220 can.height 220 let cans can...

vue 專案通過vue指令新增水印

在vue專案中通過自定義指令，使用canvas特性生成base64格式的檔案，並將其設定為背景，從而實現頁面或元件區域性水印效果 1 新建directives.js import vue from vue vue.directive watermark el,binding addwatermark...