近期公司有一个小需求，在电子合同的基础上加上手写签名，并支持ipad适配，听到这里，我把ipad从泡面盖上拿了起来，打开了爱奇艺...??
好的，接下来让我给大家介绍一下这个高效简单易上手的组件 --- react-canvas-draw

// via npm
npm install react-canvas-draw --save  
// via yarn
yarn add react-canvas-draw
 Usage
import React from "react";
import ReactDOM from "react-dom";
import CanvasDraw from "react-canvas-draw";
ReactDOM.render(<CanvasDraw />, document.getElementById("root"));

static defaultProps = {
    onChange: null
    loadTimeOffset: 5,
    lazyRadius: 30,
    brushRadius: 12,
    brushColor: "#444",
    catenaryColor: "#0a0302",
    gridColor: "rgba(150,150,150,0.17)",
    hideGrid: false,
    canvasWidth: 400,
    canvasHeight: 400,
    disabled: false,
    imgSrc: "",
    saveData: null,
    immediateLoading: false,
    hideInterface: false
  };

class Index extends PureComponent {
  signCanvas = React.createRef();
    this.state = {
      imageBase64: null,
    };
 // 得到签名并转化为图片
  createSignImg = async () => {
    const signImg = this.signCanvas.current.canvas.drawing.toDataURL('image/png');
  };
    // 清空画布
  clearSign = async () => {
    this.signCanvas.current.clear();
  };
    // 将图片提交到后台
  submitSign = async () => {
    const { imageBase64 } = this.state;
    const form = new FormData();
    form.append('file', dataURLtoBlob(imageBase64), `${moment()}mySign.png`);
    const response = await request(`/img/upload?_csrf=${window._csrf}`, {
      method: 'POST',
      body: form,
    });
  render() {
    const { imageBase64 } = this.state;
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>电子手写签名</Card>
        <Card bordered={false}>
          <CanvasDraw
            ref={this.signCanvas}
            brushColor="#000"
            brushRadius={3}
            lazyRadius={10}
            canvasWidth="100%"
            canvasHeight={400}
          />
          <Button type="primary" onClick={this.createSignImg}>
            生成图片
          </Button>
          <Button type="primary" onClick={this.clearSign}>
            清空画布
          </Button>
          <Button type="primary"  onClick={this.submitSign}>
            提交
          </Button>
        </Card>
        <Card>
          生成的图片:
          {imageBase64 && <img src={imageBase64} alt="图片" />}
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default Index;