react-signature-canvas手写签名

Posted 2023-04-27

参考技术A 效果图

React 自定义组件实现手写签名

import * as React from 'react';
import SignaturePad from 'react-signature-canvas';
import  useEffect, useMemo, useRef, useState  from 'react';

const Signature = ( onBegin , ref) => 
  const divRef = useRef();

  useEffect(() => 
    ref.current.getSignaturePad()._canvas.width = divRef.current?.clientWidth;
    ref.current.getSignaturePad()._canvas.height =  200;
  , [divRef.current]);

  // 不添加这个，背景默认是透明的，可以看到图片下层的内容，按需添加
  useEffect(() => 
    let canvas = ref.current._canvas;
    if (canvas.getContext) 
      let ctx = canvas.getContext('2d');
      ctx.fillStyle = '#fff'; //添加颜色
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    
  , [ref.current]);

  return (
    <div ref=divRef>
      <SignaturePad ref=ref onBegin=onBegin />
    </div>
  );
;

export default React.forwardRef(Signature);

使用：

const [signed, isSigned] = useState(false);

const canvasRef = useRef();

<Signature ref=canvasRef onBegin=() => isSigned(true) />

 其他方法：

  // 确认
  const confirm = (callback) => 
    const canvas = canvasRef.current?.getSignaturePad()._canvas;
    // 图片转为 base64
    const dataurl = canvasRef.current?.toDataURL('image/png').toString();
    //图片上传
    canvas.toBlob((blob) => 
      // 开始上传
  
    , 'image/png');
  ;

  // 清空签名
  const clear = () => 
    canvasRef.current?.clear();
  ;