电子签名实现--react canvas draw

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

简单介绍 && 快速上手

Installation

// 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"));

Props

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
  };

Functions

• getSaveData() 返回所画的图形的canvas编码
• loadSaveData(saveData: String, immediate: Boolean) 加载savaData对应的图形
• clear() 清空画布
• undo()撤销上一步操作

查看页面结构

• 可以看到页面生成了四个canvas，分别对应笔头drawing、画布grid、轨迹interface、模版temp

实现代码

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;

• 注：关于图片提交服务器，参照之前的群鱼湾公众号：
• 老鱼出品：如何快速开发并搭建静态图片服务
• 关于ipad/移动设备适配，各位看官不用着急，咱下回再聊～我要吃泡面了🍜
• 欢迎关注群鱼湾公众号，做有态度的技术人✨