react实现手写签名（带实操图）

最近碰到了一个项目需要记录个人签名，网上搜了一下，最终选择了react-signature-canvas，下面写一个demo记录一下插件：
引入插件：

npm i -S react-signature-canvas
yarn add react-signature-canvas
npm install react-signature-canvas

使用
首先在页面中引入

import SignatureCanvas from 'react-signature-canvas'

用法十分简单，如果没什么也别的要求，只需要设置长宽

 <SignatureCanvas 
      penColor='black'
      ref={(ref) => { this.sigCanvas = ref }} //用于调用插件的API
      canvasProps={{width: window.outerWidth*.9, height: '200px', style:{position:'absolute',top:0,left:0,}, 
      className: 'sigCanvas'}} />

该插件本身自带了很多个API，详情可以去看官网
在这里我就演示其中一个清除

<button style={{marginTop:20}} onClick={()=>this.sigCanvas.clear()}>点击清除</button>

全部源码：

/**
 * 签名
 **/
import React from 'react';
import {
    Page,
} from "framework7-react";
import SignatureCanvas from 'react-signature-canvas'

export default class SignatureMain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    
    render() {
        return (
            <Page style={{backgroundColor:"#f1f1f1"}}>
                <div style={{width:window.outerWidth*.9,marginLeft:'5%',height:"200px",marginTop:20,backgroundColor:"#fff",borderRadius:"7px",border:"1px solid #ccc",position:"relative"}}>
                    <SignatureCanvas
                        penColor='black'
                        ref={(ref) => { this.sigCanvas = ref }} //用于调用插件的API
                        canvasProps={{width: window.outerWidth*.9, height: '200px', style:{position:'absolute',top:0,left:0,},
                        className: 'sigCanvas'}} />
                </div>
                <button style={{marginTop:20}} onClick={()=>this.sigCanvas.clear()}>点击清除</button>
            </Page>
        )
    }
}

效果图

下载

下载可以参考我前面写的

react 二维码生成并下载qrcode.react

里面的下载部分