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 自行美化，相信大家都没得问题
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。