reactjscanvas

How to save signature with react-signature-canvas?

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 package README on npm. What I don't know how to do is save a signature.

How did you achieve it with react?

Solution

  • I resolved this.

    for the HTML/JSX of the render function:

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

    and the rest of the React class component:

        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, taken directly from their example docs. Took a while to figure out, it wasn't clear to me.