utils - water-mark - 水印

utils - water-mark - 水印

预览


blog


git demo

介绍

水印

效果

使用

let waterMark = new WaterMark({
        pushDom: false,
      });
        waterMark.setImg(
          'https://images.cnblogs.com/cnblogs_com/zc-lee/2003095/o_210721071151%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210621132229.jpg'
        );
      for (let i = 0; i < document.getElementsByTagName('li').length; i++) {
        waterMark.set('water mark li ' + i, {
          dom: document.getElementsByTagName('li')[i],
          color: ['#fff','#00aaee','#ff0036','#ddd'][i],
        });
      }

配置及方法

  /**
   * @method 设置文字水印
   * @param {*} text 水印文字内容
   * @param {*} options 配置
   */
  set(text = this.text, options) {
  }
  /**
   * @method 设置图片水印
   * @param {*} text 水印文字内容
   * @param {*} options 配置
   */
  setImg(img = this.img, options) {
  }
 
 
/**
 * @class WaterMark
 * @description 水印效果
 * @param { Object } options
    {
        text: 'water mark', // 水印内容
        dom: document.body, // 水印父节点
        fontSize: 24, // 字号
        color: 'rgba(200, 200, 200, 0.5)',
        width: 500, // canvas width
        height: 500, // canvas height
        fixed: false, // 水印固定位置
        zIndex: null,
        img: null,
        pushDom: true, // true 添加至尾部 false unshift // 头部
      },
 * @fixed
 *  1. dom 可传入，有传则给该dom添加水印，默认document.body
 *  2. 水印节点添加在节点最后，可以不设置z-index
 *  3. z-index 默认 null，防止影响其他元素 z-index,其他元素可覆盖水印，若需要水印不被覆盖，自行设置z-index
 *  4. fixed 参数 true 可设置修复水印不能随页面滚动，给人感觉水印与页面不是一体，不在页面上
 *  5. 采用%优化，去掉 resize 重绘
 */

插件

// WaterMark.js
'use strict';
 
/**
 * @class WaterMark
 * @description 水印效果
 * @param { Object } options
    {
        text: 'water mark', // 水印内容
        dom: document.body, // 水印父节点
        fontSize: 24, // 字号
        color: 'rgba(200, 200, 200, 0.5)',
        width: 500, // canvas width
        height: 500, // canvas height
        fixed: false, // 水印固定位置
        zIndex: null,
        img: null,
        pushDom: true, // true 添加至尾部 false unshift // 头部
      },
 * @fixed
 *  1. dom 可传入，有传则给该dom添加水印，默认document.body
 *  2. 水印节点添加在节点最后，可以不设置z-index
 *  3. z-index 默认 null，防止影响其他元素 z-index,其他元素可覆盖水印，若需要水印不被覆盖，自行设置z-index
 *  4. fixed 参数 true 可设置修复水印不能随页面滚动，给人感觉水印与页面不是一体，不在页面上
 *  5. 采用%优化，去掉 resize 重绘
 */
 
class WaterMark {
  constructor(options = {}) {
    this.init(options);
  }
  init(options = {}) {
    Object.assign(
      this,
      {
        text: 'water mark', // 水印内容
        dom: document.body, // 水印父节点
        fontSize: 24, // 字号
        color: 'rgba(200, 200, 200, 0.5)',
        width: 500, // canvas width
        height: 500, // canvas height
        fixed: false, // 水印固定位置
        zIndex: null,
        img: null,
        pushDom: true, // true 添加至尾部 false unshift // 头部
      },
      {
        canvasImage: null,
      },
      options
    );
  }
  /**
   * @method 设置文字水印
   * @param {*} text 水印文字内容
   * @param {*} options 配置
   */
  set(text = this.text, options) {
    if (options) Object.assign(this, options);
    this.text = text;
    this.addDom(this.drawCanvas());
  }
  /**
   * @method 设置图片水印
   * @param {*} text 水印文字内容
   * @param {*} options 配置
   */
  setImg(img = this.img, options) {
    if (!img) throw new Error('Please set img!!!');
    if (options) Object.assign(this, options);
    this.img = img;
    this.addDom(img);
  }
  drawCanvas() {
    let can = document.createElement('canvas');
    /*修改参数可调整密度*/
    can.width = this.width;
    can.height = this.height;
    /*修改参数可调整密度End*/
    let cans = can.getContext('2d');
    cans.rotate((-30 * Math.PI) / 180);
    cans.translate(-50, can.height / 2);
    cans.font = this.fontSize + 'px Arial';
    cans.fillStyle = this.color;
    cans.textAlign = 'left';
    cans.textBaseline = 'Middle';
    cans.fillText(
      this.text,
      40 || (this.width - this.fontSize * this.text.length) / 2,
      this.height / 4
    );
    this.canvasImage = can.toDataURL('image/png');
    return this.canvasImage;
  }
  addDom(img) {
    let waterMarkDom = this.getWaterMarkDom();
    if (waterMarkDom) {
      waterMarkDom.style.background = 'url(' + img + ') left top repeat';
    } else {
      let div = document.createElement('div');
      div.setAttribute('water-mark', true);
      div.style.pointerEvents = 'none';
      div.style.position = 'absolute';
      div.style.top = '0px';
      div.style.left = '0px';
      console.log(this.dom.style.position === '');
      if (this.dom.style.position === '') {
        // document.body 若不设置 relative，heigh 100% 只有100vh
        this.dom.style.position = 'relative';
      }
      // !!! FIXED dom 添加在最后，不需要 z-index, 防止影响其他元素 z-index
      div.style.zIndex = this.zIndex;
      // !!! FIXED 采用%优化，去掉 resize 重绘
      // div.style.width = document.documentElement.clientWidth  + 'px'
      // div.style.height = document.documentElement.clientHeight  + 'px'
      div.style.width = '100%';
      div.style.height = '100%';
      div.style.background = 'url(' + img + ') left top repeat';
      if (this.pushDom) this.dom.appendChild(div);
      else {
        this.dom.insertBefore(div, this.dom.firstChild);
      }
    }
  }
 
  getWaterMarkDom() {
    // lastChild 不一定是水印，可能是其他方法添加的元素
    let waterMarkDom = null;
    this.dom.childNodes.forEach((v) => {
      if (v.tagName === 'DIV' && v.getAttribute('water-mark')) waterMarkDom = v;
    });
    return waterMarkDom;
  }
  remove() {
    let waterMarkDom = this.getWaterMarkDom();
    if (waterMarkDom) this.dom.removeChild(waterMarkDom);
  }
}
 
export default new WaterMark();