<!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("企業(yè)代碼：",10,120);
ctx.fillText("協(xié)商一致的基礎(chǔ)上達成如下協(xié)議邑退，以資雙方共同遵守竹宋。",10,140);
ctx.fillText("乙方貸給甲方人民幣（大寫）____，于 ____年",10,160);
ctx.fillText("____月 ____日前交付甲方地技。",10,180);
ctx.fillText("借款利息：_____________",10,200);
ctx.fillText("借款期限：_____________",10,220);
ctx.fillText("還款日期： ____年 ____月 ____日蜈七。 還款方式：現(xiàn)金/_________",10,240);
ctx.fillText("支付。",10,260);
ctx.fillText("違約責任：",10,280);
ctx.fillText("1莫矗、借款方的違約責任",10,300);
ctx.fillText("（1）借款方不按合同規(guī)定的用途使用借款飒硅，貸款方有權(quán)收回部分",10,320);
ctx.fillText("或全部貸款，對違約使用的部分作谚，按銀行規(guī)定的利率加收罰息三娩。",10,340);
ctx.fillText("（2）借款方如逾期不還借款，貸款方有權(quán)追回借款妹懒，并從到期日起",10,360);
ctx.fillText("付日息1%",10,380);
ctx.fillText("（3）借款方使用借款造成損失浪費或利用借款合同進行違法活動的雀监，",10,400);
ctx.fillText("貸款方應(yīng)追回貸款本息，有關(guān)單位對直接責任人應(yīng)追究行政和經(jīng)濟",10,420);
ctx.fillText("責任彬伦。情節(jié)嚴重的，由司法機關(guān)追究刑事責任伊诵。",10,440);
ctx.fillText("2单绑、貸款方的違約責任",10,460);
ctx.fillText("（1）貸款方未按期提供貸款，應(yīng)按違約數(shù)額和延期天數(shù)曹宴，付給借",10,480);
ctx.fillText("款方違約金搂橙。違約金數(shù)額的計算與加收借款方的罰息計算相同。",10,500);
ctx.fillText("（2）利用借款合同進行違法活動的笛坦，追究行政和經(jīng)濟責任区转。情",10,520);
ctx.fillText("節(jié)嚴重的，由司法機關(guān)追究刑事責任版扩。",10,540);
ctx.fillText("爭議解決方式： 雙方協(xié)商解決废离，解決不成，提交__________人民",10,560);
ctx.fillText("法院礁芦。",10,580);
ctx.fillText("本合同自 _____生效蜻韭。本合同一式兩份，雙方各執(zhí)一份柿扣，合同文本",10,600);
ctx.fillText("具有同等法律效力肖方。",10,620);
ctx.fillText("甲方（簽字、蓋章）：",10,640);
ctx.fillText("乙方（簽字未状、蓋章 附身份證復(fù)印件）：",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>", {
btn: ['確認', '取消'] //按鈕
}, function () {
layer.msg('簽名成功請上傳');
}, function () {
layer.msg('取消成功');
});
var base64 = imgs.src;
$.ajax({
url: "服務(wù)器地址",
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(); //創(chuàng)建一個Image對象俯画，實現(xiàn)圖片的預(yù)下載
img.src = url;
if (img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù)
callback.call(img);
return; // 直接返回司草，不用再處理onload事件
}
img.onload = function () { //圖片下載完畢時異步調(diào)用callback函數(shù)艰垂。
callback.call(img);//將回調(diào)函數(shù)的this替換為Image對象
};
}
/* 將canvas轉(zhuǎn)為圖片 */
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手寫簽名合成條款圖片源碼
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來姐浮，“玉大人谷遂，你說我怎么就攤上這事÷衾穑” “怎么了肾扰？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長蛋逾。 經(jīng)常有香客問我集晚，道長，這世上最難降的妖魔是什么区匣？ 我笑而不...
- 正文 為了忘掉前任偷拔，我火速辦了婚禮，結(jié)果婚禮上亏钩，老公的妹妹穿的比我還像新娘莲绰。我一直安慰自己，他們只是感情好姑丑，可當我...
- 文/花漫 我一把揭開白布蛤签。 她就那樣靜靜地躺著，像睡著了一般栅哀。 火紅的嫁衣襯著肌膚如雪顷啼。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼扛施，長吁一口氣：“原來是場噩夢啊……” “哼鸿捧！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起疙渣，我...
- 正文 年R本政府宣布，位于F島的核電站嘉蕾，受9級特大地震影響贺奠，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜荆针，卻給世界環(huán)境...
- 文/蒙蒙 一敞嗡、第九天 我趴在偏房一處隱蔽的房頂上張望颁糟。 院中可真熱鬧航背，春花似錦、人聲如沸棱貌。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽婚脱。三九已至今魔，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間障贸，已是汗流浹背错森。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- js手寫簽名合成條款圖片 最近在項目中老板提出了一個需求，需要在手機上簽貸款合同睡蟋。踏幻。。戳杀。個人感覺這是一個沒有法律效...
- 項目需求 ：Android 展示Html保單模版頁面该面， 類似于這種界面 然后調(diào)用簽名（其實就一個繪畫的窗口），簽上...
- 最近要實現(xiàn)一個手寫簽名功能桥嗤，要求是须妻，在一定區(qū)域繪制文字簽名，簽名完成后泛领，添加新的水印荒吏，并且將圖片僅保留簽字區(qū)域剪切...
- 簡介 由于項目需求，安卓的同事做了這樣一個功能渊鞋，iOS不用做绰更，我還是找了找資料，做了一個小dome锡宋，GitHub地...
