记录一次Vue中用Canvas制作一个签名面板（插件）

codernmx

于 2021-08-13 21:57:59 发布

阅读量336

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_31754591/article/details/119684698

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中集成vue-esign库，实现电子签名功能。通过在main.js中引入vue-esign，并在组件中配置相关属性，如宽度、高度、线条颜色等，可以创建并展示画板。同时，提供了清空画板和生成图片的方法。源代码可在GitHub上找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

npm install vue-esign --save

在main.js中引入

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

    <div class="box">
      <vue-esign
        class="back"
        ref="esign"
        :width="500"
        :height="400"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      />
      <img
        class="img"
        :src="resultImg"
        alt=""
      />
    </div>
    <button @click="handleReset">清空画板</button>
    <button @click="handleGenerate">生成图片</button>

export default {
  name: 'HelloWorld',
  data () {
    return {
      lineWidth: 3,
      lineColor: 'red',
      bgColor: '',
      resultImg: '',
      isCrop: false
    }
  },
  methods: {
    handleReset () {
      this.$refs.esign.reset()
      this.resultImg = ''
    },
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        console.log(res)
        this.resultImg = res
      }).catch(err => {
        console.log(err)
      })
    }
  },
}

github地址：https://github.com/JaimeCheng/vue-esign