Comparison of handwritten signature vue-esign and vue-signature-pad

vue-esign and vue-signature-pad

To undertake the h5 project at work, it is necessary to realize the function of handwritten signature, which canclear and saveFor handwritten signatures, we investigated two signature plugin links: vue-esign and vue-signature-pad

vue-esign: https://gitee.com/zhuhj7001/vue-esign
vue-signature-pad: https://github.com/neighborhood999/vue-signature-pad

First, let’s briefly introduce the similarities and differences between the two plugins:

Same point

Compatible with PC and Mobile;
Support both vue2 and vue3;
The canvas adapts to screen size changes (the canvas does not need to be reset when the window is zoomed and the screen is rotated, and the coordinates are automatically corrected);
Customize canvas size (export image size), brush thickness, color, canvas background color

difference

vue-signature-pad because he has pen pressure! Similar to the pressure sensitivity of digital tablet drawing, the brush lines display different thicknesses according to the user's force, not a fixed thickness, and vue-esign does not support this function;
Vue 2 and Vue 3 of vue-signature-pad depend on different installation versions; vue-esign is backward compatible and does not need to distinguish between Vue 2 and Vue 3;
vue-signature-pad supports single-step withdrawal

In summary, vue-signature-pad has more functions

Selection and use

Because it is a vue3 project, and does not need pen pressure control, and only needs to be cleared and saved, I chose vue-esign

Dependency installation

npm install vue-esign --save

Introduce vue-esign

// Local
import import vueEsign from 'vue-esign';

html part


<nut-popup
    v-model:visible="state.showPopup"
    :destroy-on-close="false"
    closeable
    pop-class="sign-form-popup"
    position="bottom"
    round
  >
    <div class="form-item-popup-content">
      <div class="title">设计师签字</div>
      <div class="form-item-popup-operate">
        <vue-esign
          class="sign-canvas"
          ref="esignRef"
          style="height: 390px !important;"
          :lineWidth="state.lineWidth"
          :lineColor="state.lineColor"
          v-model:bgColor="state.bgColor"
          :isClearBgColor="false"
        />
        <div class="btn">
          <nut-button type="default" @click="handleReset">清除签字</nut-button>
          <nut-button type="primary" @click="handleGenerate">保存</nut-button>
        </div>
      </div>
    </div>
  </nut-popup>

js part

nut-popup is a JD-style lightweight mobile component library nutui component popup layer

// 局部
import vueEsign from 'vue-esign';
// 页面来源
import {
    
     inject, nextTick, reactive, ref, watch } from 'vue';
const state = reactive({
    
    
  showPopup: false,
  resultImg: '',
  lineWidth: 4,
  lineColor: '#000000',
  bgColor: '#f5f5f5',
});
// sign是签名弹窗，监听改变width和高是签字区域和显示可视位置对应
watch(
  () => state.showPopup,
  (val, oldVal) => {
    
    
    if (val) {
    
    
      nextTick(()=>{
    
    
        let canvas = document.querySelector('.sign-canvas');
        canvas.height = 390;
        canvas.width = window.innerWidth;
      })

    }
  }
);
const esignRef = ref();
function handleReset() {
    
    
  // 清除
  esignRef.value.reset();
}
function handleGenerate() {
    
    
  esignRef.value
    .generate({
    
     format: 'image/jpeg', quality: 2 })
    .then(res => {
    
    
      state.resultImg = res;// base64图片
      handleReset();
    })
    .catch(err => {
    
    
    	// 错误提示信息
     alert('请签字');
    });
}

<style lang="scss" scoped>
.form-item-popup-operate {
      
      
     width: 100%;
   }
   .sign-canvas {
      
      
  margin-top: 6px;
  margin-bottom: 60px;
  background-color: #f5f5f5;
  canvas {
      
      
    width: 100%;
    height: 390px;
  }
}
</style>

final effect

achieve effect