wft-utils/util/watermark.js

The commonly used tool functions in daily development

export function watermark(str = 'WFT') {
  const id = '1.23452384164.' + new Date().getTime()

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }

  const can = document.createElement('canvas')
  can.width = 400
  can.height = 300

  const cans = can.getContext('2d')
  cans.rotate(-20 * Math.PI / 180)
  cans.font = '15px Vedana'
  cans.fillStyle = 'rgba(0, 0, 0, 0.10)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(str, can.width / 20, can.height)

  const div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  div.style.top = '3px'
  div.style.left = '0px'
  div.style.position = 'fixed'
  div.style.zIndex = '100000'
  div.style.width = document.documentElement.clientWidth + 'px'
  div.style.height = document.documentElement.clientHeight + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  document.body.appendChild(div)
  return id
}

export function setWaterMark(text = 'WFT', dom = document.body) {
  if (document.getElementById('waterMark')) return
  // 旋转角度大小
  var rotateAngle = Math.PI / 6;
 
  // labels是要显示的水印文字，垂直排列
  var labels = new Array();
  labels.push(text);
 
  let pageWidth = dom.clientWidth
  let pageHeight = dom.clientHeight
 
  let canvas = document.createElement('canvas');
  let canvasWidth = canvas.width = pageWidth;
  let canvasHeight = canvas.height = pageHeight;
 
  var context = canvas.getContext('2d');
  context.font = "15px Arial";
 
  // 先平移到画布中心
  context.translate(pageWidth / 2, pageHeight / 2 - 250);
  // 在绕画布逆方向旋转30度
  context.rotate(-rotateAngle);
  // 在还原画布的坐标中心
  context.translate(-pageWidth / 2, -pageHeight / 2);
 
  // 获取文本的最大长度
  let textWidth = Math.max(...labels.map(item => context.measureText(item).width));
 
  let lineHeight = 15, fontHeight = 12, positionY, i
  i = 0, positionY = 0
  while (positionY <= pageHeight) {
    positionY = positionY + lineHeight * 5
    i++
  }
  canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离
  canvasHeight = 2 * canvasHeight
  for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
    // 进行画布偏移是为了让画布旋转之后水印能够左对齐;
    context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
    for (let positionX = 0; positionX < canvasWidth; positionX += 2 * textWidth) {
      let spacing = 0;
      labels.forEach(item => {
        context.fillText(item, positionX, positionY + spacing);
        spacing = spacing + lineHeight;
      })
    }
    context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
    context.restore();
    i++
  }
  let dataUrl = canvas.toDataURL('image/png');
  let waterMarkPage = document.createElement('div');
  waterMarkPage.id = "waterMark"
  let style = waterMarkPage.style;
  style.position = 'fixed';
  style.overflow = "hidden";
  style.left = 0;
  style.top = 0;
  style.opacity = '0.4';
  style.background = "url(" + dataUrl + ")";
  style.zIndex = 999;
  style.pointerEvents = "none";
 
  style.width = '100%';
  style.height = '100vh';
  dom.appendChild(waterMarkPage);
}