使用 signature_pad 与 bootstrap 模式和 ajax 保存

Question

使用 this code 将签名块插入表单。使用标准的 HTML 表单，效果很好（即非 ajax 调用，但提交给 URL 的表单）。

但我现在要做的是在页面上的 bootstrap 模态元素中添加 canvas，该元素最初是隐藏的。然后我将模式设置为显示，并启动 canvas。然后 - 当提交表单（包括填写的签名）时 - 表单数据通过 ajax (jQuery).

保存

我的问题是，在触发 ajax 保存时，我不断收到与 canvas/signaturePad 未定义相关的错误 - signaturePad is not defined。

这是签名代码，包含在bootstrap modal:

 <div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
      <canvas></canvas>
    </div>
  </div>

这是 jQuery 代码，当我启动模态时（效果很好 - 我可以在 canvas 上签名）：

       $("#ModalActionCost").modal('show');

       var wrapper = document.getElementById("signature-pad");
        var canvas = wrapper.querySelector("canvas");
        var signaturePad = new SignaturePad(canvas, {
          backgroundColor: 'rgb(255, 255, 255)'
        });

这是我保存表单内容时的代码：

    $("#trigger").click(function(e){

        var dataURL = signaturePad.toDataURL();   <-- this is the line I get the error on.
        $("#hiddenSignature").val(signaturePad.toDataURL("image/png").replace("data:image/png;base64,", ""));

        var hiddenSignature = $("#hiddenSignature").val();
        // ajax call follows.
        ......
   });

我得到的错误是：signaturePad is not defined

为了尝试解决这个错误，我想我需要在通过 ajax 保存时再次启动 canvas（调用 var signaturePad...）——这确实有效，而且 pad blob 值已发送 - 但当然我得到一个空白 canvas，因为它在重新定义时已被擦除。

我整理了一个 jsfiddle 流程的简化版本 - 它似乎有效 enter link description here，但我无法弄清楚为什么我的上面的版本不起作用。

Answer 1

我的解决方案，对其他人：

将创建 signature_pad 的实例 - 从打开模式的函数 - 移动到一般页面的 onload：

    var wrapper = document.getElementById("signature-pad");
    var canvas = wrapper.querySelector("canvas");
    var signaturePad = new SignaturePad(canvas, {
      backgroundColor: 'rgb(255, 255, 255)'
    });

Answer 2

不确定您的代码到底出了什么问题，但您可以采取以下措施来解决它。

检查您的包装器和 canvas 变量，使用与 canvas 相同的 console.log(wrapper); 查看它们是否未定义或为空。如果它们实际上具有值，那么在您的代码中，signaturePad 变量可能会在点击触发器之前被覆盖，或者无法从点击事件中访问（超出范围）。

我建议解决它的方法是给 canvas 本身一个 id :

<canvas id="SignaturePadCanvas"></canvas>

然后这样做：

const canvas  = document.querySelector("#SignaturePadCanvas");
const context = canvas.getContext("2d");
const signaturePad = new SignaturePad(canvas, {
          backgroundColor: 'rgb(255, 255, 255)'
        });

$("#trigger").click(function(e){

    if(signaturePad == null || signaturePad == undefined)
    {
        console.log(canvas); //  debuging 
        return alert('signaturePad is undefined');
    }

    var dataURL = signaturePad.toDataURL();   

    if (_signature.isEmpty()) {      
      return alert("cannot get the data of an empty signature");
    }   

    $("#hiddenSignature").val(signaturePad.toDataURL("image/png").replace("data:image/png;base64,", ""));

    var hiddenSignature = $("#hiddenSignature").val();

});

使用 signature_pad 与 bootstrap 模式和 ajax 保存

Using signature_pad with bootstrap modal and ajax saving

ajax

jquery

signaturepad