sign.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>签名插件</title>
  8. <!-- <script src="./js/jquery.min.js"></script> -->
  9. <script src="../vendor/jquery-3.4.1/jquery.min.js"></script>
  10. <script type="text/javascript" src="js/jq-signature.js"></script>
  11. </head>
  12. <body>
  13. <!--签名区域-->
  14. <div class="js-signature"
  15. data-width="1200"
  16. data-height="400"
  17. data-border="1px solid #FFEBE8"
  18. data-background="#eadbbe"
  19. data-line-color="#000000"
  20. data-auto-fit="true">
  21. </div>
  22. <div>
  23. <button id="clearBtn" onclick="clearCanvas();" style="display:none">清空签名</button>
  24. <button id="saveBtn" onclick="saveSignature();"style="display:none" disabled>保存签名</button>
  25. </div>
  26. <script>
  27. var flag = false;
  28. $(function () {
  29. $('.js-signature').jqSignature();
  30. })
  31. //清除签名
  32. function clearCanvas() {
  33. flag = false;
  34. $('.js-signature').jqSignature('clearCanvas');
  35. $('#saveBtn').attr('disabled', true);
  36. }
  37. //保存签名
  38. function saveSignature() {
  39. $('#signature').empty();
  40. var dataUrl = $('.js-signature').jqSignature('getDataURL');
  41. $.ajax({
  42. type: "post",
  43. url: '../exam/judge/sign/save.htm',
  44. dataType : "json",
  45. data: {
  46. login_name: parent.document.getElementById('judgeName').value,
  47. exam_echo: parent.document.getElementById('numberBetween').value,
  48. ly_room_id: parent.document.getElementById('ly_room_id').value,
  49. judge_id: parent.document.getElementById('judge_id').value,
  50. time_type: parent.document.getElementById('time_type').value,
  51. data_url: dataUrl
  52. },
  53. success : function(response) {
  54. flag = true;
  55. if(response.success) {
  56. //alert('签名保存成功!');
  57. } else {
  58. alert(response.errorMsg);
  59. }
  60. }
  61. });
  62. }
  63. $('.js-signature').on('jq.signature.changed', function() {
  64. $('#saveBtn').attr('disabled', false);
  65. });
  66. $('.js-signature').on('touchmove', function(event) {
  67. if(event && event.preventDefault) {
  68. event.preventDefault();
  69. } else {
  70. window.event.returnValue = false;
  71. }
  72. });
  73. </script>
  74. </body>
  75. </html>