this.points = [] },
//确定签名
commit() {
this.imgUrl=this.$refs.canvasF.toDataURL();
this.imgUrlList.push(this.imgUrl)
if(this.imgUrlList.length>0){
this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
this.points = [] }
},
deleteAll(){
this.imgUrlList = [] },
// 提交签名给前一页
commitAll(){
// 用canvas合并多张图片的base64为一张图的base64
var canvas = document.createElement("canvas");
canvas.width = 75*this.imgUrlList.length;
canvas.height = 100;
var context = canvas.getContext("2d");
context.rect(0 , 0 , canvas.width , canvas.height);
context.fillStyle = "#fff";
context.fill();
var myImage = new Image();
myImage.crossOrigin = 'Anonymous';
// 当签名列表有值时
if(this.imgUrlList.length>0){
for(let i = 0;i<this.imgUrlList.length;i++){
myImage.src = this.imgUrlList[i] // 多张图片绘制成一张图片
context.drawImage(myImage , 50*i , 0 , 75 , 75); //context.drawImage(img,x,y,width,height);
// context.font = "60px Courier New";
// context.fillText("我是文字",350,450);
}
var base64 = canvas.toDataURL("image/jpg"); //"image/jpg" 这里注意一下
this.$router.go(-1) //要在bus之前写不然值传不回去
setTimeout(() => {
Bus.$emit('signImage',base64) //签名base64传给前一页
}, 300)
}
}
},
beforeDestroy(){
// 销毁bus
Bus.$off()
}
}
</script>
<style scoped lang="scss">
// 签名样式很重要，会影响触点位置
.sign{
width: 100%;
min-height: 100vh;
position: relative;
.header{
margin-bottom: 20px;
}
.tijiao-box{
width: 100%;
text-align: center;
}
.tijiao{
width: 90%;
height: 84px;
color: #fff;
border-radius: 2px;
background: #fa4b31;
box-shadow: 0 0 0px 1px #fa4b31;
font-size: 30px;
}
}
.signature{
width: 100%;
height: 50vh;
}
.imglist-box{
width: 90%;
margin: 0 auto;
margin-bottom: 20px;
position: relative;
}
.imgCanvas{
width: 150px;
height: 150px;
}
.resign{
width: 14%;
position: absolute;
top: 0;
right: 0;
}
.signatureBox {
width: 90%;
margin: 0 auto;
height: calc(100% - 50px);
box-sizing: border-box;
overflow: hidden;
background: #fff;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
}
.canvasBox {
width: 100%;
align-items: center;
box-sizing: border-box;
flex: 1;
}
canvas {
