vantui-edit/es/water-mark/index.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import _regeneratorRuntime from "@babel/runtime/regenerator";
import { Canvas, View } from '@tarojs/components';
import { nextTick } from '@tarojs/taro';
import classNames from 'classnames';
import { useEffect, useState, useCallback } from 'react';
import { getCanvas, getWaterData } from './utils';
import { jsx as _jsx } from "react/jsx-runtime";
var classPrefix = "van-water-mark";
var cIndex = 0;
export var WaterMark = function WaterMark(props) {
  var _props$zIndex = props.zIndex,
      zIndex = _props$zIndex === void 0 ? 2000 : _props$zIndex,
      _props$gapX = props.gapX,
      gapX = _props$gapX === void 0 ? 24 : _props$gapX,
      _props$gapY = props.gapY,
      gapY = _props$gapY === void 0 ? 48 : _props$gapY,
      _props$width = props.width,
      width = _props$width === void 0 ? 120 : _props$width,
      _props$height = props.height,
      height = _props$height === void 0 ? 64 : _props$height,
      _props$rotate = props.rotate,
      rotate = _props$rotate === void 0 ? -22 : _props$rotate,
      image = props.image,
      _props$imageWidth = props.imageWidth,
      imageWidth = _props$imageWidth === void 0 ? 120 : _props$imageWidth,
      _props$imageHeight = props.imageHeight,
      imageHeight = _props$imageHeight === void 0 ? 64 : _props$imageHeight,
      content = props.content,
      _props$fontStyle = props.fontStyle,
      fontStyle = _props$fontStyle === void 0 ? 'normal' : _props$fontStyle,
      _props$fontWeight = props.fontWeight,
      fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
      _props$fontColor = props.fontColor,
      fontColor = _props$fontColor === void 0 ? 'rgba(0,0,0,.15)' : _props$fontColor,
      _props$fontSize = props.fontSize,
      fontSize = _props$fontSize === void 0 ? 14 : _props$fontSize,
      _props$fontFamily = props.fontFamily,
      fontFamily = _props$fontFamily === void 0 ? 'sans-serif' : _props$fontFamily,
      _props$fullPage = props.fullPage,
      fullPage = _props$fullPage === void 0 ? true : _props$fullPage;

  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      base64Url = _useState2[0],
      setBase64Url = _useState2[1];

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      canvasRect = _useState4[0],
      setCanvasRect = _useState4[1];

  var _useState5 = useState(cIndex++),
      _useState6 = _slicedToArray(_useState5, 1),
      compIndex = _useState6[0];

  var work = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var canvas, base64Url_;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return getCanvas(compIndex);

          case 2:
            canvas = _context.sent;
            _context.next = 5;
            return getWaterData({
              gapX: gapX,
              gapY: gapY,
              rotate: rotate,
              fontStyle: fontStyle,
              fontWeight: fontWeight,
              width: width,
              height: height,
              fontFamily: fontFamily,
              fontColor: fontColor,
              image: image,
              content: content,
              fontSize: fontSize,
              imageWidth: imageWidth,
              imageHeight: imageHeight,
              canvas: canvas,
              setCanvasRect: setCanvasRect
            });

          case 5:
            base64Url_ = _context.sent;
            setBase64Url(base64Url_);

          case 7:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })), [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize, imageWidth, imageHeight]);
  useEffect(function () {
    nextTick(function () {
      work();
    });
  }, [work]);
  return /*#__PURE__*/_jsx(View, {
    className: classNames(classPrefix, _defineProperty({}, "".concat(classPrefix, "-full-page"), fullPage)),
    style: {
      zIndex: zIndex,
      backgroundSize: "".concat(gapX + width, "px"),
      backgroundImage: "url('".concat(base64Url, "')")
    },
    children: /*#__PURE__*/_jsx(Canvas, {
      style: _objectSpread(_objectSpread({}, canvasRect), {}, {
        position: 'absolute',
        left: -500
      }),
      id: "van-water-mark".concat(compIndex),
      type: "2d"
    })
  });
};
export default WaterMark;