Estoy trabajando en un proyecto de reacción para tomar una firma de los usuarios. Estoy usando react-signature-canvas para firmar usuarios. Quiero que los datos de la firma se guarden en el backend. Entonces, ¿cómo puedo cambiar el lienzo de la firma a una cadena base64? Aquí está mi código.
import React, { useRef, useState } from "react"; import SignaturePad from "react-signature-canvas"; import offer from "./assets/offer.PNG"; const Signature = () => { let signPad = useRef({}); let data = ""; const clear = () => { signPad.current.clear(); }; const save = () => { data = signPad.current.toDataURL(); }; const show = () => { signPad.current.fromDataURL(data); }; const imageString = ""; //I want to store it here return ( <div className="p-10 flex flex-col space-y-24 font-serif justify-center items-center"> <div className=" w-56 mt-10 "> <p className="flex justify-start items-start -mx-36">Your Signature</p> <div className="flex justify-center items-center"> <SignaturePad canvasProps={{ widtd: 500, height: 200, className: "sigCanvas" }} className="border-2 border-black " ref={signPad} /> </div> </div> <div className="flex space-x-4 -mt-24"> {" "} <button onClick={clear}>Clear</button> <button onClick={save}>Save</button> <button onClick={show}>Show</button> </div> </div> ); }; export default Signature;¿Alguien puede ayudarme a cambiar el lienzo de la firma a la cadena base64?
Parece que ya está configurado casi correctamente. Su función de guardado usa la referencia signPad que debería darle acceso al lienzo subyacente, pero por alguna razón está llamando al método toDataURL en un subobjeto llamado current del lienzo ref.
Intente cambiar el contenido de la función de guardar a lo siguiente y verifique la salida de cadena base64 en la consola:
console.log(signPad.toDataURL());