vue vue-esign签字板的demo怎么实现

本篇内容主要讲解“vue vue-esign签字板的demo怎么实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue vue-esign签字板的demo怎么实现”吧!

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) => {          // 转成文件          var file = _this.dataURLtoFile(res);            console.log("file:",file )          //调用接口          uploadFile(file).then(({ data }) => {           console.log("data:",data)          });        })        .catch((err) => {          _this.$toast(err);         });    },    // 将base64转换为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">确认</button>        </div>        <!-- <img :class="lazy" data-src="singImgUrl" alt /> -->    </div></template>

JS相关代码

<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"); //系统获取一个空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("请先签名再点击确定哦~");      } else {      this.singImgUrl = data;      ///data 就是得到的base64格式的签名图片，根据业务这里可上传到服务器      }      //     },}， mounted() { document.getElementById("canvasBox").addEventListener("touchmove", (e) => {      e.preventDefault();    });//阻止浏览器默认行为，防止签名浏览器下拉-------很重要    this.base64Id = "";    let _width = this.$refs.canvasBox.offsetWidth;    this.$refs.canvas.width = _width; //适配移动端宽度给canvas    draw = new Draw("canvas");    draw.init();  }}</script>

到此，相信大家对“vue vue-esign签字板的demo怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！