vue实现电子签名近些年，随着移动端开发越来越热门，各种需求也随波而来。在近期的开发中，我就接到一个实现电子签名的业务。

近些年，随着移动端开发越来越热门，各种需求也随波而来。在近期的开发中，我就接到一个实现电子签名的业务。

而且在开发过程中，往往需求来的是比较突然的，上线也是比较急的，那么为了快速的完成开发，我们应该怎样去实现一个电子签名呢？

其实呢也不用太过担心，因为完全用不着我们自己去手写一个电子签名，vue早就已经给我们封装好了，就等着我们去用了。当然，有人会说，只会用别人的，自己压根儿就不懂原理，这样会比较low，但要是为了快速开发，人家有现成的插件，我们何乐而不为呢？（事后自己研究研究也是可以的嘛）

接下来就分享两种，vue实现电子签名的插件。废话不多说，直接上代码

那么怎么使用这些插件呢？管他呢，先把使用插件那一套998套餐，给他来一套，先！

    npm install xxxx 
    import xxx form xxx

第一种 vue-esign

安装

npm install vue-esign

使用

全局注册

//main.js
import vueEsign from 'vue-esign'

Vue.use(vueEsign)

局部注册

// .vue 文件
import vueEsign form 'vue-esign'

components:{vueEsign}

在templete中使用

// html
<vue-esign
      ref="esign"
      :width="370"
      :height="600"
      :isCrop="isCrop"
      :lineWidth="lineWidth"
      :lineColor="lineColor"
      :bgColor.sync="bgColor"
    />
    <span slot="footer">
      <button @click="handleGenerate" type="primary">生成签字图片</button>
      <button @click="handleReset">清空画板</button>
    </span>

// js
 handleReset() {
      this.$refs.esign.reset();
    },
    // 生成签字图  保存按钮
    handleGenerate() {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg = res;
        })
        .catch((err) => {
          console.log(err);
        });
}

// data 数据
      lineWidth: 6, // 画笔的线条粗细
      lineColor: "#000000", // 画笔的颜色
      bgColor: "", // 画布的背景颜色
      resultImg: "", // 最终画布生成的base64图片
      isCrop: true, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
      isClearBgColor: false, //是否在清空时，也清空画布背景
      format: "image/png", //生成图片的格式  image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)
      quality: 0.92, //生成图片的质量 0-1

自带的两个方法（通过ref调用，所以最好给组件写上ref属性）

this.$refs.esign.reset(); 清空画布
this.$refs.esign.generate() 生成图片

方法会返回一个promise ，用.then拿到返回的数据，返回的数据是一个base64位的图片地址
```
this*.$refs.esign.generate().then(res) =>{
     const img = res
}
```
或者使用async await
```
async fn(){
 const img = await this.$refs.esign.generate()
}
```

第二种 sign-canvas

安装

npm install sign-canvas

使用

全局注册

//main.js
import SignCanvas from 'sign-canvas

Vue.use(SignCanvas)

局部注册

// .vue 文件
import SignCanvas form 'sign-canvas'

components:{SignCanvas}

在templete中使用

// html
<sign-canvas
      class="sign-canvas"
      ref="SignCanvas"
      :options="options"
      v-model="value"
    />
    <div class="btnList">
      <button
        @click="canvasClear()"
      >
        清空
      </button>
      <button
        @click="saveAsImg()"
      >
        保存
      </button>

      <button
        @click="downloadSignImg()"
      >
        下载
      </button>
    </div>

// js
 /**
     * 清除画板
     */
    canvasClear() {
      this.$refs.SignCanvas.canvasClear();
    },

    /**
     * 保存图片
     */
    saveAsImg() {
      this.img = this.$refs.SignCanvas.saveAsImg();
      console.log(this.img);
    },

    /**
     * 下载图片
     */
    downloadSignImg() {
      this.$refs.SignCanvas.downloadSignImg();
    },

// data 数据
     value: null, //画布内的值 
      options: {
        isFullScreen: true, //是否全屏手写 [Boolean] 可选
        isFullCover: false, //是否全屏模式下覆盖所有的元素 [Boolean] 可选
        isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
        lastWriteSpeed: 1, //书写速度 [Number] 可选
        lastWriteWidth: 2, //下笔的宽度 [Number] 可选
        lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
        lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 375, //canvas宽高 [Number] 可选
        canvasHeight: 450, //高度  [Number] 可选
        isShowBorder: true, //是否显示边框 [可选]
        bgColor: "#fff", //背景色 [String] 可选
        borderWidth: 1, // 网格线宽度  [Number] 可选
        borderColor: "#000", //网格颜色  [String] 可选
        writeWidth: 5, //基础轨迹宽度  [Number] 可选
        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
        writeColor: "#101010", // 轨迹颜色  [String] 可选
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
      },

自带的三个方法（通过ref调用，所以最好给组件写上ref属性）

this.$refs.SignCanvas.canvasClear(); 清空画布
this.$refs.SignCanvas.saveAsImg(); 保存图片，返回值是图片的base64地址
this.$refs.SignCanvas.downloadSignImg(); 下载图片，根据配置(options)中的imgType确定图片的后缀

两者的区别

配置上的区别
- sign-canvas的配置功能比较多，且配置项是一个对象
- vue-esign配置功能比较少，且配置项都是单个的，都是基础数据类型

功能上的区别

sign-canvas可以直接调用内置的方法去下载签名图片

vue-esign没有内置下载方法得手写一个(常用的通过a标签实现)

 let a = document.createElement("a");
      a.href = this.img; //图片base64地址
      a.download = "down.png"; //下载时 图片命名   
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);

两者都是基于 canvas 封装于vue

我个人比较推荐sign-canvas,因为在开发中，避免不了调样式，sign-canvas配置项多，能更加快速的调试样式