vueesign签字板的使用步骤小demo

问题描述

在我们开发项目中，特别是流程审批类的项目，最后一步会提交审核，审核员看完相应信息以后，没问题就会签字通过审批。所以就要用到本篇文章中的vue-esign签字技术。

vue-esign技术是基于html5代新特性，canvas技术进行的组件化封装，在那个页面需要用到签字技术，只需要引入vue-esign组件即可。这个组件其实也是可以理解为是一个插件。本篇文章记录一下这个插件的用法，忘了的时候回来看看。我们先看一下最终的demo效果图

vue-esign效果图

右边控制台输入的就是生成的签名画布图片转成base64格式的图片信息

使用步骤

第一步，下载并注册vue-esign插件

下载： cnpm i vue-esign --save

main.js中引入并注册这个插件：

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

第二步，使用vue-esign插件

<script>
export default {
  name: "App",
  data() {
    return {
      dialogVisible: false, // 弹框是否开启
      lineWidth: 6, // 画笔的线条粗细
      lineColor: "#000000", // 画笔的颜色
      bgColor: "", // 画布的背景颜色
      resultImg: "", // 最终画布生成的base64图片
      isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
    };
  },
  methods: {
    // 清空画板
    handleReset() {
      this.$refs.esign.reset();
    },
    // 生成签字图
    handleGenerate() {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg = res;
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
          this.$message({
            type: "warning",
            message: "请签名后再生成签字图片",
          });
        });

      // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
      // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
      setTimeout(() => {
        // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
        // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
        console.log('我是签字后的base64图片',this.resultImg);
      }, 200);
      this.dialogVisible = false;
    },
  },
};
script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100%;
  padding: 60px;
  .checkMan {
    width: 400px;
    height: 360px;
    text-align: center;
    border: 1px solid #e9e9e9;
    padding-top: 40px;
    h2 {
      margin-bottom: 20px;
    }
    .el-button {
      margin-bottom: 20px;
    }
    img {
      width: 100%;
      height: 200px;
    }
  }
}
/deep/ .el-dialog__body {
  // 设置一下签字区域的虚线边框
  .mySign {
    border: 1px dashed #000;
  }
}
style>

其实用法也很简单，细节的注释写在代码里面了。记录一下

最后附上官方的npmjs文档链接讲解，传送门如下： www.npmjs.com/package/vue…