Calculation/app/view/profile/netcasign.ejs

<% include ./sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main">
            <h2>签字管理</h2>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0">
                <% if (ctx.session.sessionProject.page_show.openNetCaSign) { %>
                <nav class="nav nav-tabs m-3" role="tablist">
                    <a class="nav-item nav-link active" href="/profile/sign/netca">Ukey认证签名</a>
                    <a class="nav-item nav-link" href="/profile/sign">签字设置</a>
                </nav>
                <% } %>
                <div class="row m-0">
                    <div class="col-9 my-3">
                        <% if (!signData) { %>
                            <div id="set_ukey" class="form-group">
                                <label>网证通UKey</label>
                                <div>
                                    <button class="btn btn-sm btn-outline-primary" id="getCert">获取证书信息</button>
                                    <small class="form-text text-danger">请先插入网证通UKey获取证书信息再绑定</small>
                                    <textarea id="DeviceOutputId" readonly class="form-control mt-1 mb-1" rows="3"></textarea>
                                    <input type="hidden" id="name" />
                                    <input type="hidden" id="keyId" />
                                    <button class="btn btn-sm btn-outline-primary" id="bind_btn">绑定</button>
                                </div>
                            </div>
                        <% } %>
                        <div id="had_ukey" <% if (!signData) { %>style="display: none"<% } %>>
                            <div class="form-group">
                                <label>网证通UKey</label>
                                <div>
                                    <small class="form-text text-secondary">已绑证书信息</small>
                                    <textarea class="form-control mt-1 mb-1" id="had_textarea" readonly rows="3">证书主题：<%- signData ? signData.name : '' %>，keyId：<%- signData ? signData.keyId : '' %></textarea>
                                    <button class="btn btn-sm btn-outline-danger" data-toggle="modal" data-target="#remove-netcasign">解除绑定</button>
                                </div>
                            </div>
                            <!--账号资料-->
                            <form>
                                <div class="form-group">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input sign-type" type="radio" name="sign" id="sign-type-1" value="1" checked>
                                        <label class="form-check-label" for="sign-type-1">在线手写签名图</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input sign-type" type="radio" name="sign" id="sign-type-2" value="2">
                                        <label class="form-check-label" for="sign-type-2">上传签名图</label>
                                    </div>
                                </div>
                                <div class="form-group show-upload" style="display: none">
                                    <label>上传签名图</label>
                                    <input type="file" class="form-control-file" id="netcasign-upload">
                                    <small class="form-text text-danger">图片大小为600x300，格式PNG透明背景。</small>
                                </div>
                                <div class="form-group show-qrcode">
                                    <label>在线手写签名</label>
                                    <div><img src="/profile/qrCode?from=netcasign" width="150"></div>
                                    <small class="form-text text-danger">微信扫码使用在线手写程序</small>
                                </div>
                                <button id="remove-netcasign-sign-btn" type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#remove-netcasign-sign" <% if (!signData || !signData.sign_base64) { %>style="display: none" <% } %>>移除签名</button>
                                <div class="form-group">
                                    <label>签名图预览</label>
                                    <div>
                                        <div class="position-relative">
                                            <img src="/public/images/baobiao3.png">
                                            <div class="position-absolute fixed-top" id="netcasign-show" style="left:290px;top:320px">
                                                <% if (signData && signData.sign_base64) { %>
                                                    <img src="data:image/png;base64,<%- signData.sign_base64 %>" width="90">
                                                <% } %>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    const csrf = '<%= ctx.csrf %>';
</script>
<script type="text/javascript" src="/public/js/profile.js"></script>
<script src="/public/netcasign/js/base64.min.js"></script>
<script src="/public/netcasign/js/netcawebsocket.js"></script>
<script src="/public/netcasign/js/appPackage.js"></script>
<script>
    $(function () {
        $('#getCert').click(function () {
            getCertList();
        });

        $('#bind_btn').click(function () {
            if($('#DeviceOutputId').val() == '') {
                toastr.error('请获取证书信息再绑定');
                return;
            }
            postData('/profile/sign/save', {type: 'bind', updateData: {name: $('#name').val(), keyId: $('#keyId').val()}}, function (result) {
                toastr.success('绑定成功');
                $('#set_ukey').hide();
                $('#had_ukey').show();
                $('#had_textarea').val('证书主题：'+ result.name +'，keyId：' + result.keyId);
            })
        });

        $('#unbind_btn').click(function () {
            postData('/profile/sign/save', {type: 'unbind'}, function (result) {
                toastr.success('解绑成功');
                window.location.href = '/profile/sign/netca';
            })
        });

        $('#delsign_btn').click(function () {
            postData('/profile/sign/save', {type: 'delsign'}, function (result) {
                toastr.success('签名图已删除成功');
                $('#remove-netcasign-sign-btn').hide();
                $('#netcasign-show').html('');
            })
        });

        // 上传签名
        $('#netcasign-upload').change(function () {
            const file = this.files[0];
            const ext = file.name.toLowerCase().split('.').splice(-1)[0];
            const imgStr = /(png|PNG)$/;
            if (!imgStr.test(ext)) {
                toast('请上传正确的图片格式文件','error');
                return
            }
            if ($(this).val()) {
                const reader = new FileReader();
                reader.onload = function (evt) {
                    postData('/profile/sign/save', {type: 'savesign', sign_base64: evt.target.result.split(',')[1]}, function (result) {
                        toastr.success('签名图设置成功');
                        const html = '<img src="'+ evt.target.result +'" width="90">';
                        $('#netcasign-show').html(html);
                        $('#netcasign-upload').val('');
                        $('#remove-netcasign-sign-btn').show();
                    })
                };
                reader.readAsDataURL(file);
            }
        })
    })
</script>