微信电子健康卡——实现前端上传身份证通过身份证OCR接口读取身份证数据

页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Regist_new.aspx.cs" Inherits="SysFrameWeb.View.ViewChat.Regist_new" %><!DOCTYPE html><html><head><title>电子健康卡</title><%-- <script type="text/javascript" src="https://js.aq.qq.com/js/aq_common.js"></script>--%><meta charset="utf-8" /><meta name="format-detection" content="telephone=no" /><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><meta name="mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><link rel="stylesheet" type="text/css" href="css/base.css" /><link rel="stylesheet" type="text/css" href="css/regist_new.css?asdfaa" /><link rel="stylesheet" type="text/css" href="css/weui.min.css" /><script src="js/jquery.min.js"></script><script src="pictureHandle/js/tools.js"></script><script src="pictureHandle/js/pictureHandle.js"></script></head><body><form runat="server"><div class="wrap"><div class="input-tab"><div class="form"><div class="form-element" style="display:none;"><input class="btn btn-default" type="file" id="upFile" /><!--后台所要获取的文件base64--><input id="imgOne" name="imgOne" type="text"/><!--所选文件压缩前预览--><img src="" id="preview"/><!--所选文件压缩后预览--><h3>压缩后预览：</h3><img src="" id="nextview"/></div><div class="form-element"><p class="label">姓名</p><div class="input-block"><input class="name" id="name" placeholder="填写持卡人的姓名" runat="server" /></div></div><div class="form-element"><p class="label">身份证号码</p><div class="input-block"><input class="idCard" id="idCard" placeholder="填写持卡人的身份证号" maxlength="18" runat="server" /></div><a class="upload-idcard" id="imgSFZ"><img class="photo-pic" src="img/photo.png" alt="" /><span>上传身份证</span></a></div><div class="form-element"><p class="label">民族</p><div class="input-block select-nation"><input disabled placeholder="选择民族" id="nation" class="nation" value="" runat="server" /></div></div><div class="form-element"><p class="label">详细地址</p><div class="input-block text-area"><textarea placeholder="请输入详细地址" class="address-detail" id="address" runat="server"></textarea></div></div></div><div class="form form-phone-verify" id="form-phone-verify" style="display:block"><div class="form-element"><p class="label">成员关系</p><div class="input-block select-nations"><input disabled placeholder="选择成员关系" id="txtcygx" class="nation" value="" runat="server" /></div></div><div class="form-element"><p class="label">手机号码</p><div class="input-block"><input id="phone" maxlength="11" class="phone" placeholder="填写接收通知的号码" runat="server" /></div></div></div><asp:Button ID="btn" runat="server" Text="完成申领" OnClick="btn1_ServerClick" CssClass="next-btn"  /></div></div><div class="loading-mask" ><div class="loading"><img src="./img/loading.gif" alt="" /><p>识别中...</p></div></div><div class="mask" id="ocrfail-alert"><div class="alert"><div class="text"><p>不能正确识别身份信息，请重新上传。</p></div><div class="operation"><a class="confirm-btn" id="confirm-btn">确定</a></div></div></div><script type="text/javascript" src="js/weui.min.js"></script><script type="text/javascript" src="js/common.js"></script><script type="text/javascript" src="js/zepto.min.js"></script><script type="text/javascript" src="js/picker.min.js"></script><script type="text/javascript" src="js/jweixin-1.4.0.js"></script><script type="text/javascript" src="js/regist_new.js?v=1551248412777"></script></form></body>
</html><script type="text/javascript">$(document).ready(function () {$('#imgSFZ').click(function () {$('#upFile').click();});});</script>

pictureHandle.js

