js手寫(xiě)簽名合成條款圖片
最近在項(xiàng)目中老板提出了一個(gè)需求，需要在手機(jī)上簽貸款合同包各。摘仅。。髓棋。
個(gè)人感覺(jué)這是一個(gè)沒(méi)有法律效應(yīng)東西实檀，可能就是給人一種形式感吧惶洲。但是需求既然提出來(lái)了按声，那么就要做出來(lái)，以下是個(gè)人整理的過(guò)程恬吕。
首先需要引入jQuery和jsignature插件签则。jsignature是專(zhuān)門(mén)為手寫(xiě)簽名準(zhǔn)備的。
一份完整的合同需要有什么：
- 合同條款
- 簽名
- 含有簽名的合同條款
合同條款
合同我定義了一個(gè)canvas畫(huà)布直接寫(xiě)在了canvas上铐料，但是這樣只能是固定的寬高渐裂。想要適應(yīng)不同屏幕的話(huà)可以寫(xiě)兩份，一份寫(xiě)文檔里钠惩，一份寫(xiě)canvas里柒凉，然后將canvas隱藏。
首先篓跛，先設(shè)置好canvas畫(huà)板膝捞，如下：
<canvas id="myCanvas" width="375" height="750" style="border:1px solid #d3d3d3; ">
對(duì)不起，你的瀏覽器不支持簽名＠⒐怠Ｊ咭А！
</canvas>
然后在這個(gè)畫(huà)板里寫(xiě)合同,為了避免生成的圖片是透明背景的沐寺，有些手機(jī)無(wú)法查看林艘，可以將畫(huà)板的背景渲染成白色：
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("身份證號(hào)碼：__",10,80);
ctx.fillText("乙方（貸款人）：",10,100);
ctx.fillText("企業(yè)代碼：",10,120);
ctx.fillText("協(xié)商一致的基礎(chǔ)上達(dá)成如下協(xié)議，以資雙方共同遵守混坞。",10,140);
ctx.fillText("乙方貸給甲方人民幣（大寫(xiě)）____狐援，于 ____年",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("違約責(zé)任：",10,280);
ctx.fillText("1场钉、借款方的違約責(zé)任",10,300);
ctx.fillText("（1）借款方不按合同規(guī)定的用途使用借款，貸款方有權(quán)收回部分",10,320);
ctx.fillText("或全部貸款懈涛，對(duì)違約使用的部分逛万，按銀行規(guī)定的利率加收罰息。",10,340);
ctx.fillText("（2）借款方如逾期不還借款批钠，貸款方有權(quán)追回借款宇植，并從到期日起",10,360);
ctx.fillText("付日息1%",10,380);
ctx.fillText("（3）借款方使用借款造成損失浪費(fèi)或利用借款合同進(jìn)行違法活動(dòng)的，",10,400);
ctx.fillText("貸款方應(yīng)追回貸款本息埋心，有關(guān)單位對(duì)直接責(zé)任人應(yīng)追究行政和經(jīng)濟(jì)",10,420);
ctx.fillText("責(zé)任指郁。情節(jié)嚴(yán)重的，由司法機(jī)關(guān)追究刑事責(zé)任拷呆。",10,440);
ctx.fillText("2闲坎、貸款方的違約責(zé)任",10,460);
ctx.fillText("（1）貸款方未按期提供貸款，應(yīng)按違約數(shù)額和延期天數(shù)茬斧，付給借",10,480);
ctx.fillText("款方違約金腰懂。違約金數(shù)額的計(jì)算與加收借款方的罰息計(jì)算相同。",10,500);
ctx.fillText("（2）利用借款合同進(jìn)行違法活動(dòng)的项秉，追究行政和經(jīng)濟(jì)責(zé)任绣溜。情",10,520);
ctx.fillText("節(jié)嚴(yán)重的，由司法機(jī)關(guān)追究刑事責(zé)任娄蔼。",10,540);
ctx.fillText("爭(zhēng)議解決方式： 雙方協(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);
}
簽名
如下恬叹，在頁(yè)面中放置簽名面板，設(shè)置好樣式：
<!-- 簽名面板 -->
<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>
然后調(diào)用JSignature,并設(shè)置好寬高同眯，這樣便可以在面板上簽名了：
function qianming(){
var arguments = {
width: '100%',
height: '300px',
signatureLine: false,//去除默認(rèn)畫(huà)布上那條橫線(xiàn)
lineWidth: '5'
};
$("#signature").jSignature(arguments);
}
如圖：
面板底下有確定和清除绽昼，編寫(xiě)相應(yīng)的函數(shù)就行了,以下是清除面板的函數(shù)，reset就行了
/* 清除畫(huà)布上的簽名 */
$('#clear').click(function () {
$("#signature").jSignature("reset");
});
含有簽名的合同條款
這一步就是關(guān)鍵的一步了须蜗，需要將簽名寫(xiě)進(jìn)合同里
<!-- 用于顯示繪制成的圖片 -->
<img src="" id="hetong" style="display: none" />
/* 將簽名寫(xiě)進(jìn)畫(huà)布里 */
$('#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(); // 將簽名寫(xiě)進(jìn)合同中并顯示出來(lái)
});
/* 解決谷歌瀏覽器的兼容問(wèn)題 */
function preImage(url,callback){
var img = new Image(); //創(chuàng)建一個(gè)Image對(duì)象硅确，實(shí)現(xiàn)圖片的預(yù)下載
img.src = url;
if (img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存目溉，直接調(diào)用回調(diào)函數(shù)
callback.call(img);
return; // 直接返回，不用再處理onload事件
}
img.onload = function () { //圖片下載完畢時(shí)異步調(diào)用callback函數(shù)菱农。
callback.call(img);//將回調(diào)函數(shù)的this替換為Image對(duì)象
};
}
/* 將canvas轉(zhuǎn)為圖片 */
function convertCanvasToImage(canvas) {
//新Image對(duì)象缭付，可以理解為DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64編碼的URL
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}
由于drawImage() 方法在支持 canvas 的不同瀏覽器上的表現(xiàn)不盡相同，因此調(diào)用了preImage函數(shù)循未，得確保圖片在加載完成的情況下再去做相關(guān)動(dòng)作陷猫。
至此合同算是簽完了，上傳圖片就OK啦的妖。绣檬。。
上圖
