react 手写签名
import React, { useRef, useState } from 'react'; import SignatureCanvas from 'react-signature-canvas'; import './index.less'; function Signature() { const [signatureDataUrl, setSignatureDataUrl] = useState(null); const signatureRef: any = useRef(); const handleClear = () => { signatureRef.current.clear(); setSignatureDataUrl(null); }; const handleSave = () => { const dataURL = signatureRef.current.toDataURL(); console.log('dataURL', dataURL); setSignatureDataUrl(dataURL); }; return ( <div> <SignatureCanvas canvasProps={{ width: 350, height: 200, className: 'write-name-canvas' }} ref={signatureRef} /> <button onClick={handleClear}>清除</button> <button onClick={handleSave}>保存</button> {signatureDataUrl && ( <img src={signatureDataUrl} alt="签名" style={{ border: '1px solid red', width: '100px', height: '35px' }} /> )} </div> ); } export default Signature;
本文来自博客园,作者:zjxgdq,转载请注明原文链接:https://www.cnblogs.com/zjxzhj/p/17433613.html