整理的前面可以用的：

<!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支持触摸屏的签名涂鸦插件的更多相关文章

  1. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  2. Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件

    运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. ...

  3. C#判断PC是否支持触摸屏

    C#判断PC是否支持触摸屏 添加引用PresentationFrameworkSystem.Windows.SystemParameters.IsTabletPC 使用win32api [csharp ...

  4. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  5. VMware Tanzu Kubernetes Grid 1.3 发布 - VMware 构建、签名和支持的开源 Kubernetes 容器编排平台的完整分发版

    Tanzu Kubernetes 集群是由 VMware 构建.签名和支持的开源 Kubernetes 容器编排平台的完整分发版.可以通过使用 Tanzu Kubernetes Grid 服务在主管集 ...

  6. iOS企业重签名管理软件之风车签名

    这是一款在Mac平台下安全可控的iOS签名管理软件,旨在对签名后的APP能够完全控制,包括APP的开启或禁用.设置到期时间锁.注入第三方动态库文件.设置安装限量.修改APP名称和自定义Bundle I ...

  7. 使用Symantec代码签名证书对代码进行签名的 5 个理由

    借助 Symantec Code Signing,在更多平台上将您的代码提供给更多客户,我们总结了5大理由告诉软件开发者在发布自己的软件时一定要购买Symantec 代码签名证书签名即将发布的软件. ...

  8. 自定义Jquery插件——由于项目需要，对页面中过长的文本进行截取，鼠标移上去有一个title的提示，所以做了一个Jquery过长文本处理的插件

    由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件下面是代码: // 掉用方式支持 $('select').textBeauty(1 ...

  9. TF签名为什么这么稳定?TF签名找微导流!

      TF签名作为目前最稳定的签名方式收到了业界开发者们的认可,而在如今鱼龙混杂的签名平台中,应该如何选择客厅的TF签名平台呢?下面就一起来看看TF签名为什么这么稳定?TF签名找微导流!   TF签名的 ...

随机推荐

  1. POJ-3692Kindergarten,求最大独立集！

    Kindergarten Time Limit: 2000MS   Memory Limit: 65536K       Description In a kindergarten, there ar ...

  2. 树剖 lca

    GeneralLiu  橙边为轻边 红边为重边 绿数为每个点的 top 橙数为每个点的编号 步骤 1 先预处理 每个点的 deep深度  size子树大小  dad父节点 2 再预处理 每个点的 to ...

  3. 【HDOJ6118】度度熊的交易计划（费用流）

    题意: 度度熊参与了喵哈哈村的商业大会,但是这次商业大会遇到了一个难题: 喵哈哈村以及周围的村庄可以看做是一共由n个片区,m条公路组成的地区. 由于生产能力的区别,第i个片区能够花费a[i]元生产1个 ...

  4. 【Codevs1237&网络流24题餐巾计划】（费用流）

    题意:一个餐厅在相继的 N 天里,每天需用的餐巾数不尽相同. 假设第 i 天需要 ri块餐巾(i=1,2,…,N).餐厅可以购买新的餐巾,每块餐巾的费用为 p 分: 或者把旧餐巾送到快洗部,洗一块需 ...

  5. Git Cheat Sheet 中文版

    Git Cheat Sheet 中文版 索引 配置 配置文件 创建 本地修改 搜索 提交历史 分支与标签 更新与发布 合并与重置 撤销 Git Flow 配置 列出当前配置: $ git config ...

  6. Thinkphp5.0 的使用模型Model删除数据

    Thinkphp5.0 的使用模型Model删除数据 一.使用destory()删除数据 //删除id为3的记录 $res = User::destroy(3); //返回影响的行数 dump($re ...

  7. Thinkphp5.0 的使用模型Model更新数据

    Thinkphp5.0 的使用模型Model更新数据 (1)使用update()方法进行更新数据 一.where条件写在更新数据中 (这种情况更新的数据,必须含主键) $res = User::upd ...

  8. Codeforces 651A Joysticks【贪心】

    题意: 两根操纵杆,每分钟操纵杆消耗电量2%,每分钟又可以给一个操纵杆充电1%(电量可以超过100%),当任何一个操纵杆电量降到0时,游戏停止.问最长游戏时间. 分析: 贪心,每次选择电量剩余最少的充 ...

  9. [bzoj3712][PA2014]Fiolki_倍增LCA

    Fiolki bzoj-3712 PA-2014 题目大意:题目链接. 注释:略. 想法: 神题! 我们建树:对于一次倾倒操作,我们弄一个新的大瓶子作为两个合并瓶子的父亲节点,与两个瓶子相连. 对于一 ...

  10. [转] ASPNET Core 中获取应用程序物理路径

    如果要得到传统的ASP.Net应用程序中的相对路径或虚拟路径对应的服务器物理路径,只需要使用使用Server.MapPath()方法来取得Asp.Net根目录的物理路径,如下所示: // Classi ...