vue组件vue-esign实现电子签名


Posted in Vue.js onApril 21, 2022

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 :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>

CSS 自行美化,相信大家都没得问题。


Tags in this post...

Vue.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue动态绑定style样式
Apr 20 #Vue.js
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 #Vue.js
vue封装数字翻牌器
Apr 20 #Vue.js
vue特效之翻牌动画
Apr 20 #Vue.js
You might like
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
vue-router项目实战总结篇
2018/02/11 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python Pandas找到缺失值的位置方法
2018/04/12 Python
详解Python3 基本数据类型
2019/04/19 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
python线程里哪种模块比较适合
2020/08/02 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
Android面试题及答案
2015/09/04 面试题
后勤园长自我鉴定
2013/10/17 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
党内外群众意见范文
2015/06/02 职场文书
旗帜观后感
2015/06/08 职场文书