React：使用手寫簽名插件：react-canvas-draw 和 react-signature-canvas

1、安裝
npm install react-canvas-draw --save

2、導入

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這個插件容易多，

示例：

 

　//先安裝

　　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一樣，不然可能出現畫線軌跡與光標偏移量太大*/}

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