front/src/views/career/bigdataSelectCourse/electiveSign.vue

<template>
  <div>
    <div class="mb10 f16 jc-between fx-row">
      <p>请您签名</p>
      <el-button @click="handleReset">清空</el-button>
    </div>
    <vue-esign
      ref="esign"
      class="mySign"
      :width="1200"
      :height="500"
      :isCrop="isCrop"
      :lineWidth="lineWidth"
      :lineColor="lineColor"
      :bgColor.sync="bgColor"
    />
  </div>
</template>
<script>
import { saveEsign } from '@/api/webApi/elective/selected-subject'

export default {
  props: ['flowId'],
  data() {
    return {
      lineWidth: 3, // 画笔的线条粗细
      lineColor: '#000000', // 画笔的颜色
      bgColor: '', // 画布的背景颜色
      base64Img: '', // 最终画布生成的base64图片
      isCrop: false // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
    }
  },
  methods: {
    // 清空画板
    handleReset() {
      this.$refs.esign.reset()
    },
    saveElective(callback) {
      saveEsign({
        id: this.flowId,
        esignPath: this.base64Img
      }).then(res => {
        callback()
      })
    },
    // 生成签字图
    handleGenerate(callback) {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.base64Img = res
          this.saveElective(callback)
          // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
          // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
        })
        .catch((err) => {
          console.log(err)
          // 画布没有签字时会执行这里提示一下
          this.$message({
            type: 'warning',
            message: '请先签名'
          })
          return
        })
    }
  }
}
</script>

<style lang="scss" scoped>


// 设置一下签字区域的虚线边框
.mySign {
  border: 1px dashed #000;
}

</style>