<!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. ARCGIS知乎上的好文章

    http://zhihu.esrichina.com.cn/?/feature/ArcGISAndroidDevNote ArcGIS知乎上有哪些干货可以推荐? http://zhihu.esrich ...

  2. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  3. 180415_判断闰年的思路及三种 java 实现

    世纪年:能整除 100 的年份 普通年:不能整除 100 的年份 闰年:一年有 366 天,二月有 29 天 平年:一年有 365 天,二月有 28 天 对于世纪年:能整除 400 为闰年,否则为平年 ...

  4. UltraPtr下拉刷新

    github:  https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh <in.srain.cube.views.ptr.PtrF ...

  5. 团队项目个人进展——Day04

    一.昨天工作总结 冲刺第四天,昨天继续忙着整理数据结构与算法的知识,在项目上看了看有关视频,学习了有关视图的地方和文档说明 二.遇到的问题 无 三.今日工作规划 学习并实现地图的放大与缩小

  6. 精华阅读第 12 期 | 最新 App Store 审核指南与10大被拒理由？

    很多时候,我们对技术的追求是没有止境的,我们需要不断的学习,进步,再学习,再进步!本文系移动精英开发俱乐部的第12期文章推荐阅读整理,其中涉及到了 Android 数据库框架,架构设计中的循环引用,同 ...

  7. .net 下使用Quartz.Net

    Quartz.net是作业调度框架 1. 项目中添加quartz.net的引用(这里使用nuget管理) 新建一个类TimingJob,该类主要用于实现任务逻辑 using Quartz; using ...

  8. PHP SPL神器实现堆排序

    之前学习过内部排序的八大算法,也一一写过代码实现.其中堆排序的原理是 将一颗二叉树初始化为堆 依次将最后一个结点与堆顶结点交换.然后调整堆顶元素位置,重置堆. 将二叉树初始化为堆可以看做从最后一个非叶 ...

  9. IOS和安卓WEB页面，input输入框被软键盘遮挡解决方法

    本来以为这问题就只有ios才有,身边也没有android机测试,网上一搜,貌似有这个问题的还不少.最后把各种解决方法试了一边,貌似没什么用. 最后是这样解决的: setInterval(functio ...

  10. ElasticSearch 简单的 搜索 聚合 分析

    一. 搜索1.DSL搜索 全部数据没有任何条件 GET /shop/goods/_search { "query": { "match_all": {} } } ...