index.jsx

/**
 * 徐立
 * 2019年12月6日
 * 电子签章多功能封装
 */
import React, { Component } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import { message, Button } from 'antd';
import config from '@/webPublic/one_stop_public/config';
import reqwest from 'reqwest';

function dataURLtoBlob(toDataURL) {
  var arr = toDataURL.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

function blobToFile(Blob, fileName) {
  Blob.lastModifiedDate = new Date();
  Blob.name = fileName;
  return Blob;
}

export default class Index extends Component {
  constructor(props) {
    super(props);
    const value = props.value;
    this.state = {
      url: value,
    };
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };

  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;

      this.setState({ url: value });

      //
    }
  }

  sigCanvas = {
    clear: () => {
    },
    toDataURL: (param) => {
      return '';
    },
  };

  clear = () => {
    this.sigCanvas.clear();
  };
  delete = () => {
    if (!('value' in this.props)) {
      this.setState({ url: null });
    }
    this.triggerChange(null);
  };
  trim = () => {
    const formData = new FormData();
    const xx = dataURLtoBlob(this.sigCanvas.toDataURL('image/png'));
    const file = blobToFile(xx, 'sign.png');
    if (file == null) {
      return;
    }
    formData.append('file', file, 'sign.png');
    reqwest({
      url: config.uploadUrl,
      method: 'post',
      processData: false,
      data: formData,
      success: (url) => {
        if (!('value' in this.props)) {
          this.setState({ url: url });
        }
        this.triggerChange(url);

        message.success('保存成功');
      },
      error: (e) => {
        if (e.status == 200) {
          message.success('保存成功');
          if (!('value' in this.props)) {
            this.setState({ url: e.response });
          }
          this.triggerChange(e.response);
        } else {
          message.error('保存失败');
        }
      },
    });
    //let trimmedCanvas = this.sigCanvas.getTrimmedCanvas();
    // this.setState({trimmedDataURL: this.sigCanvas.toDataURL('image/png')})
  };

  render() {
    const {
      width,
      height,
    } = this.props;
    const { url } = this.state;
    return (
      <div id='canvas_signature' style={{
        width: '100%',
        height: '100%',
        marginLeft: 5,
      }}>
        <div
          style={{
            width: width,
            textAlign: 'center',
            height: height,
            border: '1px  dashed gray',
            position: 'relative',
          }}>
          {url ? (
            <img src={config.httpServer + url} style={{
              width: width,
              height: height,
            }} />
          ) : (
            <SignatureCanvas
              penColor='black'
              ref={(ref) => {
                this.sigCanvas = ref;
              }}
              canvasProps={{
                width: width || 400,
                height: height || 200,
                className: 'sigCanvas',
              }}
            />
          )}
          <div style={{
            position: 'absolute',
            left: 5,
            bottom: 5,
          }}>
            {url ? (
              <Button type='danger' size='small' onClick={this.delete}>
                重写
              </Button>
            ) : (
              <>
                <Button style={{ marginLeft: 12 }} type='danger' size='small' onClick={this.clear}>
                  清除
                </Button>
                <Button style={{ marginLeft: 12 }} onClick={this.trim} size='small' type='primary'>
                  保存
                </Button>
              </>
            )}
          </div>
        </div>
      </div>
    );
  }
}