Vue使用sign-canvas實現(xiàn)在線手寫簽名的實例

更新時間：2022年05月19日 09:04:57 作者：船長在船上

sign-canvas?一個基于?canvas?開發(fā),封裝于?Vue?組件的通用手寫簽名板(電子簽名板),支持?pc?端和移動端，本文給大家分享Vue使用sign-canvas實現(xiàn)在線手寫簽名，感興趣的朋友一起看看吧

更新日志

v1.1.4 功能更新：增加全屏手寫方案，可以通過 options.isFullScreen,和 options.isFullCover 屬性控制,全屏模式下 canvasWidth 和 canvasHeight 屬性設(shè)置無效,感謝網(wǎng)友 AFelicity”的建議與反饋。

v1.1.3 功能更新：增加高倍屏下，繪制會模糊的適配方案，可以通過 options.isDpr 屬性進行開啟或者關(guān)閉，感謝網(wǎng)友“Wong-Harry”的建議與反饋。

安裝

npm install --save sign-canvas

全局方式

main.js：

import SignCanvas from "sign-canvas";
Vue.use(SignCanvas);

局部方式

//局部注冊模板中引入

import SignCanvas from "sign-canvas";
components: {
? ? SignCanvas;
}

完整代碼：

<template>
  <div class="sign">
    <sign-canvas
      class="sign-canvas"
      ref="SignCanvas"
      :options="options"
      v-model="value"
    />
    <div class="btnList" ref="btnList">
      <van-button type="danger" v-throttle size="small" @click="clearSignImg">清空</van-button>
      <van-button type="primary" v-throttle size="small" class="ml30 mr30" @click="saveSignImg">保存</van-button>
      <van-button type="primary" v-throttle size="small" @click="back">返回</van-button>
    </div>
  </div>
</template>
<script>
//接口引入
import { signShipmentsContract } from "../../api/userMG";
export default {
  name: "signDialog",
  //props: {
    //組件傳遞的值
    //visible: {
      //type: Boolean,
      //default: false,
    //},
    //圖片信息Base64
    //src: {
      //type: String,
      //default: null,
    //},
  //},
  data() {
    return {
      value: null,
      //配置
      options: {
        lastWriteSpeed: 1, //書寫速度 [Number] 可選
        lastWriteWidth: 2, //下筆的寬度 [Number] 可選
        lineCap: "round", //線條的邊緣類型 [butt]平直的邊緣 [round]圓形線帽 [square]	正方形線帽
        lineJoin: "round", //線條交匯時邊角的類型  [bevel]創(chuàng)建斜角 [round]創(chuàng)建圓角 [miter]創(chuàng)建尖角。
        canvasWidth: "750", //canvas寬高 [Number] 可選
        canvasHeight: "500", //高度  [Number] 可選
        isShowBorder: false, //是否顯示邊框 [可選]
        bgColor: "#fcc", //背景色 [String] 可選
        borderWidth: 1, // 網(wǎng)格線寬度  [Number] 可選
        borderColor: "#ff787f", //網(wǎng)格顏色  [String] 可選
        writeWidth: 5, //基礎(chǔ)軌跡寬度  [Number] 可選
        maxWriteWidth: 30, // 寫字模式最大線寬  [Number] 可選
        minWriteWidth: 5, // 寫字模式最小線寬  [Number] 可選
        writeColor: "#101010", // 軌跡顏色  [String] 可選
        isSign: true, //簽名模式 [Boolean] 默認(rèn)為非簽名模式,有線框, 當(dāng)設(shè)置為true的時候沒有任何線框
        imgType: "png", //下載的圖片格式  [String] 可選為 jpeg  canvas本是透明背景的
      },
    };
  },
  created() {
  },
  mounted() {
    let windowHeight = document.documentElement.clientHeight;
    let btnList = this.$refs.btnList.offsetHeight;
    let windowWidth = document.documentElement.clientWidth;
    this.options.canvasWidth = windowWidth;
    this.options.canvasHeight = windowHeight - btnList;
    // console.log(this.$refs.SignCanvas.saveAsImg(),"this.$refs.SignCanvas.saveAsImg()")
  },
  methods: {
    //清除畫板
    clearSignImg() {
      this.$refs.SignCanvas.canvasClear();
    },
    // 保存圖片
    saveSignImg() {
      console.log(this.value, "value");
      if (this.value == null) {
        this.$toast.fail("請先簽名");
      } else {
        this.$dialog
          .confirm({
            title: "簽名確認(rèn)",
            message: "請先確認(rèn)簽名是否正確,一旦簽名成功，無法撤銷",
          })
          .then(() => {
            console.log(1);
            const img = this.$refs.SignCanvas.saveAsImg();
            this.signShipmentsContractFun(img);
          })
          .catch(() => {
            console.log(2);
            this.$toast.fail({
              message: "簽名取消,請重新簽名",
              onClose: () => {
                this.$refs.SignCanvas.canvasClear();
              },
            });
          });
      }
    },
    //下載圖片/
    // downloadSignImg() {
    //   this.$refs.SignCanvas.downloadSignImg();
    // },
    back() {
      this.$router.back(-1);
    },
    // 簽名
    signShipmentsContractFun(img) {
      let params = {
        contractId: this.$route.query.contractId,
        carrierContractPicture: img,
        contractInfoDto: JSON.parse(this.$route.query.contractList),
      };
      signShipmentsContract(params)
        .then((res) => {
          console.log(res, "簽名");
          if (res.code == 200) {
            this.$toast.success({
              message: "保存成功",
              onClose: () => {
                this.$router.back(-1);
              },
            });
          } else {
            this.$toast.fail(res.msg);
          }
        })
        .catch((error) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.btnList {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px 0;
  display: flex;
  justify-content: center;
}
.sign-canvas {
  display: block;
  margin: 0 auto;
  background: #F1F1F1 !important;
  border-radius: 8px;
}
</style>

到此這篇關(guān)于Vue使用sign-canvas實現(xiàn)在線手寫簽名的文章就介紹到這了,更多相關(guān)vue在線手寫簽名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: