ThinkPhp5.1 + jSignature implémente la fonction de signature en ligne

La signature en ligne est utilisée dans de nombreux endroits. L'éditeur a récemment lancé un projet impliquant la fonction de signature d'approbation. Le client a demandé que la fonction de signature en temps réel sur le téléphone mobile soit implémentée. Après recherche, la bibliothèque jSignature a été utilisée. pour compléter cette fonction. Partagez-la pour la référence de tous.

Puisque vous utilisez la bibliothèque jSignature pour créer des signatures, vous devez bien sûr télécharger la bibliothèque jSignature. L'éditeur fournit l'adresse de téléchargement comme suit. Les amis peuvent télécharger :

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

J'ai la bibliothèque jSignature. Comment l'utiliser ? De nombreux amis peuvent être bloqués dans cette zone. De même, l'éditeur vous fournit de la documentation :

jsignature. Manuel de développement chinois

De plus, jsignature doit être utilisé avec la bibliothèque jQuery, sinon certaines fonctions ne peuvent pas être affichées. L'adresse de téléchargement est également fournie pour que tout le monde puisse la télécharger :

lienTéléchargement de jQuery

Bien sûr, il existe de nombreuses versions de jQuery. Celle que j'utilise est jquery-3.2.1.js

La fonction de préparation préliminaire est prête et la méthode de production est fournie ci-dessous.

Le front-end HTMLre

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

E1 a instancié JSIGNATURE

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

E2 réinitialise la signature

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

3 Soumettez la signature

Xiaobian utilise TP5.1 + AJAX soumis [Recommandation associée
thinkphp tutoriel vidéo

】

//点击确定按钮,把签名的转成图片,然后把数据放进图片中,最后把图片中的数据传到后台
$("#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 Réception des données d'arrière-plan (getSignInfo.php)

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

$src est l'adresse de sauvegarde de l'image de signature dont nous avons besoin, $path est le chemin de sauvegarde de l'image de signature

5 Base64 l'image Le code est converti en image standard (méthode 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;
    }
}

Ce qui précède est la méthode de production complète utilisant la bibliothèque TP5.1 + jSignature pour générer des signatures résumée par l'éditeur. J'espère que cela sera utile à tout le monde, merci !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!