一、前言
基于CryptoJS的前端H5加解密组件实现电子手写签名的demo案例,主要包括签名区域canvas、签名图案的base64加密、身份姓名对照编码及提交后端加密转码提交保存等步骤操作。
二、代码示例
1.html页面代码部分，效果预览页面点击查看
<!DOCTYPE html>@b@<html>@b@<head>@b@ <meta charset="utf-8">@b@ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />@b@ <link rel="stylesheet" media="all" href="./base-anysign.css">@b@ <style>@b@ h1,@b@ p,@b@ span,@b@ img {@b@ text-align: center;@b@ }@b@ .btn {@b@ display: block;@b@ height: 30px;@b@ border: 1px solid gray;@b@ background-color: gray;@b@ text-align: center;@b@ color: white;@b@ line-height: 30px;@b@ margin-top: 10px;@b@ }@b@ .input {@b@ width: 260px;@b@ border: 1px solid gray;@b@ }@b@ </style>@b@</head>@b@<body>@b@ @b@ <div class="btn" id="config">请确认下面协议事项</div>@b@ <!-- 自定义页面显示的内容-->@b@ <h1>协议条款</h1>@b@ <p>第一条 .............................................................................................................................</p>@b@ <p>第二条 .............................................................................................................................</p>@b@ <p>第三条 .............................................................................................................................</p>@b@ <div>@b@ <span>客户签名:</span>@b@ <img id="signName" width="100" height="100">@b@ </div>@b@ <div class="btn" id="sign">进行签名</div> @b@ <!-- 签名区域弹窗-->@b@ <center>@b@ <div id="dialog" style=" display:none;">@b@ <div id="anysign_title" style="color:#333333;" width="100%" height="10%">请<span style="font-size:20pt;"> 张 三 </span>签名</div>@b@ <div id="container" onmousedown="return false;">@b@ <canvas id="anysignCanvas" width="2"></canvas>@b@ </div>@b@ <div id="single_scrollbar">@b@ <span id="single_scroll_text"> *滑动操作：</span>@b@ <input id="single_scrollbar_up" type="button" class="button orange" value="左移" />@b@ <input id="single_scrollbar_down" type="button" class="button orange" value="右移" />@b@ </div>@b@ <div id="btnContainerOuter" width="100%">@b@ <div id="btnContainerInner" style="text-align: center; font-size:5pt;" width="100%">@b@ <input id="btnOK" type="button" class="button orange" value="确 定" onclick="sign_confirm();" />@b@ <input id="btnClear" type="button" class="button orange" value="清 屏" onclick="javascript:clear_canvas();">@b@ <input id="btnCancel" type="button" class="button orange" value="取 消" onclick="cancelSign();">@b@ </div>@b@ </div>@b@ </div>@b@ </center>@b@ <script src="./base-anysign.js" type="text/javascript"></script>@b@ <script src="./index.js"></script>@b@</body>@b@</html>2.控件定义index.js代码如下
(function() {@b@@b@ var apiInstance = new baseAnysign.AnySignApi();@b@ window.apiInstance = apiInstance;@b@@b@ var url = 'http://www.xwood.net/cust/app/sign';@b@ var templateUrl = 'D234b83d6b7d046c5542e566aebc67a5e';@b@ var channel = 'CHANNEL_001'; @b@ var signKey = "14345ea7b45633432c8ff344"; //手书唯一标识@b@ var pdfKey = '客户签名'; //pdf模板中的关键字，用于定位签名图像@b@ var signerName = 'MyCA'; //签名姓名@b@ var signerIDCard = '340824199611172164'; //签名身份证@b@ var timeTagValid = false;@b@ var timeTagPos = 1;@b@@b@@b@ var signBtn = document.getElementById('sign'); @b@ var signNameImg = document.getElementById('signName');@b@ var configBtn = document.getElementById('config');@b@@b@ configBtn.addEventListener('click', function() {@b@ handleConfig();@b@ });@b@@b@ signBtn.addEventListener('click', function() {@b@ handleSign();@b@ });@b@@b@ @b@@b@ var handleConfig = function() { @b@ alert('参数配置使用成功');@b@ }@b@@b@ var handleSign = function() {@b@@b@ var success = apiInstance.initAnySignApi(function(contextId, contextType, value) {@b@ if (contextType === apiInstance.CALLBACK_TYPE_SIGNATURE) { //签名后的图片@b@ var signNameImage = "data:image/png;base64," + value;@b@ signNameImg.src = signNameImage;@b@ }@b@ }, channel);@b@ if (!success) {@b@ alert('初始化失败');@b@ return;@b@ }@b@@b@ apiInstance.setTemplate(baseAnysign.TemplateType.PDF, 'baseAnysign', signKey, 4000); //baseAnysign和4000的值随意，不为空即可@b@@b@ var signer = new baseAnysign.Signer(signerName, signerIDCard);@b@@b@ var signerRule1 = new baseAnysign.SignRule_KeyWord(pdfKey, 3, 35, 1, 2); //有三种类型，SignRule_XYZ不太精确，建议使用其他两种@b@ var signatureConfig1 = new baseAnysign.SignatureConfig(signer, signerRule1);@b@@b@ var timeTag = new baseAnysign.TimeTag(timeTagPos, "yyMMdd hh:mm;ss"); //1:时间在上、2：时间在下、3：时间在右@b@ timeTagValid && (signatureConfig1.timeTag = timeTag);@b@@b@ success = apiInstance.addSignatureObj(20, signatureConfig1);@b@ if (!success) {@b@ alert('添加签名对象1失败');@b@ return;@b@ }@b@ @b@ success = apiInstance.commitConfig();@b@ if (!success) {@b@ alert('提交配置失败');@b@ return;@b@ }@b@@b@ var result = apiInstance.showSignatureDialog(20);@b@ switch (result) {@b@ case apiInstance.RESULT_OK:@b@ //alert('签名弹窗打开成功');@b@ break;@b@ case apiInstance.EC_API_NOT_INITED:@b@ alert('接口没有初始化');@b@ return;@b@ case apiInstance.EC_WRONG_CONTEXT_ID:@b@ alert('没有配置相应签字对象');@b@ return;@b@ case apiInstance.EC_TEMPLATE_NOT_SET:@b@ alert('签名表单未配置');@b@ return;@b@ }@b@ }@b@@b@ @b@@b@})();3.后端提交代码参考模板头文件如下
Request URL:http://www.xwood.net/cust/app/sign@b@Request Headersview source@b@Content-Type:application/x-www-form-urlencoded@b@Origin:null@b@User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1@b@Form Dataview URL encoded @b@ signData:{"Version":"1.0","EncCertSN":"4340990000019ecf6a","EncKey":"IrwbdgVYg5BZl7xvt3dE+3CwWiecxsNjo9kL+vk5cCvun//+bQetS.....xN8fucfBURBCRLVe81APcQHKGwowBbbdcBWsKCackcGiuIbfAq3WzLWgUY="}@b@ signKey:55514ea7b84304004c8G498@b@ pdfKey:客户签名@b@ templateUrl:F4243b83d6b7d046c8815e499aebc67a5d