这篇文章将为大家详细讲解有关ThinkPhp5.1 + jSignature如何实现在线签名功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

前端HTML

<style>.main_sign{padding:10px10px;color:black;background-color:darkgrey;}.main_sign.sign_btn{padding:5px10px;}#signature{border:2pxdottedblack;}</style><divclass="main_sign"id="writers"><divid='signature'style='background-color:#d2d2e8;'></div><buttontype="button"class="sign_btn"id="reset"style="margin:10px5px;">重写</button><buttontype="button"class="sign_btn"id="yes"style="margin:10px5px;">确认</button><divid="show_img"style="display:none;"><imgsrc=""id="images"></div></div>

1 实例化jsignature

$(document).ready(function(){vararguments={width:'100%',height:'200px',};$("#signature").jSignature(arguments);});

2 重置签名

$("#reset").click(function(){$("#signature").jSignature("reset");//重置画布，可以进行重新作画$("#images").attr('src','');});

3 提交签名

小编使用的是TP5.1 + ajax提交【相关推荐：thinkphp视频教程】

//点击确定按钮,把签名的转成图片,然后把数据放进图片中,最后把图片中的数据传到后台$("#yes").click(function(){//将画布内容转换为图片var$signature=$("#signature");vardatapair=$signature.jSignature("getData","image");$("#images").attr('src','data:'+datapair[0]+","+datapair[1]);varsrc_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 后台数据接收（getSignInfo.php）

$data=Request::param();$src=$this->base64ContentToImage($data['src_data'],$path);

$src就是我们需要的签名图片保存地址,$path为签名图片的保存路径

5 将图片base64码转化为标准的图片（base64ContentToImage方法）

publicfunctionbase64ContentToImage($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)){//检查是否有该文件夹，如果没有就创建，并给予最高权限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{returnfalse;}}else{returnfalse;}}

关于“ThinkPhp5.1 + jSignature如何实现在线签名功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。