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

<!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>

最后编辑于：2017.12.08 13:23:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,033评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,725评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,473评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,846评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,848评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,691评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,053评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,700评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,856评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,676评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,787评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,430评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,034评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,990评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,218评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,174评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,526评论 2赞 343

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

推荐阅读更多精彩内容