ThinkPhp5.1 + jSignature implementiert die Online-Signaturfunktion

Online-Signaturen werden an vielen Stellen verwendet. Der Herausgeber hat kürzlich ein Projekt übernommen, bei dem die Funktion der Genehmigungssignatur auf dem Mobiltelefon implementiert werden muss um diese Funktion abzuschließen, teilen Sie sie als Referenz für alle.

Da Sie die jSignature-Bibliothek zum Erstellen von Signaturen verwenden, müssen Sie die jSignature-Bibliothek natürlich wie folgt herunterladen. Freunde können sie herunterladen:

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

Ich habe die jSignature-Bibliothek erhalten. Viele Freunde stecken möglicherweise in diesem Bereich fest. Sie können es sich ansehen:

jsignature Chinesisches Entwicklungshandbuch

Darüber hinaus muss jsignature mit der jQuery-Bibliothek verwendet werden, da sonst einige Funktionen nicht angezeigt werden können. Die Download-Adresse steht auch jedem zum Herunterladen zur Verfügung:

LinkJQuery herunterladen

Natürlich, Es gibt viele Versionen von jQuery. Die von mir verwendete ist jquery-3.2.1.js

Die vorläufige Vorbereitungsfunktion ist fertig und die Produktionsmethode wird unten bereitgestellt.

Das Frontend 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 instanziierte JSIGNATURE

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

E2 setzte die Signatur zurück

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

3 übermittelte die Signatur

Xiaobian verwendet TP5.1 + AJAX-Übermittlung [Verwandte Empfehlung:
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 Hintergrunddatenempfang (getSignInfo.php)

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

$src ist die Speicheradresse des Signaturbildes, die wir benötigen, $path ist der Speicherpfad des Signaturbildes

5 Base64 das Bild Der Code ist in ein Standardbild konvertiert (base64ContentToImage-Methode)

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

Das Obige ist die vollständige Produktionsmethode zur Verwendung der TP5.1 + jSignature-Bibliothek zum Generieren von Signaturen, zusammengefasst vom Editor. Ich hoffe, es wird für alle hilfreich sein.

Das obige ist der detaillierte Inhalt vonThinkPhp5.1 + jSignature implementiert die Online-Signaturfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!