基于angularJs1.x的h5 签名

最新推荐文章于 2025-06-19 16:33:29 发布

原创最新推荐文章于 2025-06-19 16:33:29 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #h5 #签名

web前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用HTML5和jQuery插件实现的电子签名方案。通过简单的代码配置即可完成签名绘制、清除及保存功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近应公司要求做了一个h5的电子签名，废话不多说，直接上代码

<!--HTML部分-->
<script src="lib/jquery.1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jq-signature.js" type="text/javascript" charset="utf-8"></script>
<div class="js-signature"
	         data-width="600"
	         data-height="200"
	         data-border="1px solid #1ABC9C"
	         data-background="#16A085"
	         data-line-color="#000"
	         data-auto-fit="true" 
	         data-line-width="5">
	    </div>
	    <button id="clearBtn" ng-click="clearCanvas();">清空签名</button>
	    <button id="saveBtn" ng-click="saveSignature();" disabled>保存签名</button>
	    <div id="signature"></div>

//js部分
$(function(){
$('.js-signature').jqSignature();
});	
	    $scope.clearCanvas=function() {
	        $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
	        $('.js-signature').jqSignature('clearCanvas');
	        $('#saveBtn').attr('disabled', true);
	    }
	    $scope.saveSignature=function() {
	        $('#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);
	    });

效果如下：
这里写图片描述