本篇内容主要讲解“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 :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怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
