• 2024-03-29
宇哥博客 前端开发 HTML5手机端电子签名jSignature

HTML5手机端电子签名jSignature

移动端页面进行手写签名,如果是较长的页面,签名时不会上下滑动页面。

只需引入一个js文件即可,使用简单。

画笔粗细、颜色都可以配置。

直接上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>HTML5电子签名-jSignature</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jSignature.js"></script>
</head>
<body>
<h3>请在下方签名</h3>
<div id="signature" style="height:100%;border:1px solid #000"></div>
<br>
<input id="clear" type="button" value="清除">
<input id="export" type="button" value="输出图片">
<input id="save" type="button" value="保存base64">

<a href="javascript:;" onclick="submit();">提交</a>
<div id="pic" />
<p id="base" style="width:100%;"></p>

<script type="text/javascript" charset="utf-8">
	 var param = {
                        width: '300px', //签名区域的宽
                        height: '100px', //签名区域的高
                       //cssclass: 'cans', //画布的类 可以写自定义的样式
                        UndoButton: false, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
                        signatureLine: false, //去除默认画布上那条横线
                        lineWidth: '2', //画笔的大小
			color:'#000' //画笔颜色
                    };

	$(document).ready(function() {
		$("#signature").jSignature(param)
	});
	//清除
	$('#clear').click(function(){
		$("#signature").jSignature("reset");
		$("#pic")[0].innerHTML = '';
	});
	//输出图片
	$('#export').click(function(){
		var datapair = $("#signature").jSignature("getData", "image");
		var i = new Image();
		i.src = "data:" + datapair[0] + "," + datapair[1];
		$(i).appendTo($("#pic"));
	});
	//保存base64
	$('#save').click(function(){
		var datapair = $("#signature").jSignature("getData", "image");
		//var array = datapair.splice(",");
		//mui.toast(array[1]);
		console.log('--',datapair);
	});
	function submit(){
		if( $("#signature").jSignature('getData', 'native').length == 0){ 
			alert("请先进行签名"); 
			return;
		}
	}
</script>
</body>
</html>

jSignature.js下载链接: https://pan.baidu.com/s/1dHipot41h6zkzC6L2kn0UQ 提取码: 22c6

本文来自网络,不代表本站立场,转载请注明出处。http://www.ygbks.com/1135.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

返回顶部