前端页面加水印

效果如图： 这要怎么实现呢？ 前端方案 通过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```

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。