一.React：使用手写签名插件：react-canvas-draw 和 react-signature-canvas

npm install react-canvas-draw --save
 
import CanvasDraw from "react-canvas-draw";

3、使用组件

1	`signCanvas= React.createRef();`


设置签名组件的属性

<CanvasDraw
    ref={this.signCanvas}
    brushColor="#000"
    brushRadius={3}
    lazyRadius={10}
    canvasWidth={"100%"}
    canvasHeight={250}
/>

4、得到签名并转化为图片

1	`let` `signImg =` `this.signCanvas.current.canvas.drawing.toDataURL('image/png');`

5、清空画布

1	`this.signCanvas.current.clear();`


6、将签名信息图片展示



使用此插件，转为png图片后无背景色透明，需要处理。

参考来源 https://www.jianshu.com/p/d36bf61d8034

demo：https://embiem.github.io/react-canvas-draw/

react-signature-canvas

这个插件签名生成的图片虽然也是透明的，但处理起来比react-canvas-draw这个插件容易多，

示例：

　//先安装
  
　　npm i -S react-signature-canvas
  
　　//导入
  
　　import SignatureCanvas from 'react-signature-canvas';
  
  
  
  
resetSignBtn=() =>{
    this.signCanvas.current.clear();
}
  
//给画布添加背景色，只需要在画布打开是拿到画布，给画布添加颜色即可
  
async signBtn(type) {
    await this.setState({signModal: true});
　　　//得到画布
    let canvas = this.signCanvas.current._canvas;
    if (canvas.getContext) {
        let ctx = canvas.getContext('2d');
        ctx.fillStyle = "#fff";//添加颜色
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
}
  
  
  
 　　　　<Modal
                title={'签名'}
                visible={signModal}
                onCancel={this.hideSignModal}
                footer={[
                    <Button key={'sign_rep' + Math.random()} onClick={this.resetSignBtn}>重签</Button>,
                    <Button key={'sign_sub' + Math.random()} type='primary' onClick={this.confirmSignBtn}>确定</Button>,
  
                ]}
                destroyOnClose={true}
                centered={true}
                width={1000}
       >

　　{/*这个组将的class样式的宽高，要与属性width，height一样，不然可能出现画线轨迹与光标偏移量太大*/}

1	`<SignatureCanvas ref={this.signCanvas} penColor='#000'` `<br>　　　　　　　　　　canvasProps={{ width:900,height:400,className:` `'sigCanvas'}} /> <br>　　　　</Modal>`

　demo：https://agilgur5.github.io/react-signature-canvas/