时间戳

首页 > 解决方案 > 任何人都有一个很好的反应签名画布教程

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

问题描述

我可以通过以下方式创建签名画布：

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

从 npm 直接复制。但我不知道该怎么做就是保存这个。我真的不清楚它的文档。如果有人有这方面的经验，你是如何通过反应实现的？

标签： reactjscanvas

解决方案

我解决了这个问题。

对于 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') })

    }

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

推荐阅读