jSignature 签名时手写不出现笔迹，就是写不上字

最新推荐文章于 2024-04-13 09:41:14 发布

胖鹅儿

最新推荐文章于 2024-04-13 09:41:14 发布

阅读量1.4k

点赞数 1

分类专栏：微信开发文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_34735821/article/details/104606842

版权

微信开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题描述：微信访问H5网页A，在A页面首次加载后，签名功能正常使用，没有问题。当A页面跳转到B页面，B页面回退到A页面后，在A页面使用监听pageshow时间如果是缓存页面强制重新加载A页面，保证A页面逻辑正常使用，但是在回退刷新A页面后签名功能出现问，签字不出现笔迹，获取签字内容时候，才显示出来，。

window.addEventListener('pageshow', function(e) {
	if (e.persisted || (window.performance &&window.performance.navigation.type == 2)) {
		window.location.href="https://wxtest.lifecircle.digital-media.com.cn/web/"+window.baseName+"/mobile/index.html"+'?_refresh_time_='+new Date().getTime();
	}
});

签字功能代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script type="text/javascript" src="js/modernizr.custom.50992.js"></script>
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/swiper.animate.min.js"></script>
    <!--[if lt IE 9]>-->
    <script type="text/javascript" src="js/flashcanvas.js"></script>
    <style type="text/css"></style>
</head>
<body>
<!--轮播-->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <section class="swiper-slide swiper-slide1">
            内容1
        </section>
        <section class="swiper-slide swiper-slide2">
			内容2
            <div id="btngo" ></div>
        </section>
        <section class="swiper-slide swiper-slide5">
			内容3
            <!--签名框-->
            <div id="content">
                <div id="signatureparent">
                    <div id="signature"></div>
                </div>
                <div style="text-align:center;position:absolute;top:83%;width:100%;height:7%">
                    <div id="btnReset" value=""></div>
                    <div id="btnSave" value=""></div>
                </div>
            </div>
        </section>
    </div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jSignature.js"></script>
<script src="js/jSignature.min.noconflict.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script>
    (function ($) {
        window.onload=function(){
            // 签名功能
            window.$sigdiv = $("#signature").jSignature({
                'UndoButton': false,
                'height': '170px',
                'width': '93%',
            });
            // 轮播
            var swiper = new Swiper('.swiper-container', {
                direction: 'vertical',
                mousewheelControl: true,
                onInit: function(swiper){
                    swiperAnimateCache(swiper); //隐藏动画元素
                    swiperAnimate(swiper); //初始化完成开始动画
                },
                onTouchStart: function (swiper, even) {
                    swiper.unlockSwipeToPrev();
                    swiper.unlockSwipeToNext();
                    if (swiper.isEnd) {
                        swiper.lockSwipeToNext();
                    } else if (swiper.activeIndex == 4 && $("#signature").jSignature("getData", "native").length > 0) {
                        swiper.lockSwipeToNext();
                        swiper.lockSwipeToPrev();
                    }
                },

                onSlideChangeEnd: function (swiper) {
                    swiperAnimate(swiper);
                },
                onTransitionEnd: function (swiper) {
                    swiperAnimate(swiper);
                },
                onSetTransition: function (swiper, speed) {
                    for (var i = 0; i < swiper.slides.length; i++) {
                        es = swiper.slides[i].style;
                        es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

                    }
                },
                onProgress: function (swiper) {
                },
            });
            //去第三方
            $("#btngo").bind("click",function () {
                // 跳转外网
                window.location.href = 'http://www.bjwomenlll.cn/';
                return false;
            });

            //保存
            $("#btnSave").on("click", function () {
                // 没签名
                if ($("#signature").jSignature("getData", "native").length == 0) {
                    return;
                }
				//获取签名内容
                var basedata = "data:" + window.$sigdiv.jSignature('getData', "image");
                // base64转file对象代码
                function dataURLtoFile(dataurl, filename) {
                    let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    return new File([u8arr], filename.split('.')[0] + '.png', {type: mime});
                }
                var file = dataURLtoFile(basedata, "signName.png");
                var formData = new FormData();
                formData.append("file", file);
                // 上传签名图片
                $.ajax({
                    type: 'POST',
                    url: window.baseUrl+"/file/upfile",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.code == 200) {
                            // 保存用户信息 
                            var fd = new FormData();
                            fd.append("nickName", window.userinfos.nickname);
                            fd.append("portraitUrl", window.userinfos.headimgurl);
                            fd.append("signUrl", res.data);
                            $.ajax({
                                type: 'post',
                                url: window.baseUrl+'/api/infos',
                                data: fd,
                                processData: false,
                                contentType: false,
                                success: function (data) {
                                    // 清空签名
                                    window.$sigdiv.jSignature('reset');
                                }
                            });
                        }
                    }
                });
            });
			//重写签名
            $("#btnReset").on("click", function () {
                window.$sigdiv.jSignature('reset');
            });
			//监听回退
            window.addEventListener('pageshow', function(e) {
                // alert(e.persisted);
                if (e.persisted || (window.performance &&
                    window.performance.navigation.type == 2)) {
                    window.location.href="https://wxtest.lifecircle.digital-media.com.cn/web/"+window.baseName+"/mobile/index.html"+'?_refresh_time_='+new Date().getTime();
                }
            });
        }

    })(jQuery)

</script>

</body>
</html>

胖鹅儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jSignature 签名时手写不出现笔迹，就是写不上字

问题描述：微信访问H5网页A，在A页面首次加载后，签名功能正常使用，没有问题。当A页面跳转到B页面，B页面回退到A页面后，在A页面使用监听pageshow时间如果是缓存页面强制重新加载A页面，保证A页面逻辑正常使用，但是在回退刷新A页面后签名功能出现问，签字不出现笔迹，获取签字内容时候，才显示出来，。window.addEventListener('pageshow', function(e) ...
复制链接

扫一扫