vue-esign簽字板的使用步驟小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插件

<template>
  <div id="app">
    <!-- 作使用el-dialog作簽字的彈框 -->
    <el-dialog title="簽字" :visible.sync="dialogVisible" width="800px" append-to-body>
      <!-- 使用這個簽名組件 -->
      <vue-esign
        ref="esign"
        class="mySign"
        :width="800"
        :height="300"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleGenerate" type="primary">生成簽字圖片</el-button>
        <el-button @click="handleReset">清空畫板</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 審查人點擊確認簽字按鈕觸發簽字 -->
    <div class="checkMan">
      <h2>審查人</h2>
      <el-button plain @click="dialogVisible = true" type="primary">點擊簽字</el-button>
      <!-- 用戶用來預覽簽字圖片的地方 -->
      <img :src="resultImg" alt="" />
    </div>
  </div>
</template>

<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文檔連接講解，傳送門以下：
https://www.npmjs.com/package...