JS实现web高清签名（适用手机，电脑）

最新推荐文章于 2024-07-23 10:01:53 发布

神马不是神

最新推荐文章于 2024-07-23 10:01:53 发布

阅读量4k

点赞数 3

分类专栏：前端文章标签： js 电子签名 web

本文链接：https://blog.csdn.net/LongQin_/article/details/83014318

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基于 signature_pad 实现高清签名。
参考文档：https://www.npmjs.com/package/signature_pad

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title>无纸化签名</title>
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<script src = "https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js "> </script>
		<link rel="stylesheet" href="./signature-pad.css">
	</head>

	<body>
		<div id="signature-pad" class="signature-pad">
			<div class="description tc">签名区域</div>
			<div class="signature-pad--body"> 
				<canvas id="signature-canvas"></canvas> 
				<i class="leftup lefta"></i> 
				<i class="leftup rightup"></i> 
				<i class="leftup leftdown"></i> 
				<i class="leftup rightdown"></i> 
			</div>
			<div class="signature-pad--footer"> 
				<button type="button" class="buttonclear clear" id="clear" data-action="clear">重签</button> 
				<button type="button" class="buttonclear clear" id="save" data-action="clear">确定</button>
			</div>
		</div>
		<script type="text/javaScript">
			var canvas = document.getElementById('signature-canvas'); 
			var signaturePad = new SignaturePad(canvas, { backgroundColor: 'rgba(255, 255, 255, 0)', penColor: 'rgb(0, 0, 0)' }); 
			var saveButton = document.getElementById('save'); 
			var cancelButton = document.getElementById('clear'); 
			saveButton.addEventListener('click', function (event) { 
				var data = signaturePad.toDataURL('image/png'); 
				// Send data to server instead...
				window.open(data); 
			}); 
			cancelButton.addEventListener('click', function (event) { 
				signaturePad.clear(); 
			});
				function resizeCanvas() { 
					var ratio = Math.max(window.devicePixelRatio || 1, 1); // 清除画布 
					canvas.width = canvas.offsetWidth * ratio; 
					canvas.height = canvas.offsetHeight * ratio; 
					canvas.getContext("2d").scale(ratio, ratio); 
					signaturePad.clear(); 
				} 
				window.onresize = resizeCanvas; 
				resizeCanvas();

		</script>
	</body>

</html>

signature-pad.css

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  margin: 0;
}
.signature-pad,.signature-pad--body {
	height: 90%;
}
.signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 100%;
  max-height: 480px;
  background-color: #fff;
  padding: 16px;
}

.signature-pad::before,
.signature-pad::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  bottom: 10px;
  background: transparent;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
  left: 20px;
  -webkit-transform: skew(-3deg) rotate(-3deg);
          transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
          transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.signature-pad--body
canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
  color: #C3C3C3;
  text-align: center;
  font-size: 1.2em;
  margin-top: 8px;
}

.signature-pad--actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 8px;
}

.tc{text-align:center;}
.description{
  font-size: 16px;
  color:#000;
  padding:15px;
}
.leftup{
  position:absolute;
  right:20px;
  bottom:20px;
  display:block;
  width:15px;
  height:40px;
  border-top:3px solid #333;
  border-left:3px solid #333;
}
.lefta{left:15px;top:15px;}
.leftup.rightup{
  right:15px!important;
  top:15px;
  transform: rotateY(180deg);
}
.leftup.rightdown{
  right:15px!important;
  bottom:15px;
  transform: rotate(180deg);
}
.leftup.leftdown{
  left:15px;
  bottom:15px;
  transform: rotateX(180deg);
}

.hide{display:none;}
.newbottom{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height: 1.344605rem;
    border-top: 1px solid #ccc;
    background:#fff!important;
    text-align:center;
}
.newbottom>div{
    width: 9.557166rem;
    height: 1.022544rem;
    background-image: -webkit-linear-gradient(277deg, #fc6a37, #e93c6d);
    background-image: -o-linear-gradient(277deg, #fc6a37, #e93c6d);
    background-image: linear-gradient(173deg, #fc6a37, #e93c6d);
    margin: 0.161031rem auto;
    color: #fff;
    font-size: 0.41868rem;
    text-align: center;
    line-height: 1.022544rem;
    border-radius: 0.144928rem;
    letter-spacing: 0.161031rem;
}
.signature-pad{padding:15px 0!important;}
.signature-pad--body{padding:15px;}
.buttonclear{
    border-radius:5px;
    border:0;
    height: 30px;
    line-height:30px;
    padding: 0 20px;
    font-size: 0.5rem;
    background-color:#d3d3d3;
}