watermarkjs-plugin/lib/index.js

网页添加水印插件

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/*
 * @Author: Leeking
 * @Date: 2023-09-15 11:36:39
 */
var watermarkMap = new Map();
var maskClassName = 'watermark-23452384164-123412416';

var Watermark = function () {
  _createClass(Watermark, null, [{
    key: 'mark',

    // 获取水印实例
    value: function mark() {
      var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '我是水印';
      var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;

      var $el = el;
      // 设置定义水印的容器
      if (typeof $el === 'string') {
        $el = document.querySelector($el) || document.body;
      }
      // 判断是否新建实例
      var instance = null;
      if (watermarkMap.has($el)) {
        instance = watermarkMap.get($el);
        instance.reMark(text, $el);
      } else {
        instance = new Watermark($el, text);
        watermarkMap.set($el, instance);
      }
      return instance;
    }
    // 构造函数

  }]);

  function Watermark($el, text) {
    _classCallCheck(this, Watermark);

    var maskDom = document.createElement('div');
    maskDom.className = maskClassName;
    var width = maskDom.tagName === 'BODY' ? document.documentElement.clientWidth : $el.clientWidth;
    var height = maskDom.tagName === 'BODY' ? document.documentElement.clientHeight : $el.clientHeight;
    maskDom.style.cssText = '\n      pointer-events: none;\n      top: 0px;\n      left: 0px;\n      position: fixed;\n      z-index: 100000000;\n      width: ' + width + 'px;\n      height: ' + height + 'px;\n      background: url(' + this.generateWatermarkImg(text) + ') left top repeat;\n    ';
    $el.appendChild(maskDom);
    this.$maskDom = maskDom;
  }
  // 生产水印图片


  _createClass(Watermark, [{
    key: 'generateWatermarkImg',
    value: function generateWatermarkImg(text) {
      // 创建一个画布
      var can = document.createElement('canvas');
      can.width = 250;
      can.height = 150;
      // 绘制图像
      var cans = can.getContext('2d');
      cans.rotate(-18 * Math.PI / 180); // 旋转角度
      cans.font = '16px Vedana';
      cans.fillStyle = 'rgba(220, 220, 220, 0.30)';
      cans.textAlign = 'left'; // 设置文本内容的当前对齐方式
      cans.textBaseline = 'Middle'; // 设置在绘制文本时使用的当前文本基线
      cans.fillText(text, can.width / 8, can.height / 2); // 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
      // 生产图片
      return can.toDataURL('image/png');
    }
    // 重新绘制水印内容

  }, {
    key: 'reMark',
    value: function reMark(text) {
      if (this.$maskDom) {
        this.$maskDom.style.background = 'url(' + this.generateWatermarkImg(text) + ') left top repeat';
        return true;
      }
      return false;
    }
    // 删除水印

  }, {
    key: 'removeMark',
    value: function removeMark() {
      var $el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.body;

      if (this.$maskDom) {
        $el.removeChild(this.$maskDom);
        if (watermarkMap.has($el)) {
          watermarkMap.delete($el);
        }
        return true;
      }
      return false;
    }
  }]);

  return Watermark;
}();

exports.default = Watermark;