2017-09-28 8 views
0

내 프로젝트에서 "jsignature"라는 서명 캡처 플러그인을 만들고 있습니다. 아래 양식과 같이 필드에 추가하고 싶습니다. enter image description hereJavaScript - jsignature 기능을 사용자 정의하는 방법은 무엇입니까?

하지만 양식의 텍스트 영역뿐 아니라 양식의 클릭 기능을 사용하고 싶지 않습니다. 서명 만 변경하고 데이터를 제출하면 게시물을 저장해야합니다. 불행히도 이것을 자바 스크립트로 사용자 정의하고 싶습니다.이 문제를 파악하는 데 실패하고 있습니다.

내 코드는 다음과 같습니다

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<!-- jQuery --> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 
<script 
    src="https://cdn.jsdelivr.net/npm/[email protected]/libs/jSignature.min.js"></script> 

<!--[if lt IE 9]> 
<script type="text/javascript" src="libs/flashcanvas.js"></script> 
<![endif]--> 

<!-- jSignature --> 
<style> 
#signature { 
    width: 100%; 
    height: auto; 
    border: 1px solid black; 
} 
</style> 
<form method="post" action="test.php"> 
    <!-- Signature area --> 
    <div id="signature"></div> 
    <br /> <input type='button' id='click' value='click'> 
    <textarea id='output' name='sig'></textarea> 
    <br /> 

    <!-- Preview image --> 
    <img src='' id='sign_prev' style='display: none;' /> <input 
     type="submit" name="submit"> 
</form> 
<!-- Script --> 
<script> 
    $(document).ready(function() { 

     // Initialize jSignature 
     var $sigdiv = $("#signature").jSignature({ 
      'UndoButton' : true 
     }); 
     true 
     $('#click').click(function() { 
      // Get response of type image 
      var data = $sigdiv.jSignature('getData', 'image'); 

      // Storing in textarea 
      $('#output').val(data); 

      // Alter image source 
      $('#sign_prev').attr('src', "data:" + data); 
      $('#sign_prev').show(); 
     }); 
    }); 
</script> 
</html> 

내가 코드를 변경할 위치를 알 수 없습니다. 텍스트 영역 및 클릭 버튼이 없어도 양식을 제출 한 후 데이터베이스에 데이터를 저장하려고합니다. 누군가 나에게 게시물, 튜토리얼 또는 도움을 제안 할 수 있습니까?

답변

1

난이 지금

<script> 
     $(document).ready(function() { 
      // Initialize jSignature 
      var $sigdiv = $("#signature").jSignature({ 
       'UndoButton' : true 
      }); 
      true 

      $('#signature').change(function() {  
       var data = $sigdiv.jSignature('getData', 'image'); 
       // Storing in textarea 
       $('#output').val(data); 

       // Alter image source 
       $('#sign_prev').attr('src', "data:" + data); 
       $('#sign_prev').show(); 
      }); 
     }); 
    </script> 
+1

Thanks.just 찾고있는 내가 .I이 change.anyway으로 시도 대답 감사를 가지고 무엇을 추측 –

관련 문제