vue-esign 签字组件

1、安装

npm install vue-esign --save

2、引入

// main.js
import vueEsign from 'vue-esign'
Vue.use(vueEsign)

3、参数

属性	说明	类型	默认值
width	画布宽度，即导出图片的宽度	Number	800
height	画布高度，即导出图片的高度	Number	300
lineWidth	画笔粗细	Number	4
lineColor	画笔颜色	String	#000
bgColor	画布背景色，为空时画布背景透明	String	-
isCrop	是否裁剪，在画布设定尺寸基础上裁掉四周空白部分	Boolean	false
isClearBgColor	清空画布时(reset)是否同时清空设置的背景色(bgColor)	Boolean	true
format	生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp	Number	image/png
quality	生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略	Number	1

4、完整代码

<template>
  <div class="content">
    <el-button @click="handleClear">清空</el-button>
    <el-button @click="handleSubmit">提交</el-button>
    <vue-esign ref="esign" :width="600" :height="300" :lineWidth="6"
      bgColor="#e6f7ff" :isClearBgColor="false" />
  </div>
</template>

<script>
  export default {
    name: 'test',
    methods: {
      // 清空画布
      handleClear() {
        this.$refs.esign.reset()
      },
      // 生成图片提交
      async handleSubmit() {
        let base64Url = await this.getSignUrl(this.$refs.esign)
        if (!base64Url) {
          return this.$message.warning('请先签字')
        }
        // todo提交表单
        this.$message.success('提交成功')
      },
      // 签字转为base64图片
      getSignUrl(refs) {
        return new Promise((resolve, reject) => {
          refs.generate().then(res => {
            resolve(res)
          }).catch(err => {
            resolve('')
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>