react-signature-canvas手写签名

• 首先安装依赖：npm install react-signature-canvas
• 引入依赖：import SignatureCanvas from 'react-signature-canvas';
• 需要用到useRef拿到元素

import React, {
  useRef,
} from 'react';
import SignatureCanvas from 'react-signature-canvas';
import './index.less';


// 手写签名
const [signatureCanvasShow, setSignatureCanvasShow] = useState(false);
const sigCanvas = useRef<HTMLDivElement>(null);
// 打开签名弹框
const openSignatureCanvasShow = useCallback(async (values: any) => {
  await setSignatureCanvasShow(true)
  // 给签名添加白色背景
  let canvas = sigCanvas.current._canvas;
  if (canvas.getContext) {
      let ctx = canvas.getContext('2d');
      ctx.fillStyle = "#fff";//添加颜色
      ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
}, [sigCanvas]);
// 清除
const resetSignBtn = () => {
  sigCanvas.current.clear();
};
// 提交
const signBtn = () => {
  console.log(sigCanvas);
  const dataurl = sigCanvas.current.toDataURL('image/png').toString();
  console.log(dataurl);

  // const dataurl = sigCanvas.current.toDataURL('image/png').toString();
  // let arr = dataurl.split(','),
  //   mime = arr[0].match(/:(.*?);/)[1],
  //   bstr = atob(arr[1]),
  //   n = bstr.length,
  //   u8arr = new Uint8Array(n);
  // while (n--) {
  //   u8arr[n] = bstr.charCodeAt(n);
  // }
  // let obj = new Blob([u8arr], { type: mime });
  // let fd = new FormData();
  // fd.append('upfile', obj, 'imag.png');
  // console.log(fd)
  // console.log(obj)
};


{/* 手写签名 */}
<Modal
  title={`请您在下方手写签名后提交`}
  visible={signatureCanvasShow}
  className={'signModal'}
  onCancel={() => {
    setSignatureCanvasShow(false);
  }}
  footer={[
    <Button key="cancel" onClick={() => {
      setSignatureCanvasShow(false);
    }}>
      取消
    </Button>,
    <Button key="reset" type="primary"  onClick={() => {
      resetSignBtn();
    }}>
      重写
    </Button>,
    <Button
      key="submit"
      type="primary"
      onClick={() => {
        // setSignatureCanvasShow(false);
        signBtn();
      }}
    >
      提交
    </Button>,
  ]}
>
  <div>
    <SignatureCanvas
      penColor="#000"
      ref={sigCanvas}
      canvasProps={{ width: 600, height: 240, className: 'sigCanvas' }}
    />
  </div>
</Modal>

• css文件

.signModal{
  width: 650px !important;
  .sigCanvas {
    border: 1px solid #999999;
    background: #fff;
  }
}

效果图