react中实现电子签名

此处推荐一个十分简单易用的插件react-signature-canvas

1.安装插件

yarn add react-signature-canvas //或者 npm install react-signature-canvas --save

2.在组件中引入

import SignatureCanvas from "react-signature-canvas"

3.使用（此处用到的是类组件）

class Signature extends React.component{ 
    constructor(props){ 
        super(props) 
        this.state = { imgUrl:null } 
    } 
    canvas = {}; 
    //清除画布canvas 
    reset = ()=>{ 
        this.canvas.clear();
        this.setState({imgUrl:null}) 
    } 
    //生成图片 
    trim = ()=>{ 
        this.setState({imgUrl:this.canvas.getTrimmedCanvas().toDataURL("image/png")}) 
     } 
     render(){ 
         const  = this.state; 
         return(
>          
         ) 
     } 
 }

render里面的html：

这里需要注意一点，canvas生成的图片是png格式的，背景是透明的，如果想要背景颜色的话设置一下img的background-color就好啦。

另外，此处我的canvas画布宽高都是父容器的100%，如果想要更加深入了解react-signature-canvas插件，可以将canvas实例打印出来,里面有一些具体的方法

以上为初学react实现的第一个功能，在此记录一下。

blog.csdn.net/weixin_5215…