jquery 通过微信扫码实现在线签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线签名</title>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<style type="text/css">
    a {
        text-decoration: none;
    }
    a:hover {
        text-decoration: none;
    }
    #box {
        width: 100%;
        height:200px;
        border: 1px solid #eaeaea;
    }
    canvas {
        height: 200px !important;
    }
    .abspan {
        background: #0077FF;
        color: #fff;
        border-radius: 4px;
        height: 34px;
        line-height: 34px;
        padding: 0px 20px;
        border: none;
        float: right;
        font-size: 14px;
        margin-left: 30px;
        margin-top: 30px;
    }
    .abspanCancel {
        background: transparent;
        border-radius: 4px;
        height: 34px;
        line-height: 34px;
        padding: 0px 20px;
        font-size: 14px;
        color: #0077FF;
        border: 1px solid #0077FF;
        float: right;
        margin-top: 30px;
    }
    .hint-mes{width: 100%;height: 30px;line-height: 30px;margin: 20px 0px;text-align: center;font-size: 14px;color:#F56C6C;}
</style>
<body>
    <div style="margin: 12px;">
        <div class="form-group">
            <div class="col-sm-8">
                <div id="box">
                </div>
                <div class="hint-mes" id="hintMes"></div>
                <span class="abspan" id="sureBtn">确认</span>
                <span class="abspanCancel" id="resetBtn">重置</span>
            </div>
        </div>
        </form>
    </div>
</body>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/flashcanvas.js"></script>
<script src="js/jSignature.min.js"></script>
<script>
    $(function () {
        $("#box").jSignature(); //初始化画板，初始化之后就可以进行操作
    });
    //点击事件为获取base64数据，生成图片
    document.getElementById("sureBtn").onclick = function () {
        //getData:获取数据
        //reset：复位/重置
        // 获取签名的“base64”数据对
        var datapair = $("#box").jSignature("getData", "image");
        //此处打印的是完整的base64转码，可以复制后去在线转码测试一下是否正常
        console.log('data:' + datapair[0] + "," + datapair[1])
        //将图片展示出来
        $("#image").attr('src', 'data:' + datapair[0] + "," + datapair[1]);
        var paramsData={
            agree:false,
            signature:'data:' + datapair[0] + "," + datapair[1],
        }
        function getQueryVariable(variable)
            {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=");
                        if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
        var Authorization= getQueryVariable("Authorization")//'Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJkb2xwaGluIiwic3ViIjoiMTgxMjM0NTY3ODkiLCJhdXRob3JpdGllcyI6WyJST0xFX0VYUEVSVCJdLCJpYXQiOjE2Mzk2MTkzMDgsImV4cCI6MTYzOTY0MDkwOH0.YKLyP4qkdlmfl6-_PEuq1puRX_1dkKb4YElh6vphTEfn28k1GYe4y2P040foe0qbxO1dx2nLGdD_SLb8wppkSg'
        var Id=getQueryVariable("id")
        let hrefLocation=window.location.host
        $.ajax({
                url: 'https://'+hrefLocation+'?Authorization='+Authorization,
                type: 'PUT',
                dataType: 'json',
                headers:{
                    "content-type": "application/json",
                },
                data:JSON.stringify(paramsData),
                success: function( response ) {
                    $("#hintMes").html("签名成功")
                    if(Id){
                        window.location.href=`/h5/expert/project/detail/${Id} `
                    }else{
                        window.close();
                        WeixinJSBridge.call('closeWindow')
                    }


                },
                error: function (request) {
                    $("#hintMes").html("签名失败，请重新再签")
                    window.close();
                    WeixinJSBridge.call('closeWindow')
                },
            });
    }
    //点击事件为重置画板
    document.getElementById("resetBtn").onclick = function () {
        $("#box").jSignature("reset");
        $("#hintMes").html("")
    }
    //重点来了，该方法将Base64格式转换成流格式
    function base64toFile(dataurl, filename) {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split('/')[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
            type: mime
        })
    }
</script>
</html>
本文来自余倩倩投稿，不代表 PmTemple 立场，如若转载，请注明出处：
。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com