SOURCE

//判断安全数字
const judgeSafeNumber = num => {
    num = num - 0;
    return (
        // tslint:disable-next-line:triple-equals
        num.toPrecision(16) == num &&
        num <= Number.MAX_SAFE_INTEGER &&
        num >= Number.MIN_SAFE_INTEGER
    );
};

console.log(judgeSafeNumber(12123114141222222222311))

var img_tag = new Image();

let getTime = () => {
  var date = new Date();
  const currentDay = date.getDate();
  // 年
  var year = date.getFullYear();
  // 月
  var month = ('0' + (date.getMonth() + 1)).substr(-2);
  // 日
  var day = currentDay < 10 ? '0' + currentDay : currentDay;
  // 时
  var hh = date.getHours();
  // 分
  var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
  // 秒
  var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
}

let waterMark = (watermark: string | number, width: number, heigth: number, str1: string, str2: string = '') => {
  let id = '1.23452384164.123412415'
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }

  let div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  div.style.top = '20px'
  div.style.bottom = heigth + 'px'
  div.style.left = '0px'
  div.style.opacity = '0.15'
  div.style.position = 'fixed'
  div.style.zIndex = '100000'
  div.style.width = document.documentElement.clientWidth + 'px'
  div.style.height = document.documentElement.clientHeight + 'px'

  // 开启动态时间
  if (watermark === '1') {
    let can = document.createElement('canvas')
    window.setInterval(() => {

      // 设置canvas画布大小
      can.width = width
      can.height = heigth
      let cans = can.getContext('2d')
      cans.rotate(-20 * Math.PI / 180) // 水印旋转角度
      cans.font = '15px Vedana'
      cans.fillStyle = '#666666'
      cans.textAlign = 'center'
      cans.textBaseline = 'middle'
      cans.clearRect(0, 0, can.width, can.height);
      cans.fillText(str1 + getTime(), can.width / 2, can.height) // 水印在画布的位置x，y轴
      cans.fillText(str2, can.width / 2, can.height + 22)
      // when preload is complete, apply the image to the div
      const url = can.toDataURL('image/png')
      img_tag.onload = function () {
        div.style.background = 'url(' + url + ') left top repeat'
      }
      // setting 'src' actually starts the preload
      img_tag.src = url;

    }, 1000);
  } else {
    let can = document.createElement('canvas')
    // 设置canvas画布大小
    can.width = width
    can.height = heigth

    let cans = can.getContext('2d')
    cans.rotate(-20 * Math.PI / 180) // 水印旋转角度
    cans.font = '15px Vedana'
    cans.fillStyle = '#666666'
    cans.textAlign = 'center'
    cans.textBaseline = 'middle'
    cans.clearRect(0, 0, can.width, can.height);
    cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x，y轴
    cans.fillText(str2, can.width / 2, can.height + 22)
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  }
  document.body.appendChild(div)
  return id
}


// 添加水印方法
 const setWaterMark = (watermark, width, heigth, str1, str2) => {
  let id = waterMark(watermark, width, heigth, str1, str2)
  if (document.getElementById(id) === null) {
    id = waterMark(watermark, width, heigth, str1, str2)
  }
}

// 移除水印方法
const removeWatermark = () => {
  let id = '1.23452384164.123412415'
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
}