<!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的手写插件的更多相关文章

  1. 使用java语言基于SMTP协议手写邮件客户端

    使用java语言基于SMTP协议手写邮件客户端 1. 说明 电子邮件是互联网上常见的应用,他是互联网早期的产品,直至今日依然受到广大用户的喜爱(在中国可能因为文化背景不同,电子邮件只在办公的时候常用) ...

  2. 基于MATLAB的手写公式识别(9)

    基于MATLAB的手写公式识别(9) 1.2图像的二值化 close all; clear all; Img=imread('drink.jpg'); %灰度化 Img_Gray=rgb2gray(I ...

  3. 基于MATLAB的手写公式识别(6)

    基于MATLAB的手写公式识别 2021-03-29 10:24:51 走通了程序,可以识别"心脑血管这几个字",还有很多不懂的地方. 2021-03-29 12:20:01 tw ...

  4. 基于MATLAB的手写公式识别(5)

    基于MATLAB的手写公式识别 总结一下昨天一天的工作成果: 获得了大致的识别过程. 一个图像从生肉到可以被处理需要经过预处理(灰质化.增加对比度.中值过滤.膨胀或腐蚀.闭环运算). 掌握了相关函数的 ...

  5. 基于MATLAB的手写公式识别(3)

    基于MATLAB的手写公式识别 图像的膨胀化,获取边缘(思考是否需要做这种处理,初始参考样本相对简单) %膨胀 imdilate(dilate=膨胀/扩大) clc clear A1=imread(' ...

  6. 基于MATLAB的手写公式识别(2)

    基于MATLAB的手写公式识别 图像的预处理(除去噪声.得到后续定位分割所需的信息.) 预处理其本质就是去除不需要的噪声信息,得到后续定位分割所需要的图像信息.图像信息在采集的过程中由于天气环境的影响 ...

  7. 基于MATLAB的手写公式识别(1)

    基于MATLAB的手写公式识别 reason:课程要求以及对MATLAB强大生命力的探索欲望: plan date:2021/3/28-2021/4/12 plan: 进行材料搜集和思路整理: 在已知 ...

  8. 基于TensorFlow解决手写数字识别的Softmax方法、多层卷积网络方法和前馈神经网络方法

    一.基于TensorFlow的softmax回归模型解决手写字母识别问题 详细步骤如下: 1.加载MNIST数据: input_data.read_data_sets('MNIST_data',one ...

  9. 基于opencv的手写数字字符识别

    摘要 本程序主要参照论文,<基于OpenCV的脱机手写字符识别技术>实现了,对于手写阿拉伯数字的识别工作.识别工作分为三大步骤:预处理,特征提取,分类识别.预处理过程主要找到图像的ROI部 ...

随机推荐

  1. LK光流算法的三个假设

    在实际过程中采用 Lucas-Kanade 光流算法跟踪运动物体特征点的时候,一个很明显的特点是LK算法(包括其他光流算法)不能计算"大运动",加上金子塔的方法稍微好点. 这是什么 ...

  2. AR中的SLAM（二）

    写在前面 本文想讨论一下AR的架构和SLAM在其中的作用. AR AR的框架可以简单划分为感知和交互两部分. 感知部分主要负责信息的收集和处理.信息主要通过不同的传感器收集,包括图像.设备加速度.距离 ...

  3. url override and HttpSession implements session

    背景 HttpSession默认使用Cookie存储Session ID,如果在用户禁用浏览器Cookie的功能后,仍打算运用HttpSession来进行会话管理,那么可以搭配URL重写来实现. 实现 ...

  4. windows 命令行使用p4

    首先,p4的命令行真的恶心,要不是非要用我一定换成git(逃) 参考网站:https://www.perforce.com/manuals/v15.1/cmdref/p4_add.html 全程尝试各 ...

  5. leetCode题解之Self Dividing Numbers

    1.题目描述 2.题目分析 简单题目,只要挨个判断该数是不是满足条件即可. 3.代码 vector<int> selfDividingNumbers(int left, int right ...

  6. springMVC入门-08

    这一讲介绍用户登录实现以及两种异常处理controller控制器的方法,最后提一下在springMVC中对静态资源访问的实现方法. 用户登录需要一个登录页面login.jsp,对应代码如下所示: &l ...

  7. GONMarkupParser的使用

    GONMarkupParser的使用 说明 这是一个写得非常好的富文本工具类,便于你进行简易的封装.本人抛砖引玉,只进行了少量的简化使用封装. 效果 源码 https://github.com/nic ...

  8. Python下操作sqlite3

    import sqlite3 dbpath = 'C:\\Django\\workplace\\sf\\d1.sqlite3' conn = sqlite3.connect(dbpath) cu = ...

  9. Hadoop HBase概念学习系列之物理视图（又名为物理模型）（九）

    虽然,从HBase的概念视图来看,每个表格是由很多行组成的,但是在物理存储上面,它是按照列来保存的,这一点在进行数据设计和程序开发的时候必须牢记. 在物理存储上面,它是按照列来保存的 需要注意的是,在 ...

  10. Alpha 冲刺报告(5/10)

    Alpha 冲刺报告(5/10) 队名:洛基小队 峻雄(组长) 已完成:修改角色的移动脚本 明日计划:完善此项脚本 剩余任务:角色的属性脚本 困难:没有时间,代码的编写时间太慢 ----------- ...