前端实现电⼦签名（vue组件）可直接复⽤（签字图⽚上传地址更改即可base64）
base64已转化为formData格式
<template>
<div>
<div class="hello" @touchmove.prevent>
<p class="text">请在下⽅区域签名</p>
<canvas id="canvas" width="350" height="350">Canvas画板</canvas>
<!--<img v-bind:src="url" alt="">-->
<p class="btn">
<button type="" v-on:click="clear">清屏</button>
<button v-on:click="saveA">取消</button>
</p>
</div>
<div class="btnA">
<button v-on:click="save">提交</button>
</div>
</div>
</template>
<script>
var draw;
var preHandler=function(e){};
class Draw {
constructor(el){
this.el = el;
this.canvas = ElementById(this.el);
< =Context('2d');
this.stage_info =BoundingClientRect();
this.path ={
beginX:0,
beginY:0,
endX:0,
endY:0,
};
}
init(btn){
var that =this;
console.log(this.canvas)
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;
? Selection().removeAllRanges()
: pty();
e.changedTouches[0].clientX -this.stage_info.left,
e.changedTouches[0].clientY -this.p
);
this.path.beginX = e.changedTouches[0].clientX -this.stage_info.left;
this.path.beginY = e.changedTouches[0].clientY -this.p;
this.path.beginY = e.changedTouches[0].clientY -this.p; this.canvas.addEventListener('touchmove',function(){
that.drawing(event);
});
}
drawing(e){
e.changedTouches[0].clientX -this.stage_info.left,
e.changedTouches[0].clientY -this.p
);
dX = e.changedTouches[0].clientX -this.stage_info.left; dY = e.changedTouches[0].clientY -this.p; stroke();
}
drawEnd(){
//uchmove = uchend = null
}
clear(btn){
}
save(){
return DataURL('image/png');
}
}
export default{
data(){
return{
msg:'Welcome to Your Vue.js App',
val:true,
url:'',
url1:'',
url2:'',
url3:'',
type:'',
};
},
mounted(){
this.$nextTick(()=>{
draw =new Draw('canvas');
draw.init();
})
},
created:function(){
let query =this.$route.query;
},
methods:{
clear:function(){
draw.clear();
},
/
/ base64转化blob
dataURItoBlob(base64Data){
var byteString;
if(base64Data.split(',')[0].indexOf('base64')>=0)
byteString =atob(base64Data.split(',')[1]);
else
byteString =unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia =new Uint8Array(byteString.length);
for(var i =0; i < byteString.length; i++){
ia[i]= byteString.charCodeAt(i);
ia[i]= byteString.charCodeAt(i);
}
return new Blob([ia],{type:mimeString});
},
isCanvasBlank:function(canvas){
var blank = ateElement('canvas');//系统获取⼀个空canvas对象      blank.width = canvas.width;
blank.height = canvas.height;
DataURL()== DataURL();//⽐较值相等则为空
},
save:function(){
var data = draw.save();
var c = ElementById('canvas');
if(this.isCanvasBlank(c)){
// alert('请绘制草图后再上传！');
this.$toast('请先签名')
return;
}
this.url = data;
let blob =this.dataURItoBlob(this.url);
const formimg =new FormData();
console.log('⽂件',this.file);
formimg.append('file',blob,'image.png');
this.$http.post('/file/upload',formimg)
.then( res=>{
let data=res.body
if(data.success){
let param={
createTime:'',
faceFile:this.$route.query.faceFile,
signFile:data.data.fileId,
signNo:this.$route.query.signNo
}
this.$http.post('/taskSign/uploadSign', param).then(res =>{
console.log('保存签名信息',res);
if(res.body.success){
this.$router.push({
path:'/electronicIframe',
query:{
signNo:this.$route.query.signNo,
type:'signsubmit'
}
})
}
})
electron vue教程
/
/  this.$router.push({
//    path:'/electronicSignature',
//    query:{
//      photourl:data.data.domain+data.data.fileId
//    }
//  })
}else{
this.$Message)
}
}).catch(err=>{
this.$toast('上传失败请重新拍摄上传')
})
},
saveA:function(){
this.$router.back();
},
},
};
</script>
</script>
<style scoped>
body {
background: #ffff;
}
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding:0;
}
li {
display: inline-block;
margin:010px;
}
a {
color: #f1860f;
}
#canvas {
background: none;
cursor:default;
height:350px;
width:100%;
}
#keyword-box {
margin:10px 0;
}
.btn button {
height:25px;
width:80px;
border:1px solid #f1860f;
color: #f1860f;
font-size:14px;
border-radius:15px;
background: none;
}
.hello {
border-radius:8px;
height:470px;
width:90%;
background: #ffff;
box-shadow:0px 0px 5px #f4f4f4;  margin: auto;
margin-top:25px;
border:1px solid #cccccc;
}
.
text {
margin-left:10px;
margin-top:20px;
font-size:16px;
height:40px;
line-height:40px;
color: #121212;
font-weight: bold;
}
.btn {
text-align: right;
margin-right:15px;
line-height:20px;
}
.btnA {
text-align: center;
margin-top:30px;
}
}
.btnA button {
height:35px;
width:88%;
color: white;
font-size:16px;
border-radius:15px;  background: #f1860f;  border: none;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。