vue 手签面板sign-canvas组件使用

最近移动端项目遇到需要客户手签的需求，几乎就是银行办理业务手签的场景，不过这次是移动端使用，搜了下还真有成熟的sign-canvas组件可以直接拿来即用，真香了。

先放一张效果动图

用的是sign-canvas组件，将用户手签的内容生成图片并保存、下载，使用非常简单。

准备工作：安装sign-canvas组件

npm install --save sign-canvas

安装完成后引入后声明使用，贴完整代码吧

ps：代码中关于参数和方法的介绍都十分全面了，具体可参考注释内容做取舍

<template>
  <div class="signPanel">
    <p>手签面板demo</p>
    <sign-canvas
      class="sign-canvas"
      ref="SignCanvas"
      :options="options"
      v-model="value"/>
    <div class="sign-btns">
      <span id="clear" @click="canvasClear()">清空</span>
      <span id="save" @click="saveAsImg()">保存</span>
      <span id="load" @click="downloadSignImg()">下载</span>
    </div>
  </div>
</template>

<script>
import SignCanvas from "sign-canvas";

export default {
  name: "signPanel", // 手签面板组件
  components: {
    SignCanvas
  },
  data() {
    return {
      value: null, // 图片base64内容
      options: {
        isFullScreen: false, //是否全屏手写 [Boolean] 可选
        isFullCover: false, //是否全屏模式下覆盖所有的元素 [Boolean] 可选
        isDpr: false,       //是否使用dpr兼容高倍屏 [Boolean] 可选
        lastWriteSpeed: 1,  //书写速度 [Number] 可选
        lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
        lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
        lineJoin: 'bevel',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 350, //canvas宽高 [Number] 可选
        canvasHeight: 370,  //高度  [Number] 可选
        isShowBorder: true, //是否显示边框 [可选]
        bgColor: '#fcc', //背景色 [String] 可选
        borderWidth: 1, // 网格线宽度  [Number] 可选
        borderColor: "#ff787f", //网格颜色  [String] 可选
        writeWidth: 5, //基础轨迹宽度  [Number] 可选
        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
        writeColor: '#101010', // 轨迹颜色  [String] 可选
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        imgType: 'png'   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
      }
    }
  },
  methods: {
    // 清除画板
    canvasClear() {
      this.$refs.SignCanvas.canvasClear();
    },
    // 保存图片
    saveAsImg() {
      const img = this.$refs.SignCanvas.saveAsImg();
      alert(`image 的base64：${img}`);
    },
    // 下载图片
    downloadSignImg() {
      this.$refs.SignCanvas.downloadSignImg();
    }
  }
}
</script>

<style lang="less" scoped>
.signPanel {
  padding: 20px;

  p {
    margin: 20px;
  }
}

.sign-btns {
  display: flex;
  justify-content: space-between;

  span {
    display: inline-block;
    width: 76px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border: 1px solid #eee;
    background: #e1e1e1;
    border-radius: 10px;
    text-align: center;
    margin: 20px auto;
    color: #333333;
    cursor: pointer;
  }
}
</style>