vue中实现签名画板

特意封装成了一个组件，签名之后会生成一张图片
signBoard.vue

template>
  el-drawer title="签名" :visible.sync="isShowBoard" append-to-body :show-close="false" :before-close="closeBoard" size="50%" @close="closeBoard">
    div class="drawer-b服务器托管网ody">
      el-row v-loading="loading">
        vue-sign ref="esign" :width="800" :height="300" :is-crop="isCrop" :line-width="lineWidth" :line-color="lineColor" />
        button class="mt20" @click="handleReset">清空画板/button>
      /el-row>
    /div>
    div class="drawer-footer">
      el-button @click="closeBoard">关 闭/el-button>
      el-butto服务器托管网n type="primary" :loading="loading" @click="handleSign">签 名/el-button>
    /div>
  /el-drawer>

/template>

script>
import vueSign from 'vue-esign'
import oss from '@/utils/oss'
const baseUrl = process.env.VUE_APP_OSS_URL
export default {
  components: { vueSign },
  props: {
    folder: {
      type: String,
      default: ''
    },
    isShowBoard: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '#eee',
      fileList: [],
      signSrc: '',
      isCrop: false
    }
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset()
      this.$refs.esign.$el.style.background = '#eee'
    },
    async handleGenerate() {
      try {
        const res = await this.$refs.esign.generate()
        //服务器上传
        const result = await oss.dataURLtoFile(res, this.folder)
        this.signSrc = baseUrl + '' + result.fileUrl
        this.$emit('sign', this.signSrc)
      } catch (e) {
        this.$message.error('请先进行手签')
      }
    },
    handleSign() {
      this.handleConfirm(() => this.handleGenerate())
    },
    closeBoard() {
      this.handleReset()
      this.$emit('update:isShowBoard', false)
    }
  }
}
/script>

使用

  sign-board
    :folder="CONSTANT.EMPLOYEE_CHECK"
    :is-show-board.sync="isShowBoard"
    :loading="loading"
    @sign="getSignSrc"
  />
    getSignSrc(src) {
    },

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: TLS 加速技术：Intel QuickAssist Technology（QAT）解决方案

作者：vivo 互联网服务器团队- Ye Feng 本文介绍了 Intel QAT 技术方案，通过Multi-Buffer技术和QAT硬件加速卡的两种方式实现对TLS的加速 一、背景 当前 TLS 已经成为了互联网安全的主要传输协议，TLS带来更高的安全性的同…