javascript - 类型错误：sigCanvasRef.getTrimmedCanvas 不是函数

Question

使用 getTrimmedCanvas 时出现上述错误。我读到在使用背景样式时会发生此错误，因为它需要白色背景或类似的东西。

还有更多代码，但我只粘贴了相关的东西。

感谢您的帮助！

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>
)

Answer 1

您可以通过 current-property 访问 refs。

尝试这个

console.log(sigCanvasRef.current.getTrimmedCanvas().toDataURL("image/png"))