<!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. web应用服务端cache策略初探

    一般来说,网站随着访问量以及数据库的增大,访问速度将会越来越慢,如何优化这个响应速度,增大用户支持容量是网站从小到中,到大的必经之路. 你也可能听说过对于大型web站点一般严重依赖于cache来弹性放 ...

  2. 机器学习vs深度学习及其知识点

    人工智能如火如荼,可以遇见这将会是近10年最大的创新机会.那么到底什么是人工智能? 机器学习和神经网络什么关系? 卷积神经网络中的矩阵内积是怎么计算的?

  3. SQL Server 登录名、用户、角色与权限

    1.在SQL Server中,用户和角色是分为服务器级别和数据库级别的 2.服务器级别 登录名:指有权限登录到某服务器的用户,例如超级管理员的登录名是sa: 登录名具体位置在  数据库——>安全 ...

  4. .Net Core+Vue.js+ElementUI 实现前后端分离

    .Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...

  5. 使用CocoaPods

    使用CocoaPods 1. 安装CocoaPods 有时候,默认的 https://rubygems.org/ 访问不了,你需要先执行以下命令移除掉sources gem sources -r ht ...

  6. 生成器（generator），迭代器（yield）

    g=(i for i in range(10)) #小括号表示生成一个迭代生成器.[]是列表生成器 g.__next__() yield将一个函数变成生成器 import time def f(): ...

  7. buff/cache 内容释放

    oscache远程服务器特别卡,top命令查看获得 buff/cache 占据内存特别大,使用以下命令清理缓存: swap清理: swapoff -a && swapon -a 注意: ...

  8. Laravel 实践之路: 数据库迁移与数据填充

    数据库迁移实际上就是对数据库库表的结构变化做版本控制,之前对数据库库表结构做修改的方式比较原始,比如说对某张库表新增了一个字段,都是直接在库表中执行alter table xxx add .. 的方式 ...

  9. C++ new和delete重载

    C++ new和delete重载 2012-02-15 23:25:33|  分类: C/C++|举报|字号 订阅           首先,new和delete是运算符,重载new和delete是可 ...

  10. CSS 鼠标样式

    设置鼠标指针放在一个元素边界范围内时所用的光标形状,需要对元素的css属性cursor进行设置. cursor属性可能的值: default 默认光标(通常是一个箭头) auto 默认.浏览器设置的( ...