前端页面加水印

效果如图:
在这里插入图片描述
这要怎么实现呢?
前端方案
通过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```




Logo

前往低代码交流专区

更多推荐