• HTML5 canvas 在线涂鸦


    插件地址

    http://bencentra.github.io/jq-signature/

    采用技术

    • jq-signature.min.js
    • Developed using jQuery 2.1.4.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="jquery.min.js"></script>
    <script src="jq-signature.min.js"></script>
    <script>
    	$(function(){
    		$('.js-signature').jqSignature();
    	})
    	function clearCanvas() {
    		$('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
    		$('.js-signature').eq(1).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').eq(1).on('jq.signature.changed', function() {
    		$('#saveBtn').attr('disabled', false);
    	});
    </script>
    </head>
    <body>
    <div class="js-signature" data-width="600" data-height="200" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>
    			<p><button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">Clear Canvas</button> 
    			<button id="saveBtn" class="btn btn-default" onclick="saveSignature();" >Save Signature</button></p>
    <div id="signature">
    				<p><em>Your signature will appear here when you click "Save Signature"</em></p>
    			</div>
    </body>
    </html>
    

    截图

  • 相关阅读:
    深入 聚集索引与非聚集索引(一)
    mysql 忘记root密码(linux ok, windows 没试)
    (转)关于中国的互联网
    log4j:启动tomcat发现 log4j:WARN No appenders could be found for logger 解决办法 转载
    log4j
    书签
    高级数据模型
    silverlight第三方控件
    实体框架资源
    RIASilverlight 程序开发框架3
  • 原文地址:https://www.cnblogs.com/qingmiaokeji/p/10988911.html
Copyright © 2020-2023  润新知