canvas签名，并将签名保存在合同上vue，合同和签名合成⼀张图传给后台
⼦组建（将签名做成组建放在页⾯中）。**这⾥有⼀个问题****lineTo();**这个⽅法要根据合同的⾼度计算起点否则可能会出现名字写不出来的问题
<template>
<div>
<div
id="canvas"
ref="canvas"
>
<div
class="layer"
v-if="disPlay"
>
<!--原来这⾥做了⼀个功能toucheMove的时候遮罩层消失，需求想⼀出是⼀出，最后不要了六个路⼝以防万⼀-->
<!--<div @click="disPlay=false">请在此区域签名</div>-->
<div>请在此区域签名</div>
</div>
<p
id="clearCanvas"
ref="clearCanvas"
>清除</p>
<p
id="saveCanvas"
ref="saveCanvas"
>保存</p>
</div>
<div
class="mySign"
v-show="(isSign = false)"
>
<img
:src="signSrc"
alt=""
/>
</div>
</div>
</template>
<script>
export default{
props:{
imgHeight:{
type: Number,
default(){
return300;
},
},
},
data(){
return{
isSign:false,
signSrc:"",
disPlay:true,
isDraw:false,
};
},
created(){},
mounted(){
// console.log(this.imgHeight);
clearEl:this.$refs.clearCanvas,//清除按钮
saveEl:this.$refs.saveCanvas,//保存按钮
});
this.$refs.canvas.addEventListener("touchmove",Stop); },
methods:{
getStop(){
document.body.style.overflow ="hidden";
// veItem('base64')
},
lineCanvas(obj){
this.linewidth =2;
this.background ="#fff";
for(var i in obj){
this[i]= obj[i];
}
// console.log(this.el)
this.canvas = ateElement("canvas");
this.el.appendChild(this.canvas);
< =Context("2d");
this.canvas.width =this.el.clientWidth;
this.canvas.height =this.el.clientHeight;
svg和canvas的区别
//开始绘制
this.canvas.addEventListener(
"touchstart",
function(e){
/
/ console.log(e);
e.changedTouches[0].pageX,
e.changedTouches[0].pageY -this.imgHeight
);
}.bind(this),
false
);
//绘制中
this.canvas.addEventListener(
"touchmove",
function(e){
// 设置⼀个变量判断是否进⾏签名
this.isDraw =true;
e.changedTouches[0].pageX,
e.changedTouches[0].pageY -this.imgHeight
);
}.bind(this),
false
)
;
//结束绘制
this.canvas.addEventListener(
"touchend",
function(){
let imgBase64 =DataURL();
//console.log(imgBase64);
);
//清除画布
this.clearEl.addEventListener(
"click",
function(){
// 画布被清除变量修改
this.isDraw =false;
}.bind(this),
false
);
//保存图⽚，直接转base64
this.saveEl.addEventListener(
"click",
function(){
if(this.isDraw){
document.body.style.overflow ="scroll";
let imgBase64 =DataURL();
// console.log(imgBase64);
this.signSrc = imgBase64;
// sessionStorage.setItem("base64", imgBase64);
this.isSign =true;
this.addComment();
}else{
this.$dialog.alert({ title:"温馨提⽰", message:"请签名"});
return;
}
}.bind(this),
false
);
},
addComment(){
//将base64的data传给⽗组建进⾏展⽰，为合同和签名合成作准备this.$emit("addComment",this.signSrc);
},
},
destroyed(){
document.body.style.overflow ="scroll";
},
};
</script>
<style scoped>
.layer {
width:100%;
position: absolute;
bottom:25%;
pointer-events: none;
}
.
layer > div:nth-of-type(1){
width:95%;
height:13rem;
margin:0 auto;
border:1px dashed rgb(170,170,170);
line-height:13rem;
font-size:1rem;
font-weight:500;
color: #a2a2a2;
}
</style>
<style scoped lang="less">
#canvas {
//  position: absolute;
//  z-index: 10;
// }
#clearCanvas {
width:50%;
height:40px;
line-height:40px;
text-align: center;
position: absolute;
bottom:0;
left:0;
border:1px solid #dedede;
z-index:1;
}
#saveCanvas {
width:50%;
height:40px;
line-height:40px;
text-align: center;
position: absolute;
bottom:0;
right:0;
border:1px solid #dedede;
z-index:1;
}
}
.mySign {
width:100%;
height:300px;
img {
width:100%;
height:300px;
}
}
.test {
width:100%;
height:200px;
font-size:14px;
font-weight:600;
text-align: center;
}
</style>
⽗组建
<template>
<div class="gzs">
<div
class="outs"
ref="table"
>
<!--合同图⽚替换成你⾃⼰的-->
<img
ref='img'
src="../assets/img/gzs.png"
/
>
<div
v-if="ysShow==false"
class="sigimg"
>
<img
</div>
<signature
v-if="ysShow"
:imgHeight="imgHeight"
@addComment="addComment"
></signature>
<div
class="btn"
v-if="ysShow==false"
>
<div @click="submit">提交</div>
</div>
<!--<img
:src="jietuimg"
alt=""
>-->
</div>
</template>
<script>
import signature from"@/components/signature";
import html2canvas from"html2canvas";
const imageConversion =require("image-conversion");
export default{
components:{ signature },
data(){
return{
imgHeight:0,
ysShow:true,
imgUrl:"",
jietuimg:"",
};
},
mounted(){
this.$load=(e)=>{
this.imgHeight =Number(this.$refs.img.height);
};
this.$refs.table.addEventListener("touchmove",Start); },
methods:{
getStart(){
document.body.style.overflow ="scroll";
},
addComment(data){
this.imgUrl = data;
this.ysShow =false;
},
submit(){
this.$toast.loading({
mask:true,
duration:0,
message:"上传中",
});
html2canvas(this.$refs.table,{
useCORS:true,
backgroundColor:null,
}).then((canvas)=>{
const dataUrl = DataURL("images/jpg");
this.jietuimg = dataUrl;
// console.log(dataUrl)

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