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