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

npm install react-canvas-draw --save

import CanvasDraw from "react-canvas-draw";

3、使用组件

signCanvas= React.createRef();

设置签名组件的属性

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

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

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

5、清空画布

this.signCanvas.current.clear();
6、将签名信息图片展示

{
    title: '签名',
    dataIndex : 'signImg',
    fixed: 'left',
    align: 'center',
    width:150,
    maxWidth:150,
    _resizeable: true,
    ellipsis: true,
    render : (value,record,index) =>{
        return <>
            <img src={value} style={{height:60}}/>
        </>;
    }
}

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

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

react-signature-canvas

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

示例：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

//先安装   　　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>