vue+canvas实现移动端手写签名

2020-06-16 06:59:27易采站长站整理

background-image: url('../../assets/img/signbg.png');
background-position: center center;
background-repeat: no-repeat;
background-origin: border-box;
background-size: 100% 100%;
}
.btnBox{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
.btn1{
width: 46%;
height: 84px;
line-height: 84px;
color: #fa4b31;
border-radius: 2px;
background: #fff;
border: 1px solid #fa4b31;
box-shadow: 0 0 0px 1px #fa4b31;
font-size: 30px;
text-align: center;
}
}
.btnBox button:first-of-type {
background: transparent;
border-radius: 4px;
height: 40px;
width: 80px;
font-size: 14px;
}
.btnBox button:last-of-type {
background: #71b900;
color: #fff;
border-radius: 4px;
height: 40px;
width: 80px;
font-size: 14px;
}
</style>

重置就是清除田字格当前字,确定就将字保存为一张图片base64排列在列表。

重签就是删除列表所有图片,提交就是将多张图合并为一张且传给前一页显示。