Html5 canvas签名插件---jq-signature

迷南。 2023-07-18 02:24 9阅读 0赞

常用的canvas签名插件

[http://www.htmleaf.com/html5/html5-canvas/201505281921.html][http_www.htmleaf.com_html5_html5-canvas_201505281921.html]

引入：

结构：

<div class="js-signature"
         data-width="600"
         data-height="200"
         data-border="1px solid #1ABC9C"
         data-background="#16A085"
         data-line-color="#fff"
         data-auto-fit="true">
    </div>  
    
    <button id="clearBtn" onclick="clearCanvas();">Clear Canvas</button>
    <button id="saveBtn" onclick="saveSignature();" disabled>Save Signature</button> 
    
    <div id="signature"></div>

初始化：

$(document).on('ready', function() {
      $('.js-signature').jqSignature();
    });
     
    function clearCanvas() {
      $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
      $('.js-signature').jqSignature('clearCanvas');
      $('#saveBtn').attr('disabled', true);
    }
     
    function saveSignature() {
      $('#signature').empty();
      var dataUrl = $('.js-signature').jqSignature('getDataURL');
      var img = $('<img>').attr('src', dataUrl);
      $('#signature').append($('<p>').text("Here's your signature:"));
      $('#signature').append(img);
    }
     
    $('.js-signature').on('jq.signature.changed', function() {
      $('#saveBtn').attr('disabled', false);
    });

如果有帮到你的话，欢迎激励一下作者。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[http_www.htmleaf.com_html5_html5-canvas_201505281921.html]: http://www.htmleaf.com/html5/html5-canvas/201505281921.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20230528/5957d9a07bd1404d90e814bbfb6162fd.png