公司的业务表格登记需要使用上签名,所以做了一个电子签名的模块,网上看了很多相关资料,我选择使用jq 里面带有的签名功能,使用jq-signature.js来实现.
1.将jQuery和jq-signature.js文件 引入项目里面;
<script src="lib/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="lib/jq-signature.js" ></script>
jQuery不同版本下载大全
jq-signature.js下载地址
2. 设置界面
<div class="canvasDiv">
<div class="js-signature"
data-width="700"
data-height="400"
data-border="1px solid #555"
data-background="#fff"
data-line-color="#000"
data-auto-fit="true">
</div>
</div>
<div class="canvas-bottom-btn">
<button id="clearBtn" ng-click="clearCanvas();">重写</button>
<button id="saveBtn" ng-click="saveSignature();">保存</button>
</div>
-
我是用 angular+ionic 框架的,所以js 部分是写在了 controller 里面,我在进入电子签名界面的时候进行初始化
$ionicModal.fromTemplateUrl('templates/util/signature.html', { scope: $scope, animation: 'lr-slide-in-right' }).then(function (modal) { $scope.editModal = modal; $scope.editModal.show(); $('.js-signature').jqSignature();//在进入界面的时候进行初始化操作 });
-
清除重写和保存按钮的实现方法
//清除 $scope.clearCanvas=function() { $('.js-signature').jqSignature('clearCanvas'); }; //保存 $scope.saveSignature=function() { console.log('保存签名'); var dataUrl = $('.js-signature').jqSignature('getDataURL'); console.log(dataUrl); $scope.beforeImgUrl = dataUrl;//将返回得到的 data64 编码格式的图片赋值给展示界面 };
-
效果如下