fenzhi-utils/globalMethods/CustomPublic/CustomWatermark.js

分值前端项目的js函数库

/**
 * 网页添加水印
 */
/**
CustomWatermark('张三')

CustomWatermark({
  waterText: '张三', // 水印文字
  positionTop: '100px',
  positionleft: '100px',
});

let watermark = new CustomWatermark('医保支付');
watermark.destroyed();// 销毁
*/

//声明
let watermark = {};

//水印配置
let setWatermark = (params) => {
  // 水印参数
  let watermarkParameters = {
    waterText: '', // 水印文字
    waterTextColor: '#EBEBEB', // 水印文字颜色
    waterTextFontSize: 20, // number,水印文字大小
    waterElID: 'CustomWater-' + '1.23452384164.123412415', // 水印挂载的id,【需以CustomWater-开头】
    waterAreaWidth: document.documentElement.clientWidth, // number,水印区域宽度
    waterAreaHeight: document.documentElement.clientHeight, // number,水印区域高度
    waterAreaPosition: 'fixed',
    waterAreazIndex: '9999999',
    waterMountElement: document.body,
    waterAreaOpacity: 0.2,
    waterAreaRotate: (-20 * Math.PI) / 150, // 水印的旋转角度
    singleWidth: 200, // 需大于文字的宽度
    singleHeight: 200, // 需大于文字所需要的高度
    positionTop: '0px',
    positionleft: '0px',
  };

  if (typeof params === 'string') {
    watermarkParameters.waterText = params;
  } else if (typeof params === 'object') {
    watermarkParameters = Object.assign({}, watermarkParameters, params);
  } else {
    return false;
  }

  let CanvasID = watermarkParameters.waterElID;
  if (!CanvasID.startsWith('CustomWater')) {
    CanvasID = 'CustomWater-' + CanvasID;
  }
  // 移除旧水印
  if (document.getElementById(CanvasID) !== null) {
    document.body.removeChild(document.getElementById(CanvasID));
  }
  //创建画布
  let createCanvas = document.createElement('canvas');
  // 设置canvas画布大小
  let actualNeedsWdith = 20 * watermarkParameters.waterText.length;
  watermarkParameters.singleWidth = Math.max(
    watermarkParameters.singleWidth,
    actualNeedsWdith
  );
  let actualNeedsHeight = 18 * watermarkParameters.waterText.length;
  watermarkParameters.singleHeight = Math.max(
    watermarkParameters.singleHeight,
    actualNeedsHeight
  );
  createCanvas.width = watermarkParameters.singleWidth; //宽度
  createCanvas.height = watermarkParameters.singleHeight; //高度
  //创建Context2D对象作为2D渲染的上下文。
  let Context2D = createCanvas.getContext('2d');
  /*水印样式调整配置*/
  Context2D.rotate(watermarkParameters.waterAreaRotate); // 水印旋转角度
  Context2D.fillStyle = watermarkParameters.waterTextColor; //浅色模式或后台
  Context2D.font = watermarkParameters.waterTextFontSize + 'px Vedana'; //水印文字大小
  Context2D.textAlign = 'center'; //水印水平位置
  Context2D.textBaseline = 'alphabetic'; //水印垂直位置
  Context2D.fillText(
    watermarkParameters.waterText,
    createCanvas.width / 3,
    createCanvas.height / 2
  );

  //创建元素
  let createDiv = document.createElement('div');
  createDiv.id = CanvasID;
  //水印默认设置
  createDiv.style.opacity = watermarkParameters.waterAreaOpacity;
  createDiv.style.pointerEvents = 'none'; //水印层事件穿透 让水印不阻止交互事件
  createDiv.style.top = watermarkParameters.positionTop; //水印顶部距离
  createDiv.style.left = watermarkParameters.positionleft; //水印左侧距离
  createDiv.style.position = watermarkParameters.waterAreaPosition; //水印定位
  createDiv.style.zIndex = watermarkParameters.waterAreazIndex; //水印样式优先显示
  createDiv.style.width = watermarkParameters.waterAreaWidth + 'px'; //水印宽度
  createDiv.style.height = watermarkParameters.waterAreaHeight + 'px'; //水印高度
  createDiv.style.background =
    'url(' + createCanvas.toDataURL('image/png') + ') left top repeat'; //水印显示(关键代码)
  watermarkParameters.waterMountElement.appendChild(createDiv); //在指定元素节点的最后一个子节点之后添加节点

  return CanvasID;
};

// function resizeHandler() {
//   setWatermark(params);
// }

// 此方法只允许调用一次
watermark.set = (params) => {
  let id = setWatermark(params);
  //设置间隔
  let timer = setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(params);
    } else {
      clearTimeout(timer);
    }
  }, 500);
  //改变大小时执行
  window.onresize = () => {
    setWatermark(params);
  };
  // window.addEventListener('resize', resizeHandler);
};
function CustomWatermark(params) {
  watermark.set(params);
}
// 移除销毁元素
CustomWatermark.prototype.destroyed = function () {
  var CustomWaterEls = document.querySelectorAll('[id^="CustomWater-"]');
  for (var i = 0; i < CustomWaterEls.length; i++) {
    CustomWaterEls[i].remove();
  }
  // window.removeEventListener('resize', resizeHandler);
};

export { CustomWatermark };