快捷導(dǎo)航

vue?vue-esign簽字板的demo

更新時間：2022年04月21日 10:56:57 作者：今天代碼敲了嗎

這篇文章主要介紹了vue?vue-esign簽字板的實(shí)例講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue vue-esign簽字板demo

使用vue-esign讓用戶能夠在手動簽字并返回為base64或者file格式的文件流

安裝

npm install vue-esign --save

在main.js中全局引用

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

Demo

<template>
? <div class="esigns">
? ? <vue-esign
? ? ? ref="esign"
? ? ? style="
? ? ? ? width: 100%;
? ? ? ? height: 400px
? ? ? "
? ? ? :isCrop="isCrop"
? ? ? :lineWidth="lineWidth"
? ? ? :lineColor="lineColor"
? ? ? :bgColor.sync="bgColor"
? ? />
? ? <div class="btn">
? ? ? <van-button type="primary" @click="handleReset">重置</van-button>
? ? ? <van-button type="info" @click="handleGenerate">確定</van-button>
? ? </div>
? </div>
</template>

<script>
export default {
? name: "Esign",
? data() {
? ? return {
? ? ? lineWidth: 6,
? ? ? lineColor: "#000000",
? ? ? bgColor: "",
? ? ? resultImg: "",
? ? ? isCrop: false,
? ? };
? },
? methods: {
? ? handleReset() {
? ? ? // 清除
? ? ? this.$refs.esign.reset();
? ? },
? ? handleGenerate() {
? ? ? // 獲取base64
? ? ? var _this = this;
? ? ? _this.$refs.esign
? ? ? ? .generate()
? ? ? ? .then((res) => {
? ? ? ? ? // 轉(zhuǎn)成文件
? ? ? ? ? var file = _this.dataURLtoFile(res);
? ? ? ? ? ? console.log("file:",file )
? ? ? ? ? //調(diào)用接口
? ? ? ? ? uploadFile(file).then(({ data }) => {
? ? ? ? ? ?console.log("data:",data)
? ? ? ? ? });
? ? ? ? })
? ? ? ? .catch((err) => {
? ? ? ? ? _this.$toast(err);?
? ? ? ? });
? ? },
? ? // 將base64轉(zhuǎn)換為file
? ? dataURLtoFile(dataurl) {
? ? ? let arr = dataurl.split(",");
? ? ? let mime = arr[0].match(/:(.*?);/)[1];
? ? ? let bytes = atob(arr[1]); // 解碼base64
? ? ? let n = bytes.length;
? ? ? let ia = new Uint8Array(n);
? ? ? while (n--) {
? ? ? ? ia[n] = bytes.charCodeAt(n);
? ? ? }
? ? ? return new File([ia], "easign.jpg", { type: mime });
? ? },
? },
};
</script>

<style scoped>
.btn {
? display: flex;
? justify-content: space-around;
? margin-top: 10px;
}
</style>

vue移動端電子簽名demo

HTML

<template>
?? ?<div id='canvasBox'>
?? ??? ?<div ref="canvasBox">
?? ??? ? ? ? <canvas id="canvas" ref="canvas" height="150"></canvas>
?? ??? ?</div>
?? ??? ?<div class="row row-space-between">
?? ??? ? ?<button ?@click="onClickCancle">取消</button>
?? ??? ? ?<button @click="clear">重簽</button>
?? ??? ? ?<button @click="save">確認(rèn)</button>
?? ??? ?</div>
?? ??? ?<!-- <img :src="singImgUrl" alt /> -->
?? ?</div>
</template>

JS相關(guān)代碼

<script>
var draw;
var preHandler = function(e) {
  e.preventDefault();
};
class Draw {
  constructor(el) {
    this.el = el;
    this.canvas = document.getElementById(this.el);
    this.cxt = this.canvas.getContext("2d");
    this.stage_info = canvas.getBoundingClientRect();
    this.path = {
      beginX: 0,
      beginY: 0,
      endX: 0,
      endY: 0
    };
  }
  init(btn) {
    var that = this;
    this.canvas.addEventListener("touchstart", function(event) {
      document.addEventListener("touchstart", preHandler, false);
      that.drawBegin(event);
    });
    this.canvas.addEventListener("touchend", function(event) {
      document.addEventListener("touchend", preHandler, false);
      that.drawEnd();
    });
    this.clear(btn);
  }
  drawBegin(e) {
    var that = this;
    window.getSelection()
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    this.cxt.strokeStyle = "#BC4C2D";
    this.cxt.beginPath();
    this.cxt.moveTo(
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    );
    this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left;
    this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top;
    canvas.addEventListener("touchmove", function() {
      that.drawing(event);
    });
  }
  drawing(e) {
    this.cxt.lineTo(
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    );
    this.path.endX = e.changedTouches[0].clientX - this.stage_info.left;
    this.path.endY = e.changedTouches[0].clientY - this.stage_info.top;
    this.cxt.stroke();
  }
  drawEnd() {
    document.removeEventListener("touchstart", preHandler, false);
    document.removeEventListener("touchend", preHandler, false);
    document.removeEventListener("touchmove", preHandler, false);
    //canvas.ontouchmove = canvas.ontouchend = null
  }
  clear(btn) {
    this.base64Id = "";
    this.cxt.clearRect(0, 0, 500, 600);
  }
  save() {
    var blank = document.createElement("canvas"); //系統(tǒng)獲取一個空canvas對象
    blank.width = canvas.width;
    blank.height = canvas.height;
    let flag = canvas.toDataURL("image/png") == blank.toDataURL(); //比較值相等則為空;
    if (flag) {
      return "0";
    } else {
      return canvas.toDataURL("image/png");
    }
  }
}
export default {
  data() {
    return {
      singImgUrl: ""
    };
  },
  methods: {
	 clear() {
        draw.clear();
        this.base64Id = "";
	 },
   	save() {
      var data = "";
      data = draw.save();
      if (data == "0") {
      		this.$toast("請先簽名再點(diǎn)擊確定哦~");
      } else {
	      this.singImgUrl = data;
	      ///data 就是得到的base64格式的簽名圖片，根據(jù)業(yè)務(wù)這里可上傳到服務(wù)器
      }
      // 
    },
}，
 mounted() {
 document.getElementById("canvasBox").addEventListener("touchmove", (e) => {
      e.preventDefault();
    });//阻止瀏覽器默認(rèn)行為，防止簽名瀏覽器下拉-------很重要
    this.base64Id = "";
    let _width = this.$refs.canvasBox.offsetWidth;
    this.$refs.canvas.width = _width; //適配移動端寬度給canvas
    draw = new Draw("canvas");
    draw.init();
  }
}
</script>

CSS 自行美化，相信大家都沒得問題

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: