一.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、将签名信息图片展示
使用此插件，转为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一样，不然可能出现画线轨迹与光标偏移量太大*/}
<SignatureCanvas ref={this.signCanvas} penColor='#000' <br> canvasProps={{ width:900,height:400,className: 'sigCanvas'}} /> <br> </Modal>
demo：https://agilgur5.github.io/react-signature-canvas/
