h5 使用canvas实现电子签名和图片的保存

公司的业务表格登记需要使用上签名,所以做了一个电子签名的模块,网上看了很多相关资料,我选择使用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> 

3. 我是用 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();//在进入界面的时候进行初始化操作
      });
   

4. 清除重写和保存按钮的实现方法

   //清除
   $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 编码格式的图片赋值给展示界面        		
    };
   

5. 效果如下