Ad

Anyone Have A Good Tutorial For React Signature Canvas

- 1 answer

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?

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad