watermark demo

HTML

<div id="info">
Information should not be distributed!
</div>

CSS

html,body {
  height: 100%;
}
#info {
  height: 100%;
}

JavaScript

let defaultOption = {
  id: 'watermark-1',
  width: 110,
  preventTamper: false,
  height: 80,
  text: 'watermark',
  font: '20px Times New Roman',
  rotateDegree: 30 * Math.PI / 180,
  style: {
    'pointer-events': 'none',
    width:'100%',
    height: '100%',
    top:0,
    left:0,
    position: 'fixed',
    'z-index':1000
  }
}
let container, observer, backgroundUrl

function remove() {
  var elem = document.getElementById(defaultOption.id);
  if(elem)
    elem.parentNode.removeChild(elem);
}
//create image base64 url via canvas
function createImageUrl(options) {
  var canvas = document.createElement('canvas');
  var text = options.text;
  canvas.width = options.width
  canvas.height = options.height
  var ctx = canvas.getContext('2d');
  ctx.shadowOffsetX = 2;     //X轴阴影距离，负值表示往上，正值表示往下
  ctx.shadowOffsetY = 2;     //Y轴阴影距离，负值表示往左，正值表示往右
  ctx.shadowBlur = 2;     //阴影的模糊程度
  // ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';    //阴影颜色
  ctx.font = options.font
  ctx.fillStyle = "rgba(204,204,204,0.45)"
  ctx.rotate(options.rotateDegree);
  ctx.translate(options.trax, options.tray);
  ctx.textAlign = 'left';
  ctx.fillText(text, 35, 32);    //实体文字
  return canvas.toDataURL('image/png')
}

function createContainer(options, forceCreate) {
  let oldDiv = document.getElementById(options.id)
  if(!forceCreate && oldDiv)
    return container
  let url = createImageUrl(options)
  var div = oldDiv ? oldDiv : document.createElement('div');
  div.id = options.id
 
    let parentEl = options.preventTamper ? document.body : (options.parentEl || document.body)

  if(typeof parentEl === 'string') {
    if(parentEl.startsWith('#'))
      parentEl = parentEl.substring(1)
    parentEl = document.getElementById(parentEl)
  }
  let rect = parentEl.getBoundingClientRect()
  options.style.left = (options.left || rect.left) + 'px'
  options.style.top = (options.top ||rect.top) + 'px'
  div.style.cssText = getStyleText(options)
  div.setAttribute('class', '')
  backgroundUrl =  'url(' +...