前端实现电子签名
作者：程序员11 时间：2023-06-26 人气：272 QQ交流群\邮箱:1003265987@qq.com
前端实现电子签名
要展示的内容
百度网盘，下载地址：
链接：https://pan.baidu.com/s/1AiCXm8KRa73GBXhEAGpk_g
提取码：uxgf
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title></title>
<style>
.containers{
width:100%;
max-width: 550px;
margin: 0 auto;
/*padding:10px 2% 10% 2%;*/
/*height:750px;*/
position: relative;
background: #fff;
padding-bottom:60px;
}
.containers .title{
color: #333;
font-size:2em;
font-weight: normal;
margin-bottom:3%;
text-align: center;
}
.contract_con,.flowcard_contract,.contractid{
line-height:22px;
font-size: 13px;
}
.contract p,.flowcard_contract p{
text-indent: 2em;
margin: 0;
}
.lines{
letter-spacing: 0.1em;
/*width: 100px;*/
display: inline-block;
border-bottom: 1px solid #333;
height: 20px;
line-height: 21px;
padding: 0 10px;
text-indent: 0em;
}
.one{
margin-bottom: 10px;
}
.standard{
width: 130px;
height: 130px;
position: absolute;
bottom: -35px;
left: 17px;
}
.content{
padding: 0;
}
.footer{
margin:30px 10px;
display: flex;
justify-content: space-between;
}
.footer .imgs{
width: 70px;
height: 70px;
margin-left: 15px;
margin-top: -14px;
}
.signimg{
width:40px;
}
.row{
margin: 0;
}
.col-xs-12{
padding: 0;
}
.layui-layer-content{
text-align:center;
}
.signcontent{
height:100%;
width: 100%;
}
.signbtn,.btns{
padding: 8px 50px;
font-size: 16px;
letter-spacing: 0.1em;
text-indent: 0.1em;
}
.center{
text-align: center;
}
.closebtn{
width: 25px;
height: 25px;
border-radius: 50%;
font-size: 16px;
position: absolute;
right: 10px;
top: 120px;
border: 1px solid #ddd;
background: rgba(0,0,0,0.6);
color: #fff;
line-height: 22px;
}
</style>
</head>
<body>
<div>
<div style="margin-top:30px;text-align: center;">
<span href="javascript:;" class="btn btn-sm btn-info signbtn">签名</span>
</div>
<div>
<div style="margin:0 auto;background: #fff;padding:50px 0;">
<p style="font-size:16px;margin:10px;font-weight: bold;">电子签名</p>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #6699cc;border-radius:10px;"></canvas>
<div class="control-ops control" style="margin-top:10px;">
<button type="button" class="btn btn-primary btns" onclick="javascript:clearArea();return false;">清空</button>
<button type="submit" class="btn btn-success saveimg btns" onclick="javascript:saveImageInfo();return false;" style="margin-left:50px;">确定</button>
</div>
<div></div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../assets/libs/jquery/dist/jquery.min.js?v=1566358456"></script>
<script type="text/javascript">
var mousePressed = false;var inputsign=false;
var lastX, lastY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
var control = document.getElementsByClassName("control")[0];
var saveimgs = document.getElementsByClassName("saveimgs")[0];
window.onload = function() {
InitThis();
}
// 电子签名保存的图片
function saveImageInfo() {
var image = c.toDataURL("image/png");
console.log(image)
}
function InitThis() {
//触摸屏
c.addEventListener('touchstart', function(event) {
inputsign=true;
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
mousePressed = true;
Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
}
}, false);
c.addEventListener('touchmove', function(event) {
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
if (mousePressed) {
Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
}
}
}, false);
c.addEventListener('touchend', function(event) {
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
// var touch = event.targetTouches[0];
mousePressed = false;
}
}, false);
// 鼠标
c.onmousedown = function(event) {
mousePressed = true;
Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
};
c.onmousemove = function(event) {
if (mousePressed) {
Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
}
};
c.onmouseup = function(event) {
mousePressed = false;
};
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth =5;
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x;
lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 清除签名图片
if (saveimgs.getElementsByTagName('span').length >= 1) {
var clearImg = saveimgs.getElementsByTagName('span')[0];
saveimgs.removeChild(clearImg);
}
}
</script>链接：https://blog.csdn.net/weixin_40597855/article/details/129215441
温馨提示:
欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。
HTML5-热门文章
活跃用户
