前端页面加水印
效果如图：
这要怎么实现呢？
前端方案
通过canvas创建一张含有水印信息的背景图片，通过vue指令插入到页面中。
优点：方便快捷，易实现。
缺点： 容易被页面上的背景色以及背景图片遮挡
DOM元素直接遮盖、展示水印信息，覆盖在页面的最上层。
优点：对业务影响最小、不会被遮挡、配置更多、更灵活
缺点： 开发难度大、周期长
最终我们决定采用的是第二种方案
配置流程
项目中引入waterMark.js
import WaterMark from ‘./waterMark.js’
new WaterMark(type: object config)
config配置说明
watermark_rows 水印行数
watermark_cols 水印列数
watermark_x_space X轴间隔
watermark_y_space Y轴间隔
watermark_font 字体
watermark_txt 水印内容
watermark_width 水印宽度
watermark_color 字体颜色
watermark_fontsize 字体大小
watermark_angle 字体倾斜角度
watermark_alpha 水印透明度
配置示例
new WaterMark({
watermark_rows: 10, // 水印行数
watermark_txt: ${name}${jobNo}, // 水印内容
watermark_width: 200, // 水印宽度
watermark_color: ‘’, // 字体颜色
watermark_fontsize: ‘14px’, // 字体大小
watermark_angle: 30, // 字体倾斜角度
watermark_height: 140, // 水印长度
watermark_y_space: 10, // Y轴间隔
watermark_alpha: ‘’ // 水印字体透明度
})
waterMark.js
var defaultSettings = {
watermark_id: 'wm_div_id', // 水印总体的id
watermark_prefix: 'mask_div_id', // 小水印的id前缀
watermark_txt: '测试水印', // 水印的内容
watermark_x: 20, // 水印起始位置x轴坐标
watermark_y: 20, // 水印起始位置Y轴坐标
watermark_rows: 0, // 水印行数
watermark_cols: 0, // 水印列数
watermark_x_space: 50, // 水印x轴间隔
watermark_y_space: 50, // 水印y轴间隔
watermark_font: '微软雅黑', // 水印字体
watermark_color: 'black', // 水印字体颜色
watermark_fontsize: '18px', // 水印字体大小
watermark_alpha: 0.15, // 水印透明度，要求设置在大于等于0.005
watermark_width: 100, // 水印宽度
watermark_height: 100, // 水印长度
watermark_angle: 15, // 水印倾斜度数
watermark_parent_width: 0, // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
watermark_parent_height: 0, // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
watermark_parent_node: null, // 水印插件挂载的父元素element,不输入则默认挂在body上
monitor: true // monitor 是否监控， true: 不可删除水印; false: 可删水印。
}
class WaterMark {
constructor(options) {
this.globalSetting = null
this.init(options)
}
settingsToDefaultSetting(settings) {
defaultSettings.watermark_id = settings.watermark_id || defaultSettings.watermark_id
defaultSettings.watermark_prefix = settings.watermark_prefix || defaultSettings.watermark_prefix
defaultSettings.watermark_txt = settings.watermark_txt || defaultSettings.watermark_txt
defaultSettings.watermark_x = settings.watermark_x || defaultSettings.watermark_x
defaultSettings.watermark_y = settings.watermark_y || defaultSettings.watermark_y
defaultSettings.watermark_rows = settings.watermark_rows || defaultSettings.watermark_rows
defaultSettings.watermark_cols = settings.watermark_cols || defaultSettings.watermark_cols
defaultSettings.watermark_x_space = settings.watermark_x_space || defaultSettings.watermark_x_space
defaultSettings.watermark_y_space = settings.watermark_y_space || defaultSettings.watermark_y_space
defaultSettings.watermark_font = settings.watermark_font || defaultSettings.watermark_font
defaultSettings.watermark_color = settings.watermark_color || defaultSettings.watermark_color
defaultSettings.watermark_fontsize = settings.watermark_fontsize || defaultSettings.watermark_fontsize
defaultSettings.watermark_alpha = settings.watermark_alpha || defaultSettings.watermark_alpha
defaultSettings.watermark_width = settings.watermark_width || defaultSettings.watermark_width
defaultSettings.watermark_height = settings.watermark_height || defaultSettings.watermark_height
defaultSettings.watermark_angle = settings.watermark_angle || defaultSettings.watermark_angle
defaultSettings.watermark_parent_width = settings.watermark_parent_width || defaultSettings.watermark_parent_width
defaultSettings.watermark_parent_height = settings.watermark_parent_height || defaultSettings.watermark_parent_height
defaultSettings.watermark_parent_node = settings.watermark_parent_node || defaultSettings.watermark_parent_node
defaultSettings.monitor = settings.monitor || defaultSettings.monitor
}
loadMark(settings) {
/* 采用配置项替换默认值，作用类似jquery.extend*/
if (arguments.length === 1 && typeof arguments[0] === 'object') {
var src = arguments[0] || {}
for (const key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue
/* veronic: resolution of watermark_angle=0 not in force*/
else if (src[key] || src[key] === 0) defaultSettings[key] = src[key]
}
}
this.settingsToDefaultSetting(settings)
/* 如果元素存在则移除*/
var watermark_element = document.getElementById(defaultSettings.watermark_id)
watermark_element && watermark_element.parentNode && watermark_element.parentNode.removeChild(watermark_element)
/* 如果设置水印挂载的父元素的id*/
var watermark_parent_element = document.getElementById(defaultSettings.watermark_parent_node)
var watermark_hook_element = watermark_parent_element || document.body
/* 获取页面宽度*/
var page_width = Math.max(watermark_hook_element.scrollWidth, watermark_hook_element.clientWidth)
/* 获取页面最大长度*/
var page_height = Math.max(watermark_hook_element.scrollHeight, watermark_hook_element.clientHeight)
var setting = arguments[0] || {}
var parentEle = watermark_hook_element
var page_offsetTop = 0
var page_offsetLeft = 0
if (setting.watermark_parent_width || setting.watermark_parent_height) {
/* 指定父元素同时指定了宽或高*/
if (parentEle) {
page_offsetTop = parentEle.offsetTop || 0
page_offsetLeft = parentEle.offsetLeft || 0
defaultSettings.watermark_x = defaultSettings.watermark_x + page_offsetLeft
defaultSettings.watermark_y = defaultSettings.watermark_y + page_offsetTop
}
} else {
if (parentEle) {
page_offsetTop = parentEle.offsetTop || 0
page_offsetLeft = parentEle.offsetLeft || 0
}
}
/* 创建水印外壳div*/
var otdiv = document.getElementById(defaultSettings.watermark_id)
var shadowRoot = null
if (!otdiv) {
otdiv = document.createElement('div')
/* 创建shadow dom*/
otdiv.id = defaultSettings.watermark_id
// pointer-events: none !important 不会影响原有的DOM操作
otdiv.setAttribute('style', 'pointer-events: none !important; display: block !important')
/* 判断浏览器是否支持attachShadow方法*/
if (typeof otdiv.attachShadow === 'function') {
/* createShadowRoot Deprecated. Not for use in new websites. Use attachShadow*/
shadowRoot = otdiv.attachShadow({ mode: 'open' })
} else {
shadowRoot = otdiv
}
/* 将shadow dom随机插入body内的任意位置*/
var nodeList = watermark_hook_element.children
var index = Math.floor(Math.random() * (nodeList.length - 1))
if (nodeList[index]) {
watermark_hook_element.insertBefore(otdiv, nodeList[index])
} else {
watermark_hook_element.appendChild(otdiv)
}
} else if (otdiv.shadowRoot) {
shadowRoot = otdiv.shadowRoot
}
/* 三种情况下会重新计算水印列数和x方向水印间隔：1、水印列数设置为0，2、水印宽度大于页面宽度，3、水印宽度小于于页面宽度*/
defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space) || 0)
var temp_watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols))
defaultSettings.watermark_x_space = temp_watermark_x_space ? defaultSettings.watermark_x_space : temp_watermark_x_space
var allWatermarkWidth
/* 三种情况下会重新计算水印行数和y方向水印间隔：1、水印行数设置为0，2、水印长度大于页面长度，3、水印长度小于于页面长度*/
defaultSettings.watermark_rows = parseInt((page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space) || 0)
var temp_watermark_y_space = parseInt((page_height - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows))
defaultSettings.watermark_y_space = temp_watermark_y_space ? defaultSettings.watermark_y_space : temp_watermark_y_space
var allWatermarkHeight
if (watermark_parent_element) {
allWatermarkWidth = defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)
allWatermarkHeight = defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)
} else {
allWatermarkWidth = page_offsetLeft + defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)
allWatermarkHeight = page_offsetTop + defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)
}
var x
var y
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
if (watermark_parent_element) {
y = page_offsetTop + defaultSettings.watermark_y + (page_height - allWatermarkHeight) / 2 + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
} else {
y = defaultSettings.watermark_y + (page_height - allWatermarkHeight) / 2 + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
}
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
if (watermark_parent_element) {
x = page_offsetLeft + defaultSettings.watermark_x + (page_width - allWatermarkWidth) / 2 + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
} else {
x = defaultSettings.watermark_x + (page_width - allWatermarkWidth) / 2 + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
}
var mask_div = document.createElement('div')
var oText = document.createTextNode(defaultSettings.watermark_txt)
mask_div.appendChild(oText)
/* 设置水印相关属性start*/
mask_div.id = defaultSettings.watermark_prefix + i + j
/* 设置水印div倾斜显示*/
mask_div.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'
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 = '9999999'
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'
mask_div.style['-ms-user-select'] = 'none'
/* 设置水印相关属性end*/
shadowRoot.appendChild(mask_div)
}
}
this.observerFunc(settings, watermark_hook_element)
}
observerFunc(settings, watermark_hook_element) {
// monitor 是否监控， true: 不可删除水印; false: 可删水印。
// 监听dom是否被移除或者改变属性的回调函数
var callback = (records) =>{
if ((this.globalSetting && records.length === 1) || records.length === 1 && records[0].removedNodes.length >= 1) {
this.loadMark(this.globalSetting)
}
}
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
var watermarkDom = new MutationObserver(callback)
var option = {
'childList': true,
'attributes': true,
'subtree': true
}
const minotor = settings.monitor === undefined ? defaultSettings.monitor : settings.monitor
if (minotor) {
watermarkDom.observe(watermark_hook_element, option)
watermarkDom.observe(document.getElementById('wm_div_id').shadowRoot, option)
}
}
removeMark() {
/* 移除水印*/
/* 采用配置项替换默认值，作用类似jquery.extend*/
if (arguments.length === 1 && typeof arguments[0] === 'object') {
var src = arguments[0] || {}
for (const key in src) {
if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue
/* veronic: resolution of watermark_angle=0 not in force*/
else if (src[key] || src[key] === 0) defaultSettings[key] = src[key]
}
}
/* 移除水印*/
var watermark_element = document.getElementById(defaultSettings.watermark_id)
var _parentElement = watermark_element.parentNode
_parentElement.removeChild(watermark_element)
}
init(settings) {
this.globalSetting = settings
this.loadMark(settings)
window.addEventListener('onload', () => {
this.loadMark(settings)
})
window.addEventListener('resize', () => {
this.loadMark(settings)
})
}
load(settings) { /* 手动加载水印*/
this.globalSetting = settings
this.loadMark(settings)
}
remove() { /* 手动移除水印*/
this.removeMark()
}
}
export default WaterMark```
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
