ThinkPhp5.1 + jSignature는 온라인 서명 기능을 구현합니다.

온라인 서명은 여러 곳에서 사용됩니다. 최근 편집자가 승인 서명 기능이 포함된 프로젝트를 맡았습니다. 고객이 휴대폰에서 실시간 서명 기능을 구현해야 한다고 요청한 후 jSignature 라이브러리를 사용했습니다. 이 기능을 완료하려면 모든 사람이 참조할 수 있도록 공유하세요.

서명을 생성하려면 jSignature 라이브러리를 사용하므로 당연히 jSignature 라이브러리를 다운로드해야 합니다. 편집기에서는 다음과 같이 다운로드 주소를 제공합니다.

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

jSignature 라이브러리를 얻었습니다. 사용 방법 많은 친구들이 이 영역에 갇힐 수 있습니다. 마찬가지로 편집기에서 확인할 수 있습니다.

jsignature 중국어 개발 매뉴얼

또한 jsignature는 jQuery 라이브러리와 함께 사용해야 합니다. 그렇지 않으면 일부 기능이 표시되지 않습니다. 다운로드 주소는 모든 사람이 다운로드할 수 있도록 제공됩니다.

linkDownloading jQuery

물론, jQuery에는 여러 버전이 있습니다. 제가 사용하는 것은 jquery-3.2.1.js

사전 준비 기능이 준비되어 있으며, 제작 방법은 아래와 같습니다.

프런트 엔드 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 인스턴스화 JSIGNATURE

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

E2 서명 재설정

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

3 서명 제출

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

위는 TP5.1 + jSignature 라이브러리를 사용하여 편집자가 요약한 서명을 생성하는 완전한 제작 방법입니다. 모든 분들께 도움이 되길 바랍니다. 감사합니다!

위 내용은 ThinkPhp5.1 + jSignature는 온라인 서명 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!