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提交【相关推荐：thinkphp视频教程】
//点击确定按钮,把签名的转成图片,然后把数据放进图片中,最后把图片中的数据传到后台
$("#yes").click(function(){
//将画布内容转换为图片
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 后台数据接收（getSignInfo.php）
$data = Request::param(); $src = $this->base64ContentToImage($data['src_data'],$path);
$src就是我们需要的签名图片保存地址,$path为签名图片的保存路径
5 将图片base64码转化为标准的图片（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)){
//检查是否有该文件夹，如果没有就创建，并给予最高权限
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;
}
}关于“ThinkPhp5.1 + jSignature如何实现在线签名功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
