jSignature做手动签名,canvas支持触摸屏的签名涂鸦插件
整理的前面可以用的：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>签名记录</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<script src="__PUBLIC__/mob/js/jquery-1.9.1.min.js"></script>
<script src="__PUBLIC__/mob/js/jq-signature.js"></script>
</head>
<style>
*{padding:0;margin:0;}
body{background:#eee;}
.contents{padding:10px; background:#fff; font-size:13px; color:#333; line-height:24px;}
.form-label{line-height:40px; padding:5px;}
.form-field{background:#fff;}
.butt{padding:5px 10px;}
.butt button{padding:10px 20px; background:#eee; border:none; border-radius:5px;}
.inputsu{padding-bottom:10px;}
.inputsu input{height:50px;line-height:50px;margin-left:10px; border:1px solid #c3c3c3; padding-left:5px;border-radius:5px; width:290px;}
.subdiv input{width:98%;margin-left:1%;background:#0a8ddf;text-align:center;height:44px;line-height:44px; border:none;margin-top:10px;border-radius:5px;color:#fff;font-size:16px;}
.wentitle{line-height:32px;font-size:14px;color:#333;text-align:center;background:#fff;border-bottom:1px solid #eee;}
.headtop{height:10px;width:100%;background:#0a8ddf;}
.bodybj{background:#000;height:100%;width:100%;position:fixed;opacity:.3;display:none;}
.contents img{width:100% !important;height: auto !important;}
.loading{
width: 100%;
height: 15px;
margin: 0 auto;
text-align: center;
position:absolute;
bottom:60px;
}
.loading span{
display: inline-block;
width: 15px;
height: 100%;
margin-right: 5px;
background: lightgreen;
-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
margin-right: 0px;
}
@-webkit-keyframes load{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.loading span:nth-child(1){
-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.65s;
}
</style>
<body>
<div class="bodybj">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="headtop"> </div>
<div class="wentitle">{$info["title"]}</div>
<div class="contents">
{$info["content"]}
</div>
<label class="form-label">签名区(请在以下虚框区域内签名)</label>
<div class="form-field">
<div class="container">
<div class="js-signature" style="margin-left:10px; width:300px;" data-width="100"
data-height="100px"
data-border="1px dashed #ccc"
data-background="#fff"
data-line-color="#000"
data-auto-fit="true">
</div>
<div class="butt">
<button id="clearBtn" onclick="clearCanvas();">重签</button>
<button id="saveBtn" onclick="saveSignature();" disabled>确认</button>
</div>
<div class="inputsu"><input type="text" name="username" placeholder="输入姓名"></div>
<div class="inputsu"><input type="text" name="depart" placeholder="所在部门"></div>
<input type="hidden" name="img" id="imgpic" >
<input type="hidden" name="signid" value="{$info['id']}" >
<input type="hidden" name="type" value="{$type}" >
<div id="signature" style="background:red;">
</div>
</div>
</div>
<div class="subdiv"><input type="button" class="submit" value="提交"></div> <script type="text/javascript">
$(document).on('ready', function() {
$('.js-signature').jqSignature();
});
function clearCanvas() {
$('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
$('.js-signature').jqSignature('clearCanvas');
$('#saveBtn').attr('disabled', true);
} function saveSignature() {
}
$('.js-signature').on('jq.signature.changed', function() {
$('#saveBtn').attr('disabled', false);
});
$(".submit").click(function() {
$(".bodybj").show();
$('#signature').empty();
var dataUrl = $('.js-signature').jqSignature('getDataURL');
$.ajax({
type: "post",
url: "/Mob/index/uploadimg",
data: {file:dataUrl},
dataType: "json",
success: function(data){
if(data.code==1){
var img=data.msg;
var username=$("input[name=username]").val();
var depart=$("input[name=depart]").val();
var signid=$("input[name=signid]").val();
var type=$("input[name=type]").val();
if(username.length<1){
alert("请填写姓名");
$(".bodybj").hide();
return false;
}
if(depart.length<1){
alert("请填写部分");
$(".bodybj").hide();
return false;
}
$.ajax({
type: "post",
url: "/Mob/index/addsig",
data: {img:img,username:username,signid:signid,type:type,depart:depart},
dataType: "json",
success: function(data){
$(".bodybj").hide();
alert("签名成功！");
window.location.reload();
}
}); }else{
$(".bodybj").hide();
alert("签名失败")
}
}
}); }) </script> </body>
</html>
可以借鉴：https://www.cnblogs.com/zhuyupingit/p/6650550.html
jSignature做手动签名,canvas支持触摸屏的签名涂鸦插件的更多相关文章
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. ...
- C#判断PC是否支持触摸屏
C#判断PC是否支持触摸屏 添加引用PresentationFrameworkSystem.Windows.SystemParameters.IsTabletPC 使用win32api [csharp ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- VMware Tanzu Kubernetes Grid 1.3 发布 - VMware 构建、签名和支持的开源 Kubernetes 容器编排平台的完整分发版
Tanzu Kubernetes 集群是由 VMware 构建.签名和支持的开源 Kubernetes 容器编排平台的完整分发版.可以通过使用 Tanzu Kubernetes Grid 服务在主管集 ...
- iOS企业重签名管理软件之风车签名
这是一款在Mac平台下安全可控的iOS签名管理软件,旨在对签名后的APP能够完全控制,包括APP的开启或禁用.设置到期时间锁.注入第三方动态库文件.设置安装限量.修改APP名称和自定义Bundle I ...
- 使用Symantec代码签名证书对代码进行签名的 5 个理由
借助 Symantec Code Signing,在更多平台上将您的代码提供给更多客户,我们总结了5大理由告诉软件开发者在发布自己的软件时一定要购买Symantec 代码签名证书签名即将发布的软件. ...
- 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件
由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...
- TF签名为什么这么稳定?TF签名找微导流!
TF签名作为目前最稳定的签名方式收到了业界开发者们的认可,而在如今鱼龙混杂的签名平台中,应该如何选择客厅的TF签名平台呢?下面就一起来看看TF签名为什么这么稳定?TF签名找微导流! TF签名的 ...
随机推荐
- devstck 部署OpenStack Queens allinone
1.环境信息 1台虚拟机 8C16G CentOS 7.2 2.准备工作 #!/bin/bash set -x #配置aliyun的centos和epel mirror mkdir /etc/yu ...
- 【POJ3680】Intervals（费用流）
题意:有n条线段,每条有起点,终点和一个权值 要求选取一些线段,使它们的权值和最大,并且使每一个点被覆盖不超过k次 1 ≤ K ≤ N ≤ 200 1 ≤ ai < bi ≤ 100,000, ...
- Linux下汇编语言学习笔记57 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- Linux下汇编语言学习笔记56 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- FZU Problem 2171 防守阵地 II (线段树区间更新模板题)
http://acm.fzu.edu.cn/problem.php?pid=2171 成段增减,区间求和.add累加更新的次数. #include <iostream> #include ...
- nyoj_176_队花的烦恼二_201404262008
队花的烦恼二 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 ACM队队花C小+最近在X大OJ上做题,竟发现了一道做不出来的…水题!她快郁闷死了……也许是最近状态不太 ...
- HDU 5643 King's Game 【约瑟夫环】
题意: 变形的约瑟夫环,最初为每个人编号1到n,第i次删去报号为i的人,然后从它的下一个人开始重新从1开始报号,问最终剩下第几号人? 分析: 首先看一下裸的约瑟夫环问题: 共n个人,从1开始报数,报到 ...
- Google Protocol Buffer 的使用(一)
一.什么是Google Protocol Buffer下面是官网给的解释:Protocol buffers are a language-neutral, platform-neutral exten ...
- CSS头像右上角的讨厌红点
就是这个讨厌的红点,如图: 说明: 1.主要用到position定位: 2.使用border-radius画圆角: 源码: <!DOCTYPE html> <html> < ...
- Linux下搭建maven私服Nexus 3.2.1-01
1. 私服介绍私服是指私有服务器,是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构建.有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓库:否则, ...