admin 管理员组

文章数量: 1184232

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

问题描述：微信访问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="/"+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 = '/';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="/"+window.baseName+"/mobile/index.html"+'?_refresh_time_='+new Date().getTime();}});}})(jQuery)</script></body>
</html>

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

版权声明：本文标题：jSignature签名时手写不出现笔迹，就是写不上字 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/p/1698025263a283247.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。