乐趣区

关于react.js:React实现在线签名组件

需要背景

某我的项目须要实现在线电子签名性能,其次要性能点如下

  1. 能够用鼠标在指定区域中电子签名
  2. 签名区域能够实现自适应大小
  3. 签名后的后果能够以二进制流的形式上传到服务器,不便电子签章

实现的成果如下

筹备工作

须要提前装置如下的组件

  1. react-signature-canvas 参考地址
  2. resize-observer-polyfill 参考地址
    装置指令

    npm i -S react-signature-canvas
    npm install resize-observer-polyfill --save-dev

    自适应性能实现

    <div className={styles.div_signature} ref={this.parentRef}>
           <SignatureCanvas penColor="black"
             canvasProps={canvasProps}
             ref={(ref) => {this.canvas = ref;}}
           />
    </div>

    SignatureCanvas 为签名区域,父级 div 获取到 ref, 并通过 resize-observer-polyfill 组件计算其高度。其实现函数如下:

    parentRef = (cw) => { // containerWrap
     if (cw) {const ro = new ResizeObserver((entries, observer) => {
         // eslint-disable-next-line no-restricted-syntax
         for (const entry of entries) {const { left, top, width, height} = entry.contentRect;
           this.setState({cvWidth: width,});
         }
       });
       ro.observe(cw);
     }
      };

    签名后果上传

    在签名组件中应用如下的代码获取签名图片并通过父组件的 submitSign 提交到父组件
    其代码如下:

    const {submitSign} = this.props;
     const imgUrl = this.canvas.toDataURL('image/png');
     submitSign(imgUrl);

父组件获取到图片后即可通过 fetch 上传到服务器

const fileObj = dataURLtoFile(signImgURL, 'sign.png');
      const formData = new FormData();
      formData.append('file', fileObj);
      formData.append('action', 'UploadVMKImagePath');
      fetch(`${uploadUrl}api/files/upload`, {
        method: 'post',
        body: formData,
      }).then(response => response.json())
        .then((res) => {console.log(res);
        });
退出移动版