anyone have a good tutorial for react signature canvas

user_5134837 0
Viewed 2051

I can create the signature canvas just fine with:

<SignatureCanvas penColor='black' canvasProps={{ width: 500, height: 200, className: 'sigCanvas'}} />

Which a direct copy from the npm. But what I dont know how to do is save this. And the documentation for it is really unclear to me. If anyone has experience with this, how did you achieve it with react?

reactjs canvas
1 Answers

I resolved this.

for the html section:

<SignatureCanvas penColor='black' canvasProps={{ width: 546, height: 200, className: 'sig-canvas' }} ref={(ref) => { this.sigPad = ref }} />

and in the component for react:

    sigPad = {}

    clearSig = () => {
        this.sigPad.clear();
        console.log('on click:', this.state.trimmedDataURL);
    }

    trim = () => {
        this.setState({ trimmedDataURL: this.sigPad.getTrimmedCanvas().toDataURL('image/png') })

    }

Which was for the most part, directly from their docs. Took awhile to figure out, it wasnt clear to me.

user_51348370
Related