1

使用 jSignature，我将图像字符串从数据库（base30）中提取出来。我检查数据库中的内容，并执行以下操作： 1. 隐藏我的清除按钮 2. 显示我的编辑按钮 3. 将我的 base 30 数据导入 jsignature div 4. 从 jsignature 创建一个图像，并在图像 div 5. 隐藏我的 jsignature div

if ($("input[name=hiddenSigData]").length)
{
$(".clrButton").hide();
$(".editButton").show();
$(".signature").jSignature("importData", 'data:'+ 
$("input[name=hiddenSigData]").val());


var datapair = $sigdivAppt.jSignature("getData", "svgbase64") 
 var i = new Image()
 i.src = "data:" + datapair[0] + "," + datapair[1] 
  $(".divImageofSig").html('');
  $(i).appendTo($(".divImageofSig")) // append the image (SVG) to DOM.                 
$('.sigWrapper').hide();

}

我对此进行了编辑：

        $(".editButton").on("click", function(e) {
                $(".clrButton").show();
                $(".cancelEditButton").show();
                $(".editButton").toggle();
                $(".divImageofSig").hide();
                $(".sigWrapper").show();
                 window.dispatchEvent(new Event('resize'));

        });

在桌面上，这非常有效（FF/Chrome）。显示正确的按钮，隐藏图像 div，并显示签名 div，看起来像这样：

    <div class='sigWrapper'><div class="parentofsignature">
        <div class="signature"></div>
        </div>
    </div>
    <div class='divImageofSig'></div>

但是：在移动设备上，当我单击编辑时，图像 div 隐藏，并且 jsignature div 显示为空白。我知道它已被填充，因为如果我跳过上面描述的初始隐藏，两个 div 都会出现。

这真的很奇怪：如果我点击取消，然后再次编辑，它显示得很好！！

这是我的取消功能：

$(".cancelEditButton").on("click", function(e) {
            $(".divImageofSig").toggle();
            //$(".sigWrapper").toggle();
            $(".clrButton").toggle();
            $(".editButton").toggle();
            if ($("input[name=hiddenSigData]").length)
            {           

                $sigdivAppt.jSignature("importData", 'data:'+ $("input[name=hiddenSigData]").val());


               var datapair = $sigdivAppt.jSignature("getData", "svgbase64") 
               var i = new Image()
               i.src = "data:" + datapair[0] + "," + datapair[1] 
               $(".divImageofSig").html('');
               $(i).appendTo($(".divImageofSig")) // append the image (SVG) to DOM.
                $('.sigWrapper').hide();
             }
            });

所以问题是：为什么隐藏一个包含 jsignature 画布的 div，然后重新显示它会导致它空白？这发生在移动 Safari 和 iOS 版 chrome 中。

4

0 回答 0