<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HdhCms手机签名功能，带照片</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="images/signname.css">
</head>
<style type="text/css">
body{ background:#91C0EA;}
.alltable{float:left;width:100%;height:auto;border:0px;}
.canimg{float:left;width:90%;float:left;}
canvas {
border: 1px solid #eee;
background: #fefefe;
touch-action: none;float:right;
}
.hdhcmsan{
background: #eee;
border: 0px;
padding: 5px 10px;
border-radius: 5px;
}
.signarea{
background: #06549C;
color: #fff;
padding: 5px 10px;
position: fixed;
top: 20px;
font-size: 10px;
}
.signtitle{
float:right;
width:130px;
text-align:left;
font-size:14px;
color:#f00;font-weight:600;
}
.signdetail{font-size:10px;color:#f00;}
.signdetailcenter{color:#f00;text-align: center;}
.signbluebtn{
border: 0px;
padding: 5px 25px;
border-radius: 5px;
background:#064683;color:#fff;
}
.signorangebtn{
border: 0px;
padding: 5px 25px;
border-radius: 5px;
background:#F39A36;color:#fff;
}
.signbackbtn{
border: 0px;
padding: 5px 25px;
border-radius: 5px;
background:#fff;color:#888;
}
</style>
<body>
<table class="alltable">
<tr>
<td></td>
<td><div class="signtitle">当前签写：<span id="signword"></span></div></td>
</tr>
<tr>
<td><img src="images/headpicone.png" class="canimg"/></td>
<td style="width:220px;">
<canvas id="hdhcmssignname" width="220" height="150"></canvas>
<div class="signarea">
签名区
</div>
</td>
</tr>
<tr>
<td class="signdetailcenter">谭美丽</td>
<td class="signdetail">*请在操作台的签名版上进行签名，并保证签名的清晰完整</td>
</tr>
</table>
<br>
<div align="center">
<button id="clear" class="signbluebtn">重新签名</button>
<button id="save" class="signorangebtn">保存签名</button>
<button id="back" class="signbackbtn">返回</button>
</div>
<div id="hdhcmsimg"></div>
<script>
let name="谭美丽";
let sorti=0;
document.getElementById("signword").innerHTML=name.slice(0,1);
let nowsort=0;
const canvas = document.getElementById('hdhcmssignname');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// 获取canvas的左边界距离屏幕左边界的距离
const canvasOffsetX = canvas.getBoundingClientRect().left;
// 获取canvas的上边界距离屏幕左边界的距离
const canvasOffsetY = canvas.getBoundingClientRect().top;
function draw(e) {
if (!isDrawing) return;
ctx.beginPath();
ctx.lineWidth=5;
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.touches[0].clientX-canvasOffsetX, e.touches[0].clientY-canvasOffsetY);
ctx.stroke();
[lastX, lastY] = [e.touches[0].clientX-canvasOffsetX, e.touches[0].clientY-canvasOffsetY];
}
canvas.addEventListener('touchstart', (e) => {
isDrawing = true;
[lastX, lastY] = [e.touches[0].clientX-canvasOffsetX, e.touches[0].clientY-canvasOffsetY];
});
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', () => {
isDrawing = false;
});
document.getElementById('clear').addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
document.getElementById('save').addEventListener('click', () => {
nowsort++;
if(nowsort <= name.length){
if(nowsort < name.length){
document.getElementById("signword").innerHTML=name.substr(nowsort,1);
}
const dataURL = canvas.toDataURL('image/png');
// 使用这个dataURL做其他操作，比如下载或者上传
document.getElementById("hdhcmsimg").innerHTML+="<img src='"+dataURL+"' style='width:15%;height:auto;float:left;'>";
console.log(dataURL);
ctx.clearRect(0, 0, canvas.width, canvas.height);
}else{
alert("已经签完，这里可以写AJAX请求");
}
});
</script>
</body>
</html>
查看更多关于HdhCms手机签名功能，带照片的详细内容...