$(function(){var _upFile=document.getElementById("upFile");_upFile.addEventListener("change",function(){if (_upFile.files.length === 0) {  alert("请选择图片");  return; }  var oFile = _upFile.files[0]; //if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }  /*  if(oFile.size>5*1024*1024){  message(myCache.par.lang,{cn:"照片上传：文件不能超过5MB!请使用容量更小的照片。",en:"证书上传：文件不能超过100K!"})  return;  }*/  if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){  alert("照片上传：文件类型必须是JPG、JPEG、PNG");  return;  }var reader = new FileReader();  reader.onload = function(e) {  var base64Img= e.target.result;//压缩前预览$("#preview").attr("src",base64Img);  //--执行resize。  var _ir=ImageResizer({  resizeMode:"auto"  ,dataSource:base64Img  ,dataSourceType:"base64"  ,maxWidth:1200 //允许的最大宽度  ,maxHeight:600 //允许的最大高度。  ,onTmpImgGenerate:function(img){  }  ,success:function(resizeImgBase64,canvas){//压缩后预览$("#nextview").attr("src",resizeImgBase64); //赋值到隐藏域传给后台$('#imgOne').val(resizeImgBase64.substr(22));if ($('#imgOne').val() != ""){$.ajax({url: 'http://localhost:16013/API/AjaxHandler.ashx?Action=InsBase64',type: 'POST',dataType: 'json',data: {imgOne: $('#imgOne').val()},success: function (data) {$('#name').val(data.cardInfo.name);$('#idCard').val(data.cardInfo.id);$('#nation').val(data.cardInfo.nation);$('#address').val(data.cardInfo.address);}});}}  ,debug:true  });  };  reader.readAsDataURL(oFile);  },false);  });

tools.js

/** * 这是基于html5的前端图片工具，压缩工具。 */
var ImageResizer=function(opts){  var settings={  resizeMode:"auto"//压缩模式，总共有三种  auto,width,height auto表示自动根据最大的宽度及高度等比压缩，width表示只根据宽度来判断是否需要等比例压缩，height类似。  ,dataSource:"" //数据源。数据源是指需要压缩的数据源，有三种类型，image图片元素，base64字符串，canvas对象，还有选择文件时候的file对象。。。  ,dataSourceType:"image" //image  base64 canvas  ,maxWidth:150 //允许的最大宽度  ,maxHeight:200 //允许的最大高度。  ,onTmpImgGenerate:function(img){} //当中间图片生成时候的执行方法。。这个时候请不要乱修改这图片，否则会打乱压缩后的结果。  ,success:function(resizeImgBase64,canvas){  }//压缩成功后图片的base64字符串数据。  ,debug:false //是否开启调试模式。  };  var appData={};  $.extend(settings,opts);  var _debug=function(str,styles){  if(settings.debug==true){  if(styles){  console.log(str,styles);  }  else{  console.log(str);  }  }  };
var innerTools={  getBase4FromImgFile:function(file,callBack){  var reader = new FileReader();  reader.onload = function(e) {  var base64Img= e.target.result;  //var $img = $('<img>').attr("src", e.target.result)  //$('#preview').empty().append($img)  if(callBack){  callBack(base64Img);  }  };  reader.readAsDataURL(file);  }  //--处理数据源。。。。将所有数据源都处理成为图片图片对象，方便处理。  ,getImgFromDataSource:function(datasource,dataSourceType,callback){  var _me=this;  var img1=new Image();  if(dataSourceType=="img"||dataSourceType=="image"){  img1.src=$(datasource).attr("src");  if(callback){  callback(img1);  }  }  else if(dataSourceType=="base64"){  img1.src=datasource;  if(callback){  callback(img1);  }            }  else if(dataSourceType=="canvas"){  img1.src = datasource.toDataURL("image/jpeg");  if(callback){  callback(img1);  }  }  else if(dataSourceType=="file"){  _me.getBase4FromImgFile(function(base64str){  img1.src=base64str;  if(callback){  callback(img1);  }  });  }  }  //计算图片的需要压缩的尺寸。当然，压缩模式，压缩限制直接从setting里面取出来。  ,getResizeSizeFromImg:function(img){  var _img_info={  w:$(img)[0].naturalWidth,  h:$(img)[0].naturalHeight  };  console.log("真实尺寸：");  console.log(_img_info);  var _resize_info={  w:0  ,h:0  };  if(_img_info.w<=settings.maxWidth&&_img_info.h<=settings.maxHeight){  return _img_info;  }  if(settings.resizeMode=="auto"){  var _percent_scale=parseFloat(_img_info.w/_img_info.h);  var _size1={  w:0  ,h:0  };  var _size_by_mw={  w:settings.maxWidth  ,h:parseInt(settings.maxWidth/_percent_scale)  };  var _size_by_mh={  w:parseInt(settings.maxHeight*_percent_scale)  ,h:settings.maxHeight  };  if(_size_by_mw.h<=settings.maxHeight){  return _size_by_mw;  }  if(_size_by_mh.w<=settings.maxWidth){  return _size_by_mh;  }  return {  w:settings.maxWidth  ,h:settings.maxHeight  };  }  if(settings.resizeMode=="width"){  if(_img_info.w<=settings.maxWidth){  return _img_info;  }  var _size_by_mw={  w:settings.maxWidth  ,h:parseInt(settings.maxWidth/_percent_scale)  };  return _size_by_mw;  }  if(settings.resizeMode=="height"){  if(_img_info.h<=settings.maxHeight){  return _img_info;  }  var _size_by_mh={  w:parseInt(settings.maxHeight*_percent_scale)  ,h:settings.maxHeight  };  return _size_by_mh;  }  }  //--将相关图片对象画到canvas里面去。  ,drawToCanvas:function(img,theW,theH,realW,realH,callback){  var canvas = document.createElement("canvas");  canvas.width=theW;  canvas.height=theH;  var ctx = canvas.getContext('2d');  ctx.drawImage(img,
0,//sourceX,
0,//sourceY,
realW,//sourceWidth,
realH,//sourceHeight,
0,//destX,
0,//destY,
theW,//destWidth,
theH//destHeight  );  //--获取base64字符串及canvas对象传给success函数。  var base64str=canvas.toDataURL("image/jpeg");  if(callback){  callback(base64str,canvas);  }  }  };  //--开始处理。  (function(){  innerTools.getImgFromDataSource(settings.dataSource,settings.dataSourceType,function(_tmp_img){  setTimeout(function(){var __tmpImg=_tmp_img;  settings.onTmpImgGenerate(_tmp_img);  //--计算尺寸。  var _limitSizeInfo=innerTools.getResizeSizeFromImg(__tmpImg);  console.log(_limitSizeInfo);  var _img_info={  w:$(__tmpImg)[0].naturalWidth,  h:$(__tmpImg)[0].naturalHeight  };  innerTools.drawToCanvas(__tmpImg,_limitSizeInfo.w,_limitSizeInfo.h,_img_info.w,_img_info.h,function(base64str,canvas){  settings.success(base64str,canvas);  }); },1000);});  })();  var returnObject={  };  return returnObject;
};

调用的后台程序一般处理程序

            //上传照片if (strAction == "InsBase64"){string imgBase = context.Request.Form["imgOne"] as string;HealthOpenAuth hoa = new HealthOpenAuth();hoa.Initialize();string msg = hoa.Lx_ocrInfo(imgBase);context.Response.Write(msg);}

其他问题：

查看地址

微信电子健康卡——实现前端上传身份证通过身份证OCR接口读取身份证数据相关推荐

关于微信电子健康卡回调地址错误问题
问题:去微信电子健康卡获取wechatCode,回调地址错误. 原因:回调地址加了&,应该是? 解决方案,回调url加上?号
微信电子健康卡操作类
1.CacheHelper.cs 缓存文件 using System; using System.Collections.Generic; using System.Linq; using Syste ...
微信电子健康卡——身份证照片OCR接口
接口地址:https://p-healthopen.tengmed.com/rest/auth/HealthCard/HealthOpenPlatform/ISVOpenObj/ocrInfo 该接口 ...
微信电子健康卡——获取健康卡二维码接口
静态二维码通过调用barcodeJs生成二维码 <%@ Page Language="C#" AutoEventWireup="true" CodeBe ...
电子健康卡（码）理解
政策文件国家卫生健康委关于加快推进电子健康卡普及应用工作的意见(国卫办规划发[2018]34号) 各省.自治区.直辖市及新疆生产建设兵团卫生健康委(卫生计生委),委直属和联系单位,委属(管)医院: ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
关于前端上传文件到后台，文件大小超出限制，导致上传失败的解决办法。
文章出处:Jiangkuobo,微信:jkb_267460 文章目录前言一.使用elementPlus上传图片,出现的问题. 二.验证猜想 1.验证方式: 2.测试结果: 3.我的猜想与验证三. ...
微信小程序+SpringBoot实现文件上传与下载
微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...

微信电子健康卡——实现前端上传身份证通过身份证OCR接口读取身份证数据

微信电子健康卡——实现前端上传身份证通过身份证OCR接口读取身份证数据相关推荐

最新文章

热门文章