zarm/lib/water-mark/utils.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.draw = exports.plainStyle = exports.getUUID = exports.compareUUID = exports.isContainNode = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var resolveImage = function resolveImage(url) {
  return new Promise(function (resolve, reject) {
    var image = new Image();
    image.crossOrigin = 'anonymous';
    image.referrerPolicy = 'no-referrer';

    image.onload = function () {
      return resolve(image);
    };

    image.onerror = function () {
      return reject(new Error('图片加载失败'));
    };

    image.src = url;
  });
};

var isContainNode = function isContainNode(nodes, target) {
  return nodes.length && Array.from(nodes).some(function (node) {
    return node.contains(target);
  });
};

exports.isContainNode = isContainNode;

var compareUUID = function compareUUID(left, right) {
  var _dataset, _dataset2;

  return (left === null || left === void 0 ? void 0 : (_dataset = left.dataset) === null || _dataset === void 0 ? void 0 : _dataset.watermark) === (right === null || right === void 0 ? void 0 : (_dataset2 = right.dataset) === null || _dataset2 === void 0 ? void 0 : _dataset2.watermark);
};

exports.compareUUID = compareUUID;
var id = 0;

var getUUID = function getUUID() {
  id += 1;
  return id;
};

exports.getUUID = getUUID;

var plainStyle = function plainStyle(style) {
  return Object.entries(style).reduce(function (acc, _ref) {
    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
        name = _ref2[0],
        value = _ref2[1];

    if (value === undefined || value === null) return acc;
    var key = name.replace(/([A-Z])/g, '-$1').toLowerCase();
    return "".concat(acc).concat(key, ":").concat(value, ";");
  }, '');
};

exports.plainStyle = plainStyle;

var draw = /*#__PURE__*/function () {
  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref3) {
    var text, image, textStyle, imageStyle, markStyle, _ref5, gapX, gapY, offsetLeft, offsetTop, width, height, opacity, rotate, canvas, context, ratio, canvasWidth, canvasHeight, canvasOffsetLeft, canvasOffsetTop, _ref6, imageWidth, imageHeight, img, _ref7, color, fontSize, fontWeight, fontFamily, fontStyle, fontVariant, textAlign, textBaseline, markWidth, markHeight, texts, widths, maxWidth, markSize, lineHeight, initY, initX, i;

    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            text = _ref3.text, image = _ref3.image, textStyle = _ref3.textStyle, imageStyle = _ref3.imageStyle, markStyle = _ref3.markStyle;
            _ref5 = markStyle, gapX = _ref5.gapX, gapY = _ref5.gapY, offsetLeft = _ref5.offsetLeft, offsetTop = _ref5.offsetTop, width = _ref5.width, height = _ref5.height, opacity = _ref5.opacity, rotate = _ref5.rotate;
            canvas = document.createElement('canvas');
            context = canvas.getContext('2d');

            if (context) {
              _context.next = 6;
              break;
            }

            return _context.abrupt("return", Promise.reject(new Error('当前环境不支持 Canvas')));

          case 6:
            ratio = 3;
            canvasWidth = (gapX + width) * ratio;
            canvasHeight = (gapY + height) * ratio;
            canvasOffsetLeft = offsetLeft || gapX / 2;
            canvasOffsetTop = offsetTop || gapY / 2;
            canvas.setAttribute('width', "".concat(canvasWidth, "px"));
            canvas.setAttribute('height', "".concat(canvasHeight, "px")); // 设置透明度

            context.globalAlpha = opacity; // 旋转画布

            context.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
            context.rotate(Math.PI / 180 * Number(rotate));

            if (!image) {
              _context.next = 23;
              break;
            }

            _ref6 = imageStyle, imageWidth = _ref6.width, imageHeight = _ref6.height;
            _context.next = 20;
            return resolveImage(image);

          case 20:
            img = _context.sent;
            context.drawImage(img, 0, 0, imageWidth * ratio, imageHeight * ratio);
            return _context.abrupt("return", {
              url: canvas.toDataURL(),
              width: canvasWidth,
              height: canvasHeight,
              ratio: ratio
            });

          case 23:
            if (!(Array.isArray(text) && text.length || (0, _isString.default)(text))) {
              _context.next = 48;
              break;
            }

            _ref7 = textStyle, color = _ref7.color, fontSize = _ref7.fontSize, fontWeight = _ref7.fontWeight, fontFamily = _ref7.fontFamily, fontStyle = _ref7.fontStyle, fontVariant = _ref7.fontVariant, textAlign = _ref7.textAlign, textBaseline = _ref7.textBaseline;
            markWidth = width * ratio;
            markHeight = height * ratio; // 获取文本的最大宽度

            texts = Array.isArray(text) ? text : [text];
            widths = texts.map(function (item) {
              return context.measureText(item).width;
            });
            maxWidth = Math.max.apply(null, widths);
            markSize = Number(fontSize) * ratio; // 获取行高

            lineHeight = markSize + 5; // 设置文本对齐方式

            context.textAlign = textAlign; // 设置文本基线

            context.textBaseline = textBaseline; // 设置字体颜色

            context.fillStyle = color; // 设置字体

            context.font = "".concat(fontStyle, " ").concat(fontVariant, " ").concat(fontWeight, " ").concat(maxWidth > width ? markSize / 2 : markSize, "px/").concat(lineHeight, "px ").concat(fontFamily); // 计算水印在y轴上的初始位置

            initY = (markHeight - (fontSize * texts.length + (texts.length - 1) * 5)) / 2;
            initY = initY < 0 ? 0 : initY;
            initX = markWidth / 2;
            _context.t0 = textAlign;
            _context.next = _context.t0 === 'left' ? 42 : _context.t0 === 'start' ? 42 : _context.t0 === 'right' ? 44 : _context.t0 === 'end' ? 44 : 46;
            break;

          case 42:
            initX = 0;
            return _context.abrupt("break", 46);

          case 44:
            initX = width * ratio;
            return _context.abrupt("break", 46);

          case 46:
            // 处理多行文本
            for (i = 0; i < texts.length; i++) {
              context.fillText(texts[i], initX, initY + lineHeight * i, canvasWidth);
            }

            return _context.abrupt("return", {
              url: canvas.toDataURL(),
              width: canvasWidth,
              height: canvasHeight,
              ratio: ratio
            });

          case 48:
            return _context.abrupt("return", Promise.reject(new Error('图片或文字选项缺失')));

          case 49:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));

  return function draw(_x) {
    return _ref4.apply(this, arguments);
  };
}();

exports.draw = draw;