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();
};