手机端的手写签名保存

最新推荐文章于 2024-10-07 16:50:22 发布

small_animation

最新推荐文章于 2024-10-07 16:50:22 发布

阅读量1k

点赞数

分类专栏：签名 layui 文章标签： css css3 html5 jquery html

本文链接：https://blog.csdn.net/small_animation/article/details/109492066

版权

layui 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

签名

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
		<script src="__STATIC__/js/jquery.min.js"></script>
		<script src="__STATIC__/js/layer/layer.js"></script>
		<title>签到</title>
		<style>
			.choose_btn{margin: 50px 0 30px;font-size: 15px;}
			#canvas{background: #e2e2e2;height: 100%;}
			.status_btn{z-index: 500;display: flex;justify-content: space-around;padding: 12px 0;margin-bottom:10px}
			.status_btn button{height: 32px;line-height: 32px;}
			.signature_img{text-align: center;}
			.signature_img img{border: 1px solid #e3e3e3;}
			.submit_btn{margin-top: 150px;width: 30%;font-size: 15px;}
			.signature_img{width: 100%; height: 150px; display: none}
		</style>
	</head>
	<body>
		<div id="imgg" style="width: 100%;text-align: center;">
			<button type="button" class="layui-btn choose_btn">点击签名</button>
			<div class="signature_img">
			    <img style="height: 150px; width: auto" src="" alt="">
				<button type="button" class="layui-btn layui-btn-normal submit_btn">提交</button>
			</div>
		</div>
		<script type="text/javascript">
			function setTop(){
				// 禁止滚动
				var top = $(document).scrollTop();
				$(document).on('scroll.unable',function (e) {
				    $(document).scrollTop(top);
				});
				
				$("body").css({'touch-action': 'none'});
				document.body.addEventListener('touchmove', (e) => {
				    e.preventDefault();
				    e.stopPropagation();
				}, { passive: false })
				
				layer.open({
					type: 0 
					,title: '签名'
					,content: `<div id="canvas">
						<div class="status_btn">
							<button type="button" id="clearCanvas" class="layui-btn layui-btn-danger">清除</button>
							<button type="button" id="saveCanvas" class="layui-btn layui-btn-normal layer-close" onclick="autograph()">保存</button>
						</div>
						<canvas id="canvas_id" style="background:#FFF;"></canvas>
						<div style="text-align:center;color:gray;font-size:15px;">请在以上白色区域内签字</div>
					</div>`
					,area:['100%','100%']
					,type: 1  //隐藏底部按钮
					,success:function(layero, index){
						new lineCanvas({
							el: document.getElementById("canvas"),//绘制canvas的父级div
							clearEl: document.getElementById("clearCanvas"),//清除按钮
							saveEl: document.getElementById("saveCanvas"),//保存按钮
							canvas:document.getElementById("canvas_id"),
							//      linewidth:1,//线条粗细，选填
							//      color:"black",//线条颜色，选填
								 // background:"#ffffff"//线条背景，选填
						});
					}
				});
			}
			
			$("#imgg .choose_btn").click(function(){
				setTop();
			})

			function autograph() { //保存关闭弹窗
				$(document).unbind("scroll.unable");
			}
			$(".submit_btn").click(function () { //提交
				var webUrl = "https://......"
			    submits(webUrl)
			})
			function submits(webUrl) {
				var index11 = layer.load(2);
				var imgUrl = $('.signature_img img').attr('src');
				console.log(imgUrl)
				$.ajax({
					url: webUrl,
					type: 'POST',
					data: {
						"imgurl": imgUrl
					},
					// dataType: 'json',
					success: function(data) {
						// console.log(data)
						layer.close(index11)
						if(data.code == 1){
							layer.msg(data.msg, {
								time: 1500,
								anim: 5,
								offset: 'auto',
							})
							setTimeout(function(){
								location.href = data.url;
							},1500)
						}else{
							layer.msg(data.msg, {
								time: 1500,
								anim: 5,
								offset: 'auto',
							})
						}
					}
				})
			}
			
			function lineCanvas(obj) {
			    this.linewidth = 3; //签名粗细
			    this.color = "#000000";
			    this.background = "#FFFFFF";
			    for (var i in obj) {
			        this[i] = obj[i];
			    };
				
			    this.cxt = this.canvas.getContext("2d");
			    this.cxt.fillStyle = this.background;
			    this.canvas.height = 150;  //设置画布签名高度
				this.canvas.width = document.documentElement.clientWidth;
				this.cxt.strokeStyle = this.color;//画笔的颜色
			    this.cxt.lineWidth = this.linewidth;//线条的宽度
			    this.cxt.lineCap = "round";
			    //开始绘制
			    this.canvas.addEventListener("touchstart", function(e) {
			        this.cxt.beginPath();
					this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY-document.documentElement.scrollTop-110); e.changedTouches[0].pageY-document.documentElement.scrollTop-82);
			    }.bind(this), false);
			    //绘制中
			    this.canvas.addEventListener("touchmove", function(e) {
					this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY-document.documentElement.scrollTop-110);
					e.changedTouches[0].pageY-document.documentElement.scrollTop-82);
			        this.cxt.stroke();
			    }.bind(this), false);
			    //结束绘制
			    this.canvas.addEventListener("touchend", function() {
			        this.cxt.closePath();
			    }.bind(this), false);
			    //清除画布
			    this.clearEl.addEventListener("click", function() {
			        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
			    }.bind(this), false);
			    //保存图片，直接转base64
			    this.saveEl.addEventListener("click", function() {
			        var imgBase64 = this.canvas.toDataURL();
			        console.log(imgBase64);//图片路径
			        $(".signature_img").show();
			        $(".signature_img img").attr("src",imgBase64);//获取元素的src属性，并赋值图片的路劲。
					layer.closeAll();
			    }.bind(this), false);
			};
		</script>
	</body>
</html>