美文网首页
js手写签名合成条款图片源码

js手写签名合成条款图片源码

作者: 北冥有鱼我养的 | 来源:发表于2017-07-07 10:01 被阅读0次
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>jsignature</title>
    <style>
    #personal .hetong{ font-size: 14px; }
    #personal .hetong>h2{ text-align: center; }
    #personal .btn_box{ clear:both; overflow:hidden; text-align:center; margin-top:10px; line-height:30px;}
    
    #signatureparent{color:#333;background-color:darkgrey; padding:0.1rem 0.1rem; margin-bottom:0.2rem;}
    #signature{border:2px;background-color:lightgrey; }
    #jq_join{ width:50%; display:inline-block; float:left;  color:#fff; background-color:#ee9900;}
    #clear{ width:50%; display:inline-block; float:left; background-color:#868686; }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
    </head>
    <body>
        <div id="personal" class="page-center-box">        
            <!-- canvas绘制面板用于绘图 -->
            <canvas id="myCanvas" width="375" height="750" style="border:1px solid #d3d3d3; ">
                对不起,你的浏览器不支持签名!!!
            </canvas>
            
            <!-- 签名面板 -->
            <div id="signatureparent">
                <span> 在下面签名</span>
                <div id="signature"></div>
                <div class="btn_box"><a id="jq_join" class="btn">确定</a> <a id="clear" class="btn">清除</a></div>
            </div>  
    
            <!-- 用于显示绘制成的图片 -->
            <img src="" id="hetong" />                  
        </div>
        
    <script type="text/javascript" src="js/jSignature.min.js"></script> 
    <script>
    $(document).ready(function () {
        function hetong(){
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.fillStyle="#fff";
            ctx.fillRect(0,0,375,750);  
            ctx.fillStyle="#000";
            ctx.font="16px Arial";
            ctx.fillText("某某公司借款条约",120,30);
            ctx.font="12px Arial";
            ctx.fillText("甲方(借款人):____",10,60);
            ctx.fillText("身份证号码:__",10,80);
            ctx.fillText("乙方(贷款人):",10,100);
            ctx.fillText("企业代码:",10,120);
            ctx.fillText("协商一致的基础上达成如下协议,以资双方共同遵守。",10,140);
            ctx.fillText("乙方贷给甲方人民币(大写)____,于 ____年",10,160);   
            ctx.fillText("____月 ____日前交付甲方。",10,180);
            ctx.fillText("借款利息:_____________",10,200);
            ctx.fillText("借款期限:_____________",10,220);
            ctx.fillText("还款日期: ____年 ____月 ____日。 还款方式:现金/_________",10,240);
            ctx.fillText("支付。",10,260); 
            ctx.fillText("违约责任:",10,280);
            ctx.fillText("1、借款方的违约责任",10,300);
            ctx.fillText("(1)借款方不按合同规定的用途使用借款,贷款方有权收回部分",10,320);
            ctx.fillText("或全部贷款,对违约使用的部分,按银行规定的利率加收罚息。",10,340);    
            ctx.fillText("(2)借款方如逾期不还借款,贷款方有权追回借款,并从到期日起",10,360);
            ctx.fillText("付日息1%",10,380);
            ctx.fillText("(3)借款方使用借款造成损失浪费或利用借款合同进行违法活动的,",10,400);
            ctx.fillText("贷款方应追回贷款本息,有关单位对直接责任人应追究行政和经济",10,420);
            ctx.fillText("责任。情节严重的,由司法机关追究刑事责任。",10,440);
            ctx.fillText("2、贷款方的违约责任",10,460);
            ctx.fillText("(1)贷款方未按期提供贷款,应按违约数额和延期天数,付给借",10,480);
            ctx.fillText("款方违约金。违约金数额的计算与加收借款方的罚息计算相同。",10,500);
            ctx.fillText("(2)利用借款合同进行违法活动的,追究行政和经济责任。情",10,520);
            ctx.fillText("节严重的,由司法机关追究刑事责任。",10,540);
            ctx.fillText("争议解决方式: 双方协商解决,解决不成,提交__________人民",10,560);
            ctx.fillText("法院。",10,580);
            ctx.fillText("本合同自 _____生效。本合同一式两份,双方各执一份,合同文本",10,600);
            ctx.fillText("具有同等法律效力。",10,620);
            ctx.fillText("甲方(签字、盖章):",10,640);
            ctx.fillText("乙方(签字、盖章 附身份证复印件):",10,680);
            ctx.fillText("合同签订日期 :",10,720);    
        }       
        function qianming(){
            var arguments = {
                width: '100%',
                height: '300px',
                signatureLine: false,//去除默认画布上那条横线
                lineWidth: '5'
            };
            $("#signature").jSignature(arguments);
        }
    
        /* 清除画布上的签名 */
        $('#clear').click(function () {
            $("#signature").jSignature("reset");
        });
    
        hetong();
        qianming();
    })
    </script>
    <script>
        $(document).ready(function () {     
            /* 将签名写进画布里 */
            $('#jq_join').click(function () {      
                /* 生成签名的图片 */        
                var datapair = $("#signature").jSignature("getData", "image");
                var i = new Image();
                i.src = "data:" + datapair[0] + "," + datapair[1];
                i.image = datapair[1];
    
                var imgs;
                var c=document.getElementById("myCanvas");          
                preImage(i.src,function(){  
                    c.getContext("2d").drawImage(i,200, 620,100,100);
                    imgs = convertCanvasToImage(c);
                    $("#hetong").attr('src',imgs.src).show();
    
                    layer.confirm("请确认签名<br>![]( + i.src + )", {
                        btn: ['确认', '取消'] //按钮
                    }, function () {                
                        layer.msg('签名成功请上传');
                    }, function () {
                        layer.msg('取消成功');
                    }); 
    
                    var base64 = imgs.src;
                    $.ajax({
                        url: "服务器地址",
                        type: "post",
                        dataType:'json',
                        data:{base64:base64,id:$.trim('<{$id}>')},
                        success: function(data){
                            if(data.status == 'success'){
                                layer.msg(data.msg, {icon: 1});
                                setTimeout("window.location.href='/mcenter/member/index'",3000);
                            }else{
                                layer.msg(data.msg, {icon: 2});
                            }                   
                        }
                    });
                }); 
            
            });
    
            /* 解决谷歌浏览器的兼容问题 */
            function preImage(url,callback){  
                    var img = new Image(); //创建一个Image对象,实现图片的预下载  
                    img.src = url;               
                    if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数  
                        callback.call(img);  
                        return; // 直接返回,不用再处理onload事件  
                    }         
                    img.onload = function () { //图片下载完毕时异步调用callback函数。  
                        callback.call(img);//将回调函数的this替换为Image对象  
                    };  
                }   
    
            /* 将canvas转为图片 */
            function convertCanvasToImage(canvas) {  
                //新Image对象,可以理解为DOM  
                var image = new Image();  
                // canvas.toDataURL 返回的是一串Base64编码的URL
                // 指定格式 PNG  
                image.src = canvas.toDataURL("image/png");  
                return image;  
            }
        });
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:js手写签名合成条款图片源码

          本文链接:https://www.haomeiwen.com/subject/usrlhxtx.html