欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于Jq的手写插件

程序员文章站 2024-01-30 11:28:41
以下是js文件: ......
<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../xsloader.js" data-xsloader-conf2="./xsloader.config" async="async" type="text/javascript" charset="utf-8"></script>
		<script src="libs/modernizr.js"></script><!--引入文件-->
		<style>
			input {
				padding: .5em;
				margin: .5em;
			}
			#signatureparent {
				color: #000;
				background-color: #fff;
				padding: 10px;
			}
			
			#signature {
				border: 1px dotted #3eaed2;
				background-color: #ececec;
				width: 100%;
				
			}
			
			#signresult {
				width: 300px;
				height: 300px;
			}
		</style>
	</head>

	<body style="background-color: #fff;">
		<div id="content" style="width: 100%;padding-top: 15px;">
			<center style="font-size: 1.2em;">请在虚线框内签名,完毕后点击 保存 按钮。</center>
			<div id="signatureparent">
				<div id="signature"></div> //这是要显示写字板的容器
			</div>
			<div style="text-align: center;">
				<input type="button" name="btnreset" id="btnreset" value="重写" />
				<input type="submit" class="" name="btnsave" id="btnsave" value="保存签名" />
			</div>
		</div>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><!--引入jq文件,必须在noconflict.js文件之前引入--> 
          <script src="libs/jsignature.min.noconflict.js"></script> </body> </html>

  以下是js文件:

    var that = this;
	var option = {
		isrevoke: false,//是否有撤销按钮
		color: "red"  //画笔颜色
	}
	var strokescount = 0; //笔画数,为了记录是否有签名,如果为0,表示没有签名就提交,拒绝提交
	var $sigdiv = handsign(option);

	function handsign(obj) { //isrevoke:是否有撤销按钮;color:画笔颜色

		var $signadiv = $(signature).jsignature({
				'undobutton': obj.isrevoke,
				"color": obj.color
			}), //实例化一个画板
			pubsubprefix = 'jsignature.demo.'
		$signadiv.on('change', function(e) {
			strokescount++; //监听画板,记录笔画数
		})
		return $signadiv;
		/*$(signature).jsignature({option})参数设置
		 * option = {
			width : ratio     定义画布的宽度。数值没有%或px
			height : ratio   定义画布的高度。数值没有%或px
			sizeratio: 4 // only used when height = ratio
			color : #000      定义了中风在画布上的颜色。接受任何颜色的十六进制值
			background-color: #fff   定义了画布的背景颜色。接受任何颜色的十六进制值。
			decor-color: #eee
			linewidth : 0       定义的厚度。接受任何积极的数值
			minfatfingercompensation : -10
			showundobutton: false
			readonly: false
			data: []
			signatureline: false
			}*/
	}
	$("#btnsave").on("click", function() {
		if(strokescount > 0) {
			//可选格式:native,image,base30,image/jsignature;base30,svg,image/svg+xml,svgbase64,image/svg+xml;base64
			var basedata = $sigdiv.jsignature('getdata', "image"); //获取图片数据,前面不加入data: 直接存入数据库,读取的时候,可以再加
			sdk.xsrequest({  //发送异步请求,将图片进行上传,这里使用的是公司分装的,用原生的ajax自行百度
				method: "post",
				url: lconfig.frompath("handsign/savehandsignimage"),
				params: {
					"jsdata": basedata[1],
					"vid": "abd",
					"vtid": "abcd"
				}
			}).then(function(json) {
				return json;
			})
		} else {
			sdk.showtoast("请签名后再保存")  //监听是否有写过,如果没有写过则不予以上传,这里使用公司的弹窗sdk,
		}

	});
	$("#btnreset").on("click", function() {
		$sigdiv.jsignature('reset'); //重置
		strokescount = 0;//重置过后将笔画数也清楚0
	});

 基于Jq的手写插件