Recibo el error anterior cuando uso getTrimmedCanvas. Leí que al usar un estilo de fondo se produce este error porque necesita un fondo blanco o algo así.
Hay más código, pero solo pegué las cosas relevantes.
¡Gracias por ayudar!
import Popup from "reactjs-popup"; import SignaturePad from "react-signature-canvas"; export default function Homepage() { const sigCanvasRef = useRef({}); const clear = () => sigCanvasRef.current.clear(); const save = () => console.log(sigCanvasRef.getTrimmedCanvas().toDataURL("image/png")) return( <Popup modal trigger={<Button style={{ maxWidth: '40px', maxHeight: '40px', minWidth: '40px', minHeight: '40px' }} color="inherit"> <CreateIcon /> </Button>} closeOnDocumentClick={false} > {close => ( <> <div className={sigCanvas.signatureCanvas} > <SignaturePad ref={sigCanvasRef} canvasProps={ { style: {background: 'white', width:'100%', minHeight:'650%'} } } /> </div> <Button variant="contained" onClick={close}>back</Button> <Button variant="contained" onClick={clear}>clear</Button> <Button variant="contained" onClick={save}>save</Button> </> )} </Popup> )Accede a las referencias por la propiedad actual.
Prueba esto
console.log(sigCanvasRef.current.getTrimmedCanvas().toDataURL("image/png"))