React实现手写签名---react-signature-canvas

使用react-signature-canvas实现手写签名

1. 首先安装插件

npm install react-signature-canvas --save

2.组件实现

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import SignatureCanvas from "react-signature-canvas";
import "../style/electronicSignature.css";
class ElectronicSignature extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imgUrl: "",
    };
  }
  canvas = {
    clear: () => {},
    toDataURL: (param) => {
      return "";
    },
  };
  // 重置
  reset() {
    this.canvas.clear();
  }
  // 保存
  save() {
    const imgUrl = this.canvas.toDataURL("image/png");
    this.setState({ imgUrl: imgUrl });
  }
  render() {
    return (
      
        

           {
              this.canvas = ref;
            }}
          />
          

            
          
          

             this.reset()}>重置
             this.save()}>保存
          
        
      
    );
  }
}
export default ElectronicSignature;