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="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>
类似资料：