pc签名插件 react-signature-canvas 的使用

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import SignaturePad from 'react-signature-canvas'

import styles from './styles.module.css'

class App extends Component {
  state = {trimmedDataURL: null}
  sigPad = {}
  clear = () => {
    this.sigPad.clear()
  }
  trim = () => {
    let aaa = this.sigPad.isEmpty();
    console.log('aaa',aaa);
    this.setState({trimmedDataURL: this.sigPad.getTrimmedCanvas()
      .toDataURL('image/png')})
  }
  render () {
    let {trimmedDataURL} = this.state
    return <div className={styles.container}>
      <div className={styles.sigContainer}>
        <SignaturePad canvasProps={{className: styles.sigPad}}
          ref={(ref) => { this.sigPad = ref }} />
      </div>
      <div>
        <button className={styles.buttons} onClick={this.clear}>
          Clear
        </button>
        <button className={styles.buttons} onClick={this.trim}>
          Trim
        </button>
      </div>
      {trimmedDataURL
        ? <img className={styles.sigImage}
          src={trimmedDataURL} />
        : null}
    </div>
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

效果图

API

• isEmpty() : boolean, self-explanatory
• clear() : void, clears the canvas using the backgroundColor prop
• fromDataURL(base64String, options) : void, writes a base64 image to canvas
• toDataURL(mimetype, encoderOptions): base64string, returns the signature image as a data URL
• fromData(pointGroupArray): void, draws signature image from an array of point groups
• toData(): pointGroupArray, returns signature image as an array of point groups
• off(): void, unbinds all event handlers
• on(): void, rebinds all event handlers
• getCanvas(): canvas, returns the underlying canvas ref. Allows you to modify the canvas however you want or call methods such as toDataURL()
• getTrimmedCanvas(): canvas, creates a copy of the canvas and returns a trimmed version of it, with all whitespace removed.
• getSignaturePad(): SignaturePad, returns the underlying SignaturePad reference.

插件地址

https://github.com/agilgur5/react-signature-canvas

在线测试地址

https://codesandbox.io/s/react-signature-canvas-example-m8vyu?file=/package.json