react手写签名功能

步骤：

首先安装一下依赖 cnpm i react-canvas-draw
这边点击确定，返回的是base64格式，可以做一下处理之后页面回显，因为需要后端配合，这边就不展示了。

import React, { memo, useRef, useState } from "react";
import SignatureCanvas from "react-canvas-draw";
import { Modal, Button } from "antd";

export default memo(() => {
  const signatureCanvas = useRef(null);
  const [visible, setVisible] = useState(false);

  const cleanCanvase = () => {
    signatureCanvas.current.clear();
  };

  const handleOk = async () => {
    const imageData = signatureCanvas.current.canvas.drawing.toDataURL("image/png");
    //  const imageData = signatureCanvas.current.canvas.toDataURL('image/png')
    console.log(imageData, "imageData");
    /*  if (!signatureCanvas.current.isEmpty()) {
      const imgId = await imageFormPost(imageData);
       
    } */
    // setVisible(false);
  };

  const cancelHandle = () => {
    signatureCanvas.current.clear();
    setVisible(false);
  };

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>
        Open Modal
      </Button>
      {visible && (
        <Modal
          title="Basic Modal"
          visible={visible}
          onOk={handleOk}
          onCancel={() => cancelHandle()}
        >
          <div style={{ border: "dashed 1px #e3e3e3" }}>
            <SignatureCanvas ref={signatureCanvas} canvasProps={{ width: 500, height: 200 }} />
          </div>
          <div
            style={{
              color: "#333",
              fontSize: 13,
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              marginTop: 12
            }}
          >
            <div>请在虚线框内进行签名</div>
            <div>
              <Button type="danger" onClick={cleanCanvase}>
                重写
              </Button>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
});