ThinkPhp5.1 + jSignature如何实现在线签名功能

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

前端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 class="main_sign" id="writers">    <div id='signature' style='background-color: #d2d2e8;'></div>    <button type="button" class="sign_btn" id="reset" style="margin: 10px 5px;">重写</button>    <button type="button" class="sign_btn" id="yes" style="margin: 10px 5px;">确认</button>    <div id="show_img" style="display: none;"><img src="" id="images"></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提交【相关推荐：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如何实现在线签名功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。