前言專案生成公司水印是很普遍的需求，下面是vue專案生產水印的方法。話不多說，複製貼上就可以馬上解決你的需求
/** 水印新增方法 */
letsetwatermark
=(str1, str2)
=>
let can = document.
createelement
('canvas'
)// 設定canvas畫布大小
can.width =
150 can.height =
80let cans = can.
getcontext
('2d'
) cans.
rotate(-
20* math.pi/
180)
// 水印旋轉角度
cans.font =
'15px vedana'
cans.fillstyle =
'#666666'
cans.textalign =
'center'
cans.textbaseline =
'middle'
cans.
filltext
(str1, can.width /
2, can.height)
// 水印在畫布的位置x，y軸
cans.
filltext
(str2, can.width /
2, can.height +22)
let div = document.
createelement
('div'
) div.id = id
div.style.pointerevents =
'none'
div.style.top =
'40px'
div.style.left =
'0px'
div.style.opacity =
'0.15'
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.
(div)
return id
}// 新增水印方法
export
const
setwatermark
=(str1, str2)
=>
}// 移除水印方法
export
const
removewatermark=(
)=>
}
import
from '@/common/watermark'
mounted()
,destroyed()
,
前言這種方式是自己在專案中用到的,在destroy方法中將列印在頁面上的div移除掉
//列印水印
watermark
(settings)
; var otemp = document.
createdocumentfragment()
;//獲取頁面最大寬度
var page_width = math.
max(document.body.scrollwidth, document.body.clientwidth)
;//獲取頁面最大長度
var page_height = math.
max(document.body.scrollheight, document.body.clientheight)
;//如果將水印列數設定為0，或水印列數設定過大，超過頁面最大寬度，則重新計算水印列數和水印x軸間隔
if(defaultsettings.watermark_cols ==0||
(parseint
(defaultsettings.watermark_x
+ defaultsettings.watermark_width * defaultsettings.watermark_cols
+ defaultsettings.watermark_x_space *
(defaultsettings.watermark_cols -1)
)> page_width)
)//如果將水印行數設定為0，或水印行數設定過大，超過頁面最大長度，則重新計算水印行數和水印y軸間隔
if(defaultsettings.watermark_rows ==0||
(parseint
(defaultsettings.watermark_y
+ defaultsettings.watermark_height * defaultsettings.watermark_rows
+ defaultsettings.watermark_y_space *
(defaultsettings.watermark_rows -1)
)> page_height)
) var x;
var y;
for(var i =
0; i < defaultsettings.watermark_rows; i++);
};document.body.
(otemp)
;}
//這個方法用來在頁面進行跳轉的時候將水印的div消除
vue 頁面新增水印的方法
1 建立乙個watermark.js檔案 let watermark let setwatermark str 建立乙個畫布 let can document.createelement canvas 設定畫布的長寬 can.width 220 can.height 220 let cans can...
vue中使用 canvas給頁面新增水印
vue中使用canvas 給頁面新增水印 1.寫乙個公共的方法，放在專案utils資料夾中 watermark.js str傳入水印需要展示的文字，renderdom水印要加的盒子，預設body var watermark var setwatermark function str,renderdo...
vue自定義指令實現頁面新增水印
最近遇到個給頁面新增水印的需求 之前沒弄過也沒見過這種效果 然後組長還要求我使用指令的方式實現，做到水印內容 樣式基本可配置，說是以後再有這種需求的話就不用再開發了 嗯，道理我都懂，就是有點兒迷茫 先去vue官網看看自定義指令 有了鉤子和鉤子引數，具體的就是怎麼實現水印效果了。這裡採用的是 canv...