ThinkPhp5.1 + jSignature implements online signature function

Online signatures are used in many places. The editor recently took on a project, which involves the approval signature function. The customer required that the real-time signature function on the mobile phone must be implemented. After research, the jSignature library was used to complete this Function, share it for everyone’s reference.

Since the jSignature library is used to create signatures, of course you need to download the jSignature library. The editor provides the download address as follows. Friends can go to download:

https://www .phpclasses.org/browse/file/42277.html

After getting the jSignature library, how to use it? Many friends may be stuck in this area. Similarly, the editor is Please provide documentation, you can check it out:

jsignature Chinese Development Manual

In addition, jsignature needs to be used with the jQuery library, otherwise some functions cannot be used Display, the download address is also provided for everyone to download:

linkDownloading jQuery

Of course, there are many versions of jQuery, and the editor uses jquery-3.2. 1.js

The preliminary preparation function is ready, and the production method is provided below.

Front-end 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=&#39;signature&#39; style=&#39;background-color: #d2d2e8;&#39;></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 Instantiate jsignature

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

2 Reset signature

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

3 Submit signature

The editor uses TP5.1 ajax submission [Related recommendations: thinkphp video tutorial]

//点击确定按钮,把签名的转成图片,然后把数据放进图片中,最后把图片中的数据传到后台
$("#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 Background data reception (getSignInfo.php)

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

$src is the saving address of the signature image we need, $path is the saving path of the signature image

5 Convert the image base64 code into a standard image (base64ContentToImage method)

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;
    }
}

The above is the complete summary of the editor using the TP5.1 jSignature library to generate a signature Production method, I hope it will be helpful to everyone, thank you!

The above is the detailed content of ThinkPhp5.1 + jSignature implements online signature function. For more information, please follow other related articles on the PHP Chinese website!