@antmjs/vantui/lib/water-mark/utils.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getCanvas = getCanvas;
exports.getWaterData = getWaterData;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _taro = require("@tarojs/taro");
var _utils = require("../common/utils");
function getCanvas(compIndex) {
  return new Promise(function (resolve) {
    if (process.env.TARO_ENV !== 'h5') {
      (0, _taro.createSelectorQuery)().select("#van-water-mark".concat(compIndex)).node().exec(function (res) {
        resolve(res[0].node);
      });
    } else {
      resolve(document.createElement('canvas'));
    }
  });
}
function getWaterData(_ref) {
  var setCanvasRect = _ref.setCanvasRect,
    width = _ref.width,
    height = _ref.height,
    gapX = _ref.gapX,
    gapY = _ref.gapY,
    rotate = _ref.rotate,
    image = _ref.image,
    imageWidth = _ref.imageWidth,
    imageHeight = _ref.imageHeight,
    fontSize = _ref.fontSize,
    content = _ref.content,
    fontWeight = _ref.fontWeight,
    fontFamily = _ref.fontFamily,
    fontStyle = _ref.fontStyle,
    fontColor = _ref.fontColor,
    canvas = _ref.canvas;
  return new Promise( /*#__PURE__*/function () {
    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(resolve) {
      var ctx, ratio, canvasWidth, canvasHeight, markWidth, markHeight, base64Url, img, markSize;
      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            ctx = canvas.getContext('2d');
            ratio = (0, _utils.getWindowInfo)().pixelRatio;
            canvasWidth = "".concat((gapX + width) * ratio, "px");
            canvasHeight = "".concat((gapY + height) * ratio, "px");
            markWidth = width * ratio;
            markHeight = height * ratio;
            setCanvasRect({
              width: canvasWidth,
              height: canvasHeight
            });
            if (image) {
              ctx.translate(markWidth / 2, markHeight / 2);
              ctx.rotate(Math.PI / 180 * Number(rotate));
              img = process.env.TARO_ENV === 'h5' ? new Image() : canvas.createImage();
              img.crossOrigin = 'anonymous';
              img.referrerPolicy = 'no-referrer';
              img.src = image;
              img.onload = function () {
                ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
                ctx.restore();
                base64Url = canvas.toDataURL();
                resolve(base64Url);
              };
            } else if (content) {
              ctx.textBaseline = 'middle';
              ctx.textAlign = 'center';
              // 文字绕中间旋转
              ctx.translate(markWidth / 2, markHeight / 2);
              ctx.rotate(Math.PI / 180 * Number(rotate));
              markSize = Number(fontSize) * ratio;
              ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
              ctx.fillStyle = fontColor;
              ctx.fillText(content, 0, 0);
              ctx.restore();
              base64Url = canvas.toDataURL();
              resolve(base64Url);
            }
          case 8:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function (_x) {
      return _ref2.apply(this, arguments);
    };
  }());
}