xiuli.gao
/
newMedia


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手写签名</title>
    <link rel="stylesheet" href="./common/reset.css">
    <script type="text/javascript" src="./common/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="./common/jq-signature.js"></script>
    <script type="text/javascript">
        document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
        window.onresize = function(){
            document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
        } 
    </script>
    <style>
        .buttonDiv{
           display: flex;
           align-items: center;
           justify-content: space-around;
           margin-top: 0.6rem;
        }
        .buttonDiv button{
            width: 1rem;
            line-height: 0.3rem;
            border: none;
            background: #e9524a;
            color: #ffffff;
            border-radius: 0.3rem;
        }
        #clearBtn{
            background: #8e8e94;
        }
    </style>
</head>
<body>
    <!--签名区域-->
    <div class="js-signature"
        data-width="600"
        data-height="200"
        data-border="1px solid #ededed"
        data-background="#fff"
        data-line-color="#000"
        data-auto-fit="true">
    </div>
    <div class="buttonDiv">
        <button id="clearBtn" onclick="clearCanvas();">清除</button>
        <button id="saveBtn" onclick="saveSignature();" disabled>保存</button>  
    </div>
    <div id="signature"></div>  
<script>
    $(function () {
        $('.js-signature').jqSignature();
        
        $('.js-signature').on('jq.signature.changed', function() {
            $('#saveBtn').attr('disabled', false);
        }); 
        
        document.getElementsByClassName("js-signature")[0].addEventListener('touchstart', startEventHandler, {passive: false});
        function startEventHandler(event) {
            event.preventDefault();
        }
    })
    
    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);
    }
 

</script>
</body>
</html>