vue vue-esign签字板的demo

vue vue-esign签字板的demo

目录

vue vue-esign签字板demo

安装

在main.js中全局引用

vue移动端电子签名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.webp", { 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 自行美化,相信大家都没得问题

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读