JavaScript实践（一）页面添加水印

佚名 6年前 (2019-05-15) 随笔 710人围观抢沙发百度已收录

(function() {
  var name = 'zhoulixue'
  var opacity = '0.05'
  var genWater = function(name) {
    var waterCanvas = document.createElement('canvas')
    waterCanvas.id = 'water-canvas'
    waterCanvas.setAttribute('width', name.length * 12)
    waterCanvas.setAttribute('height', 80)
    var ctx = waterCanvas.getContext('2d')
    ctx.rotate(Math.PI / 180 * 30)
    ctx.font = '15px serif'
    ctx.fillText(name, 10, 10)
    var base64Url = waterCanvas.toDataURL()

    var waterMarkDiv = document.createElement('div')
    var styleStr = 'position:absolute;top:0;left:0;width:100%;height:100%;z-index:99999;pointer-events:none;background-image:url(' + base64Url + ');opacity: ' + opacity + ';'
    waterMarkDiv.setAttribute('style', styleStr)
    waterMarkDiv.classList.add('__wm')
    return waterMarkDiv
  }
  var container = document.body
  var waterMarkDiv = genWater(name)

  container.insertBefore(waterMarkDiv, container.firstChild)

  var callback = function(record, mutation) {
    for (var index = 0; index < record.length; index++) {
      var item = record[index]
      var target = item.target
      if (target.nodeType === 1) {
        // 删除时新增
        var removedNodes = item.removedNodes
        if (target.nodeName === 'BODY' && removedNodes.length > 0) {
          for (let index = 0; index < removedNodes.length; index++) {
            const element = removedNodes[index]
            if (element.nodeType === 1 && element.nodeName === 'DIV' && element.classList.contains('__wm')) {
              waterMarkDiv = genWater(name)
              container.insertBefore(waterMarkDiv, container.firstChild)
            }
          }
        }
        // 修改属性时直接删除
        var type = item.type
        if (target.nodeName === 'DIV' && target.classList.contains('__wm') && type === 'attributes') {
          container.removeChild(waterMarkDiv)
        }
      }
    }
  }

  if (typeof MutationObserver === 'function') {
    var obs = new MutationObserver(callback)
    var options = {
      childList: true,
      attributes: true,
      subtree: true,
      characterData: true
    }
    obs.observe(container, options)
  }
})()