手写签名实现（React）

import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import SignaturePad from 'react-signature-canvas';
import { FormattedMessage, formatMessage } from 'umi/locale';
import styles from './index.less';

@connect(state => state)
class Nda extends React.Component {

  sigPad = {}

  constructor(props) {
    super(props);
    this.state = {
      signTip: true
    };
  }

  trim = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'machine/save',
      payload: {
        handWriteSginUrl: this.sigPad.getTrimmedCanvas()
          .toDataURL('image/png')
      }
    });
  }

  clear = () => {
    this.sigPad.clear();
    this.setState({
      signTip: true
    });
  }

  render() {
    const { dispatch, machine } = this.props;
    const { signTip } = this.state;
    const { handWriteSginUrl } = machine;
    return (
		 <div className={styles.handWriteSign}>
            <SignaturePad
              canvasProps={{ className: styles.sigPad }}
              ref={(ref) => { this.sigPad = ref }}
              onBegin={() => {
                this.setState({
                  signTip: false
                });
              }}
              onEnd={() => this.trim()}
            />
            {!signTip && (
              <button
                style={{ position: "absolute", right: "40px", bottom: "30px", zIndex: "1000" }}
                onClick={() => this.clear()}
              >
                <FormattedMessage id="machine.hand.write.sign.clear" />
              </button>
            )}
            {signTip &&
              <div className={styles.signTip}>
                {formatMessage({ id: "machine.hand.write.sign.tip" })}
              </div>
            }
         </div>
       );
  	}
};
export default Nda;

    .handWriteSign {
      margin-top: 35px;
      width: 70%;
      position: relative;
      height: 290px;
      .sigPad {
        width: 100%;
        height: 100%;
        background: rgba(158, 175, 190, 0.2);
      }
      .signTip {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 36px;
        font-size: 36px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #A8AAAD;
        line-height: 36px;
      }
    }

附react-signature-canvas地址：https://www.npmjs.com/package/react-signature-canvas

插件地址：https://github.com/agilgur5/react-signature-canvas

在线测试地址：https://codesandbox.io/s/react-signature-canvas-example-forked-qnevk?file=/src/index.js