watermark.js
5.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
var watermark = {
watermark(settings, el) {
//默认设置
let defaultSettings = {
watermark_txt: 'text',
watermark_x: 20, //水印起始位置x轴坐标
watermark_y: 20, //水印起始位置Y轴坐标
watermark_rows: 7, //水印行数
watermark_cols: 20, //水印列数
watermark_x_space: 100, //水印x轴间隔
watermark_y_space: 50, //水印y轴间隔
watermark_color: '#aaa', //水印字体颜色
watermark_alpha: 0.4, //水印透明度
watermark_fontsize: '15px', //水印字体大小
watermark_font: '微软雅黑', //水印字体
watermark_width: 210, //水印宽度
watermark_height: 80, //水印长度
watermark_angle: 20, //水印倾斜度数
watermark_type: 1,
}
if (arguments.length > 1 && typeof arguments[0] === 'object') {
let src = arguments[0] || {}
for (let key in src) {
if (
src[key] &&
defaultSettings[key] &&
src[key] === defaultSettings[key]
)
continue
else if (src[key]) defaultSettings[key] = src[key]
}
}
let oTemp = document.createDocumentFragment()
//获取页面最大宽度
let page_width = Math.max(
document.body.scrollWidth,
document.body.clientWidth
)
let cutWidth = page_width * 0.015
page_width = page_width - cutWidth
//获取页面最大高度
let page_height =
Math.max(document.body.scrollHeight, document.body.clientHeight) + 450
page_height = Math.max(page_height, window.innerHeight - 30)
const dialogHeight = document.querySelector(
'.form-print-dialog .el-dialog__body'
).scrollHeight
const currentHeight =
dialogHeight && dialogHeight > page_height ? dialogHeight : page_height
//如果将水印列数设置为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
) {
defaultSettings.watermark_cols = parseInt(
(page_width -
defaultSettings.watermark_x +
defaultSettings.watermark_x_space) /
(defaultSettings.watermark_width + defaultSettings.watermark_x_space)
)
defaultSettings.watermark_x_space = parseInt(
(page_width -
defaultSettings.watermark_x -
defaultSettings.watermark_width * defaultSettings.watermark_cols) /
(defaultSettings.watermark_cols - 1)
)
}
//如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔
defaultSettings.watermark_rows = parseInt(
(currentHeight - defaultSettings.watermark_y - 50) /
(defaultSettings.watermark_height + defaultSettings.watermark_y_space)
)
// defaultSettings.watermark_y_space = parseInt(
// (currentHeight -
// defaultSettings.watermark_y -
// defaultSettings.watermark_height * defaultSettings.watermark_rows) /
// (defaultSettings.watermark_rows - 1)
// )
let x
let y
for (let i = 0; i < defaultSettings.watermark_rows; i++) {
y =
defaultSettings.watermark_y +
(defaultSettings.watermark_y_space + defaultSettings.watermark_height) *
i
for (let j = 0; j < defaultSettings.watermark_cols; j++) {
x =
defaultSettings.watermark_x +
(defaultSettings.watermark_width +
defaultSettings.watermark_x_space) *
j
let mask_div = document.createElement('div')
mask_div.id = 'mask_div' + i + j
mask_div.className = 'mask_div'
if (defaultSettings.watermark_type === 1) {
mask_div.appendChild(
document.createTextNode(defaultSettings.watermark_txt)
)
} else {
mask_div.style.backgroundImage =
'url(' + defaultSettings.watermark_txt + ')'
mask_div.style.backgroundRepeat = 'no-repeat'
mask_div.style.backgroundSize = '100% 100%'
}
//设置水印div倾斜显示
mask_div.style.MozTransform =
'rotate(-' + defaultSettings.watermark_angle + 'deg)'
mask_div.style.msTransform =
'rotate(-' + defaultSettings.watermark_angle + 'deg)'
mask_div.style.OTransform =
'rotate(-' + defaultSettings.watermark_angle + 'deg)'
mask_div.style.transform =
'rotate(-' + defaultSettings.watermark_angle + 'deg)'
mask_div.style.visibility = ''
mask_div.style.position = 'absolute'
mask_div.style.left = x + 'px'
mask_div.style.top = y + 'px'
mask_div.style.overflow = 'hidden'
mask_div.style.zIndex = '9999'
//让水印不遮挡页面的点击事件
mask_div.style.pointerEvents = 'none'
mask_div.style.opacity = defaultSettings.watermark_alpha
mask_div.style.fontSize = defaultSettings.watermark_fontsize
mask_div.style.fontFamily = defaultSettings.watermark_font
mask_div.style.color = defaultSettings.watermark_color
mask_div.style.textAlign = 'center'
mask_div.style.width = defaultSettings.watermark_width + 'px'
mask_div.style.height = defaultSettings.watermark_height + 'px'
mask_div.style.display = 'block'
oTemp.appendChild(mask_div)
}
}
;(el || document.body).appendChild(oTemp)
},
}
export default watermark