ThinkPhp5.1 jSignature melaksanakan fungsi tandatangan dalam talian

Tanda tangan dalam talian digunakan di banyak tempat Editor baru-baru ini mengambil projek, yang melibatkan fungsi tandatangan kelulusan Pelanggan memerlukan fungsi tandatangan masa nyata pada telefon mudah alih telah digunakan untuk melengkapkan Fungsi ini, kongsikannya untuk rujukan semua orang.

Memandangkan anda menggunakan perpustakaan jSignature untuk membuat tandatangan, sudah tentu anda perlu memuat turun perpustakaan jSignature Editor menyediakan alamat muat turun seperti berikut. Rakan boleh pergi untuk memuat turun:

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

Selepas mendapat pustaka jSignature, bagaimanakah cara untuk menggunakannya? , editor menerangkan Sila sediakan dokumentasi, anda boleh menyemaknya:

Manual Pembangunan Cina jsignature

Selain itu, jsignature perlu digunakan dengan jQuery perpustakaan, jika tidak sesetengah fungsi tidak akan berfungsi Untuk paparan, alamat muat turun juga disediakan untuk semua orang memuat turun:

pautanMemuat turun jQuery

Sudah tentu, terdapat banyak versi jQuery, dan editor menggunakan jquery-3.2 1.js

Fungsi penyediaan awal sudah sedia, dan kaedah pengeluaran disediakan di bawah.

HTML bahagian hadapan

<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 Sertakan jsignature

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

2 Tetapkan semula tandatangan

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

3 Serahkan tandatangan

Editor menggunakan penyerahan ajax TP5.1 [Cadangan berkaitan: tutorial video 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 Penerimaan data latar belakang (getSignInfo.php)

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

$src ialah alamat storan imej tandatangan yang kami perlukan, $path ialah The saving laluan imej tandatangan

5 Tukar kod base64 imej kepada imej standard (kaedah 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;
    }
}

Di atas adalah editor Merumuskan kaedah pengeluaran lengkap menggunakan perpustakaan jSignature TP5.1 untuk menjana tandatangan Saya harap ia akan membantu semua orang, terima kasih!

Atas ialah kandungan terperinci ThinkPhp5.1 jSignature melaksanakan fungsi tandatangan dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!