React:使用手写签名插件:"react-canvas-draw"

1、安装
npm install react-canvas-draw --saveoryarn add react-canvas-draw

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}}/>
</>;
}
}
参考来源 https://www.jianshu.com/p/d36bf61d8034
 
 
posted @ 2020-04-15 10:07  孤灯伴码农  阅读(619)  评论(0编辑  收藏