在線簽名，在很多地方都會有所使用，小編最近接了一個項目，里面涉及到審批簽名功能，客戶要求必須實現(xiàn)手機端實時簽名功能，經(jīng)過研究，利用JSignature庫，完成了這一功能，分享出來，供大家參考。
既然使用jSignature庫實現(xiàn)簽名的制作，當然需要下載jSignature庫，小編這里提供下載地址如下，各位小伙伴可前往下載：
https://www.phpclasses.org/browse/file/42277.html
立即學(xué)習“PHP免費學(xué)習筆記（深入）”；
拿到了jSignature庫，該怎么去使用，有很多小伙伴可能會卡在這一塊，同樣，小編為各位提供說明文檔，各位可前去查閱：
https://www.phpclasses.org/browse/file/42277.html
立即學(xué)習“PHP免費學(xué)習筆記（深入）”；
另外，jsignature 需要配合jquery庫使用，不然某些功能無法展示，同樣提供下載地址，供大家下載：
https://www.phpclasses.org/browse/file/42277.html
立即學(xué)習“PHP免費學(xué)習筆記（深入）”；
當然，jQuery有很多版本，小編使用的是jquery-3.2.1.js
前期的準備功能準備完了，下面為大家提供制作方法。
前端html
<style> .main_sign{ padding: 10px 10px; color:black; background-color:darkgrey; } .main_sign .sign_btn{ padding: 5px 10px; } #signature { border: 2px dotted black; } </style><div> ????<div></div> ????<button>重寫</button> ????<button>確認</button> ????<div>@@##@@</div> </div>
1 實例化jsignature
$(document).ready(function(){ ????var?arguments?=?{ ????????width:?'100%', ????????height:?'200px', ????}; ????$("#signature").jSignature(arguments); });
2 重置簽名
$("#reset").click(function(){ ????$("#signature").jSignature("reset");?//重置畫布，可以進行重新作畫 ????$("#images").attr('src',''); });
3 提交簽名
小編使用的是TP5.1 + ajax提交【相關(guān)推薦：https://www.phpclasses.org/browse/file/42277.html】
//點擊確定按鈕,把簽名的轉(zhuǎn)成圖片,然后把數(shù)據(jù)放進圖片中,最后把圖片中的數(shù)據(jù)傳到后臺 $("#yes").click(function(){ ????//將畫布內(nèi)容轉(zhuǎn)換為圖片 ????var?$signature?=?$("#signature"); ????var?datapair?=?$signature.jSignature("getData",?"image"); ????$("#images").attr('src','data:'?+?datapair[0]?+?","?+?datapair[1]); ????var?src_data?=?$("#images").attr('src');//拿到圖片中的src，這就是我們需要的base64 ????//console.info(src_data);//顯示生成的筆跡圖片 ????//在這里就寫我們的后臺操作 ????$.ajax({ ????????url:"{:url('getSignInfo')}", ????????data:{src_data:src_data}, ????????type:"post", ????????dataType:"json", ????????success:function(data){ ????????????window.location.href?=?data.dump_url; ????????}, ????????error:function(){ ????????????console.log("錯誤"); ????????} ????}); });
4 后臺數(shù)據(jù)接收（getSignInfo.php）
$data?=?Request::param(); $src?=?$this->base64ContentToImage($data['src_data'],$path);
$src就是我們需要的簽名圖片保存地址,$path為簽名圖片的保存路徑
5 將圖片base64碼轉(zhuǎn)化為標準的圖片（base64ContentToImage方法）
public?function?base64ContentToImage($base64_image_content,$path){ ????$dir?=?"./".$path; ????if(!file_exists($dir)){ ????????mkdir(iconv("GBK",?"UTF-8",?$dir),0777,true); ????} ????//匹配出圖片的格式 ????if?(preg_match('/^(data:s*image/(w+);base64,)/',?$base64_image_content,?$result)){ ????????$type?=?$result[2]; ????????$new_file?=?$path."/".date('Ymd',time())."/"; ????????if(!file_exists($new_file)){ ????????????//檢查是否有該文件夾，如果沒有就創(chuàng)建，并給予最高權(quán)限 ????????????mkdir($new_file,?0700); ????????} ????????$new_file?=?$new_file.time().".{$type}"; ????????if?(file_put_contents($new_file,?base64_decode(str_replace($result[1],?'',?$base64_image_content)))){ ????????????return?'/'.$new_file; ????????}else{ ????????????return?false; ????????} ????}else{ ????????return?false; ????} }
