<!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. screen 状态为Attached 连不上

    用 screen -ls, 显式当前状态为Attached, 但当前没有用户登陆些会话.screen此时正常状态应该为(Detached)  此时用screen -r ,怎么也登不上. 最后找到解决方 ...

  2. 2Exception in thread "main" java.lang.OutOfMemoryError: Java heap space

    public class TestException { public static void main(String[] args) { String str = "1"; fo ...

  3. jdk下载及安装

    下载下载 jdk 下载 java se 版本的即可. web 开发前不需要像安装 java se 一样安装java ee,只要在项目中添加 java ee 的jar 包就可以了,里面大多是接口和抽象类 ...

  4. LeetCode题解之Rotate Array

    1.题目描述 2.代码 void rotate(vector<int>& nums, int k) { ) return ; && (k / nums.size() ...

  5. ssm单项目整合

    目录 前言 创建maven项目 添加依赖 配置文件 总览 jdbc配置 mybatis配置 dao层配置 service层配置 事务配置 controller配置 web.xml 使用 前言 spri ...

  6. HTML--<frameset>標簽

    <html><frameset rows="20,80"> <frame src="/example/html/frame_a.html&q ...

  7. 转：java 委托

    委托模式是软件设计模式中的一项基本技巧.在委托模式中,有两个对象参与处理同一个请求,接受请求的对象将请求委托给另一个对象来处理.委托模式是一项基本技巧,许多其他的模式,如状态模式.策略模式.访问者模式 ...

  8. 使用python来建立http服务

    python建立http服务 首先我们的windos上要安装python解释器,然后进入我要想要传递的文件的目录下,从当前的目录下进入cmd 然后通过Python解释器输入 python -m htt ...

  9. MDT配置数据库

    连接数据库可以使用数据库账户和Windows集成身份验证两种方法:使用数据库账户:1.连接数据库时选择TCP/IP2.在数据库中添加相应规则后,配置数据库3.在CustomSettings.ini文件 ...

  10. Word2016“此功能看似已中断 并需要修复”

    Word2016"此功能看似已中断 并需要修复" 文:铁乐与猫 在Win10系统上安装 Office 2016 之后,每次打开Word文档都会提示"很抱歉,此功能看似已中 ...