任何人都有一个好的反应签名画布教程

Question

我可以使用以下方法创建签名画布：

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

从npm直接复制。但是我不知道该怎么做才能保存下来。而且它的文档对我来说真的很不清楚。如果有人对此有经验，您如何做出反应来实现它？

Answer 1

我解决了这个问题。

对于html部分：

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

并在组件中进行反应：

    sigPad = {}

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

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

    }

大多数情况下，直接来自他们的文档。花了一段时间才弄清楚，这对我来说还不清楚。