最近应公司要求做了一个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);
});
效果如下: