簽名板 - “Type It”不起作用

Question

我正在嘗試使用this(GitHub) ，其中我的“Draw It”按預期工作，但“Type It”功能在我的inputHidden字段中沒有給我任何值。

請參閱 VF 頁面代碼和屏幕截圖以獲取更多信息：

畫出來

輸入它

VF 頁面代碼

<apex:page standardController="Case" extensions="signaturepadCaseController">
   <apex:includeScript value="{!URLFOR($Resource.jQuery,'js/jquery-1.6.2.min.js')}" />
   <apex:includeScript value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.min.js')}" />
   <apex:includeScript value="{!URLFOR($Resource.signature,'/signature/json2.min.js')}" />
   <apex:stylesheet value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.css')}" />

   <form method="post" action="#" class="sigPad">
       <label for="name">Print your name</label>
       <input type="text" name="name" id="name" class="name"/>
       <p class="typeItDesc">Review your signature</p>
       <p class="drawItDesc">Draw your signature</p>
      <ul class="sigNav">
         <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
         <li class="drawIt"><a href="#draw-it">Draw It</a></li>
         <li class="clearButton"><a href="#clear">Clear</a></li>
      </ul>
       <canvas class="pad" width="198" height="55" id="signatureCanvas1"></canvas>
      <div class="sig sigWrapper">
         <div class="typed" id="typeit">             
         </div>

         <canvas class="pad" width="198" height="55" id="signatureCanvas"></canvas>
         <input type="hidden" name="output" class="output" id="hidden"></input>

      </div>
      <input type="button" onclick="saveSignature();" value="Accept" class="btn" target="_parent" />
   </form>
   <script>
     // $('.sigPad').signaturePad(options);
      j$ = jQuery.noConflict();
      var api;
      j$(document).ready(function() {
          api = j$('.sigPad').signaturePad();
      });

      var canvas;
      var canvas1;
      var RecordID = '';

      function saveSignature() {
          canvas = document.getElementById("signatureCanvas");
          canvas1 = document.getElementById("signatureCanvas1");
         // if(j$('#hidden').val() == ''){                     
         //       alert('Please draw your signature');
         // }           
         // else{
              RecordId = '{!caseId}';
              var imgData;

              typeSign = j$('#typeit').text();

              if (typeSign != '') {                  
                  var ctx = canvas1.getContext("2d");
                  ctx.fillText(typeSign, 10, 10);      
              }
              imgData = canvas1.toDataURL("image/jpeg");
              imgData = imgData.split(',')[1];
              console.log('---'+imgData);
              strDataURI = imgData;              
              SignaturePad.signaturepadCaseController.saveSignature(strDataURI, RecordId, handleResult);
         // }
      }

      function handleResult(result) {

          if (result.indexOf('success:true')) {
              //window.top.location = '/{!Case.id}';
          } else {
              alert(result);
          }
      }
   </script>
</apex:page>

Answer 1

output變量僅在繪制簽名時設置。 輸入簽名時，不會繪制畫布，而是覆蓋帶有文本的 div 以創建效果。 如果您可以分叉代碼，您可以在項目的問題跟蹤器中查看更多詳細信息問題以及可能的解決方案。