React实现手写签名---react-signature-canvas

使用react-signature-canvas实现手写签名

1. 首先安装插件

npm install react-signature-canvas --save

2.组件实现

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import SignatureCanvas from "react-signature-canvas";
import "../style/";
class ElectronicSignature extends  {
  constructor(props) {
    super(props);
     = {
      imgUrl: "",
    };
  }
  canvas = {
    clear: () => {},
    toDataURL: (param) => {
      return "";
    },
  };
  // 重置
  reset() {
    ();
  }
  // 保存
  save() {
    const imgUrl = ("image/png");
    ({ imgUrl: imgUrl });
  }
  render() {
    return (
      <Fragment>
        <div className="main">
          <SignatureCanvas
            penColor="white"
            canvasProps={{
              width: 500,
              height: 500,
              className: "write-name-canvas",
            }}
            ref={(ref) => {
               = ref;
            }}
          />
          <div>
            <img
              className="write-name-img"
              src={
                 === ""
                  ? ( = "")
                  : 
              }
            />
          </div>
          <div className="write-name-operation">
            <button onClick={() => ()}>重置</button>
            <button onClick={() => ()}>保存</button>
          </div>
        </div>
      </Fragment>
    );
  }
}
export default ElectronicSignature;