水印

by FishWoo

HTML

<h1>
      This is a static template, there is no bundler or bundling involved!
 </h1>

JavaScript

// 默认配置
  const defaultOption = {
    id: 'watermark-id',
    // parentEl: '',
    // 防止别人外界破坏
    preventTamper: false,
    // 水印单个图片配置
    width: 110,
    height: 80,
    text: 'watermark',
    font: '20px Times New Roman',
    fontColor: 'rgba(204,204,204,0.45)',
    // 顺时针旋转的弧度
    rotateDegree: (30 * Math.PI) / 180,
    // 平移变换
    translateX: 0,
    translateY: 0,
    // 水印容器的样式
    style: {
      'pointer-events': 'none',
      width: '100%',
      height: '100%',
      top: 0,
      left: 0,
      position: 'fixed',
      'z-index': 1000
    }
  };

  // 观察配置
  const observeConfig = {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  };

  let container;
  let observer;

  // 创建水印背景图片
  function createImageUrl (options) {
    const canvas = document.createElement('canvas');
    const text = options.text;
    canvas.width = options.width;
    canvas.height = options.height;

    const 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 = options.fontColor;
    ctx.rotate(options.rotateDegree);
    ctx.translate(options.translateX, options.translateY);
    ctx.textAlign = 'left';
    // 在 (x, y)位置填充实体文本
    ctx.fillText(text, 35, 32);
    return canvas.toDataURL('image/png');
  }

  // 将背景填充至指定水印位置处
  function createContainer (options, forceCreate) {
    const oldDiv = document.getElementById(options.id);
    if (!forceCreate && oldDiv) return container;

    const url = createImageUrl(options);
    const div = oldDiv || document.createElement('div');
    div.id = options.id;

    // 水印容器的父元素，默认document.body
    let parentEl = options.preventTamper ? document.body : options.parentEl || document.body;

    if (typeof parentEl === 'string') {
      if (parentEl.startsWith('#')) parentEl =...