微信识别图片功能实现(以读取银行卡为例)
2017-11-11 00:46
423 查看
一，需求讲解
如图所示，扫描图片的时候，实现银行卡号和银行名称自动回填。
接口网址（事例）：http://cloud.exocr.com/
二，代码
2.1，html页面
1 <input type="file" name="upload" style="display:none;" onchange="ocrScan(this);" id="upload" accept="image/*"/>
2
3
4 <li class="item-list">
5 <span class="name" >银行卡号</span>
6 <img class="fr bank-img" onclick="ocrScanProxy();" src="${rc.contextPath}/js/css/images/Icon_scan@2x.png"/>
7 <input class="fr bank-number" id="accountNoShow" name="accountNoShow" value="${orderParam.accountNoShow?default('')}" placeholder="请填写卡号，扫描可自动填充" />
8 </li>
9
10 function ocrScanProxy(){
11 $("#upload").click();
12 }
13
14 function ocrScan(imgFile){
15 var file = imgFile.files[0];//文件对象
16 var name = file.name;//图片名
17 var url = '${rc.contextPath}/wxInComing.htm?method=ocrScan';
18 $.ajaxFileUpload({
19 url: url,
20 secureuri:false,
21 type: 'POST',
22 fileElementId:"upload",
23 dataType: 'json',
24 success: function (data, status) //服务器成功响应处理函数
25 {
26 var index = data.indexOf('{');
27 data= data.substring(index, data.length);
28 var obj = eval('(' + data + ')');
29 if ("000" == obj.code) {
30 $("#accountNo").val(obj.data.cardno.replace(/\s/g,''));
31 $("#accountNoShow").val(obj.data.cardno);
32 var bankName = obj.data.bankname;
33 if(bankName.indexOf('(') > -1) {
34 bankName = bankName.substring(0,bankName.indexOf('('))
35 }
36 $("#bankNameShow").text(bankName);
37 $("#bankName").val(bankName);
38 } else {
39 alert(obj.desc);
40 }
41 },
42 error: function (data, status, e)//服务器响应失败处理函数
43 {
44 alert(e);
45 }
46 });
47 }
以上用的是ajaxupload异步提交，解决请求头的问题。一旦发送请求在到达方法前已近把post里面的图片放到这个目录下面去了，
D:\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp5\work\Catalina\localhost\项目名，换句话就是说在发送请求之前，到达方法之前就会把这张图片放到这个目录下，一旦请求结束，这张照片就会被删除。
上面的图片中的post转的就是这张图片的二进制的内容。
后续对HttpServletRequest 和response进行细致的了解，https://www.cnblogs.com/xdp-gacl/p/3798347.html这个博文不错
2.2，ocrScan类
1 public void ocrScan(HttpServletRequest request, HttpServletResponse response) {
2 Map<String, Object> result = new HashMap<String, Object>();
3 try {
4 MultipartHttpServletRequest multipartRequest = null;
5 multipartRequest = (MultipartHttpServletRequest) request;
6 MultipartFile inputFile = multipartRequest.getFile("upload");
7 if(null == inputFile){
8 result.put("code", "002");
9 result.put("desc", "图片不能为空");
10 super.toJson(result, response);
11 return;
12 }
13 Map<String, Object> bankCardRecognize = ocrService.bankCardRecognize(inputFile);
14 if("0".equals(bankCardRecognize.get("Error"))){
15 result.put("code", "000");
16 result.put("desc", "sucesss");
17 result.put("data", bankCardRecognize.get("Result"));
18 super.toJson(result, response);
19 return;
20 } else {
21 result.put("code", bankCardRecognize.get("Error"));
22 result.put("desc", bankCardRecognize.get("Details"));
23 super.toJson(result, response);
24 return;
25 }
26 } catch(Exception e) {
27 logger.error("com.bill99.query.controller.WXinComingController.ocrScan()发生异常,异常信息为:",e);
28 result.put("code", "003");
29 result.put("desc", "ocr识别异常");
30 super.toJson(result, response);
31 return;
32 }
33 }
到这之后可以得到inputfile的参数
MultipartFile inputFile = multipartRequest.getFile("upload");
--这是根据id来获取的异步请求的数据，主要有图片的名称，地址，大小，还有input为file图片格式的name
它的结果为
name=timg.jpg, StoreLocation=D:\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp5\work\Catalina\localhost\weixin\upload__6daf3b82_15fa64c1e0f__8000_00000010.tmp, size=103086bytes, isFormField=false, FieldName=upload
在这只不过是图片的一个路径而已，不是二进制的文件，调用的类回去这里面去读取数据的。
现在把这个file传给ocr的识别系统
Map<String, Object> bankCardRecognize = ocrService.bankCardRecognize(inputFile);
2.3，OcrService接口
1 /** 2 * 银行卡识别 3 * 4 * @param imageFile 5 * @return 6 */ 7 Map<String, Object> bankCardRecognize(MultipartFile imageFile);
2.4，OcrServiceImpl实现类
1 @Override
2 public Map<String, Object> bankCardRecognize(MultipartFile imageFile) {
3 return ocrServer.pictureRecognition("BankCard", imageFile);
4 }
2.5，ocr服务接口调用类OcrServer
1 package com.bill99.coe.ocr.client;
2
3 import java.io.FileInputStream;
4 import java.io.IOException;
5 import java.util.HashMap;
6 import java.util.Map;
7
8 import org.apache.commons.codec.binary.Base64;
9 import org.slf4j.Logger;
10 import org.slf4j.LoggerFactory;
11 import org.springframework.web.multipart.MultipartFile;
12
13 import com.bill99.boss.domain.service.CpConfigService;
14 import com.bill99.boss.utils.util.JsonUtils;
15 import com.bill99.coe.ocr.utils.HttpUtil;
16
17 /**
18 * ocr服务接口调用
19 *
20 * @author liangjian.sun
21 *
22 */
23 public class OcrServer {
24 /**
25 * 日志
26 */
27 private static Logger logger = LoggerFactory.getLogger(OcrServer.class);
28
29 /**
30 * 配置参数服务
31 */
32 private CpConfigService cpConfigService = null;
33
34 /**
35 * 图片识别
36 * @param recotype
37 * 要识别的证件类型
38 * @param imageFile
39 * 要识别的证件文件
40 * @return Map<String, Object>
41 * 识别结果
42 */
43 public Map<String, Object> pictureRecognition(String recotype, MultipartFile imageFile) {
44 String result = null;
45 // 文件输入流
46 FileInputStream fs = null;
47 try {
48 String configValue = cpConfigService.getValueByConfigKey("ocr_server_config", "{'uri':'http://cloud.exocr.com/recognize','username':'test','password':'test'}");
49 Map<String, String> configMap = JsonUtils.json2Map2(configValue);
50 String postUrl = configMap.get("uri"); // 服务地址
51 Map<String, String> postParam = new HashMap<String, String>(10);
52 postParam.put("username", configMap.get("username")); // 用户名， 公有云测试可使用’test’
53 postParam.put("password", configMap.get("password")); // 密码，公有云测试可使用 ’test’
54 postParam.put("recotype", recotype); // BankCard
55 postParam.put("encoding", "utf-8"); // 返回结果的文字编码方式，取值包括：utf-8， 默认值 gb2312
56 postParam.put("head_portrait", "0"); // 是否返回头像（base64格式），只对身份证识别有效，取值范围：0，默认，不返回头像 1，则返回身份证的头像照片
57 postParam.put("crop_image", "0"); // 是否返回切边（base64格式），取值：0， 默认，不返回切边图 1， 返回切边图
58 postParam.put("b64", "1"); // 输入图片是否为base64格式，取值：0， 默认，二进制格式 1， base64格式
59 // base64编码图像
60 String base64 = new String(Base64.encodeBase64(imageFile.getBytes()));
61 postParam.put("image", base64); // 待识别的图像，可以是二进制也可以是base64格式
62 result = HttpUtil.postUrlAsString(postUrl, postParam, null, "utf-8");
63 logger.info("OCR识别结果{}", result);
64 } catch (Exception e) {
65 logger.error("OCR识别异常：", e);
66 StringBuilder sb = new StringBuilder();
67 sb.append("{'Error':'99','Details':'OCR识别异常:");
68 sb.append(e.getMessage()).append("'}");
69 result = sb.toString();
70 } finally {
71 if (null != fs) {
72 try {
73 fs.close();
74 } catch (IOException e) {
75 logger.error("File input stream close exception:", e);
76 }
77 }
78 }
79
80 try {
81 return JsonUtils.json2Map(result);
82 } catch (Exception e) {
83 logger.error("json to map exception:", e);
84 }
85
86 return null;
87 }
88
89 public void setCpConfigService(CpConfigService cpConfigService) {
90 this.cpConfigService = cpConfigService;
91 }
92
93 }
来获取这个url的接口
String configValue = cpConfigService.getValueByConfigKey("ocr_server_config", "{'uri':'http://cloud.exocr.com/recognize','username':'test','password':'test'}");
把所有的参数封装到postParam参数中来{b64=1, username=test, head_portrait=0, recotype=BankCard, encoding=utf-8, image=/9j/4AA........}
postParam.put("image", base64); // 待识别的图像，可以是二进制也可以是base64格式
2.6，HTTP工具类，HttpUtil
1 package com.bill99.coe.ocr.utils;
2
3 import java.io.UnsupportedEncodingException;
4 import java.util.ArrayList;
5 import java.util.List;
6 import java.util.Map;
7
8 import org.apache.commons.lang.StringUtils;
9 import org.apache.http.Header;
10 import org.apache.http.HttpResponse;
11 import org.apache.http.HttpStatus;
12 import org.apache.http.NameValuePair;
13 import org.apache.http.client.HttpClient;
14 import org.apache.http.client.entity.UrlEncodedFormEntity;
15 import org.apache.http.client.methods.HttpPost;
16 import org.apache.http.client.methods.HttpUriRequest;
17 import org.apache.http.impl.client.DefaultHttpClient;
18 import org.apache.http.message.BasicNameValuePair;
19 import org.apache.http.params.CoreConnectionPNames;
20 import org.apache.http.util.EntityUtils;
21 import org.slf4j.Logger;
22 import org.slf4j.LoggerFactory;
23
24 /**
25 * HTTP工具类.
26 *
27 * @author David.Huang
28 */
29 public class HttpUtil {
30
31 private static Logger logger = LoggerFactory.getLogger(HttpUtil.class);
32
33 /**
34 * 默认编码方式 -UTF8
35 */
36 private static final String DEFAULT_ENCODE = "utf-8";
37
38 /**
39 * POST请求, 结果以字符串形式返回.
40 *
41 * @param url
42 * 请求地址
43 * @param params
44 * 请求参数
45 * @param reqHeader
46 * 请求头内容
47 * @param encode
48 * 编码方式
49 * @return 内容字符串
50 * @throws Exception
51 */
52 public static String postUrlAsString(String url,
53 Map<String, String> params, Map<String, String> reqHeader,
54 String encode) throws Exception {
55 // 开始时间
56 long t1 = System.currentTimeMillis();
57 // 获得HttpPost对象
58 HttpPost httpPost = getHttpPost(url, params, encode);
59 // 发送请求
60 String result = executeHttpRequest(httpPost, reqHeader, encode);
61 // 结束时间
62 long t2 = System.currentTimeMillis();
63 // 调试信息
64 logger.debug("url:" + url);
65 logger.debug("params:" + params.toString());
66 logger.debug("reqHeader:" + reqHeader);
67 logger.debug("encode:" + encode);
68 logger.debug("result:" + result);
69 logger.debug("consume time:" + ((t2 - t1)));
70 // 返回结果
71 return result;
72 }
73
74 /**
75 * 获得HttpPost对象
76 *
77 * @param url
78 * 请求地址
79 * @param params
80 * 请求参数
81 * @param encode
82 * 编码方式
83 * @return HttpPost对象
84 * @throws UnsupportedEncodingException
85 */
86 private static HttpPost getHttpPost(String url, Map<String, String> params,
87 String encode) throws UnsupportedEncodingException {
88 HttpPost httpPost = new HttpPost(url);
89 if (params != null) {
90 List<NameValuePair> form = new ArrayList<NameValuePair>();
91 for (String name : params.keySet()) {
92 form.add(new BasicNameValuePair(name, params.get(name)));
93 }
94
95 UrlEncodedFormEntity entity = new UrlEncodedFormEntity(form,
96 encode);
97 httpPost.setEntity(entity);
98 }
99
100 return httpPost;
101 }
102
103 /**
104 * 执行HTTP请求
105 *
106 * @param request
107 * 请求对象
108 * @param reqHeader
109 * 请求头信息
110 * @return 内容字符串
111 */
112 private static String executeHttpRequest(HttpUriRequest request,
113 Map<String, String> reqHeader, String encode) throws Exception {
114 HttpClient client = null;
115 String result = null;
116 try {
117 // 创建HttpClient对象
118 client = new DefaultHttpClient();
119 // 设置连接超时时间
120 client.getParams().setParameter(
121 CoreConnectionPNames.CONNECTION_TIMEOUT, 60);
122 // 设置Socket超时时间
123 client.getParams().setParameter(CoreConnectionPNames.SO_TIMEOUT,
124 36600);
125 // 设置请求头信息
126 if (reqHeader != null) {
127 for (String name : reqHeader.keySet()) {
128 request.addHeader(name, reqHeader.get(name));
129 }
130 }
131 // 获得返回结果
132 HttpResponse response = client.execute(request);
133 // 如果成功
134 if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
135 encode = StringUtils.isNotEmpty(encode) ? encode : DEFAULT_ENCODE;
136 result = EntityUtils.toString(response.getEntity(), encode);
137 } else {
138 StringBuffer errorMsg = new StringBuffer();
139 errorMsg.append("httpStatus:");
140 errorMsg.append(response.getStatusLine().getStatusCode());
141 errorMsg.append(response.getStatusLine().getReasonPhrase());
142 errorMsg.append(", Header: ");
143 Header[] headers = response.getAllHeaders();
144 for (Header header : headers) {
145 errorMsg.append(header.getName());
146 errorMsg.append(":");
147 errorMsg.append(header.getValue());
148 }
149 logger.error("HttpResonse Error:" + errorMsg);
150 result = "{'Error':'98','Details':'" + errorMsg.toString() + "'}";
151 }
152 } catch (Exception e) {
153 logger.error("http连接异常", e);
154 throw new Exception("http连接异常");
155 } finally {
156 try {
157 client.getConnectionManager().shutdown();
158 } catch (Exception e) {
159 logger.error("finally HttpClient shutdown error", e);
160 }
161 }
162 return result;
163 }
164 }
仿照浏览器把参数全部分装到httpPost请求当中来，最主要的就是url路径，参数，和编码格式httppost的用法（NameValuePair（简单名称值对节点类型））
HttpPost httpPost = getHttpPost(url, params, encode);
通过httpclient来把数据传到orc的服务器并返回结果。httpclient的讲解
String result = executeHttpRequest(httpPost, reqHeader, encode);
。。。。。
返回的结果{Error=0, Details=识别正确, Result={bankname=中银通支付(480800010000), cardname=安徽合肥通卡, cardtype=预付费卡, cardno=9210 0001 0000 1595 143, expmonth=0, expyear=0}}
2.7，识别返回的json格式文档
1 银行卡识别结果JSON数据定义： 2 "bankname" --------------银行名称 3 "cardname" --------------卡名 4 "cardtype" --------------卡类型 5 “cardno” -------------卡号 6 “expmonth” ---------------有效期截止月份 7 “expyear” ----------------有效期截止年份 8 "cropped_image" ---------------切割图
身份证识别，行驶证识别，驾驶证识别，营业执照识别大同小异，主要是返回结果不一样。具体请见微信图片身份证识别，行驶证识别，驾驶证识别，营业执照识
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android开发：仿微信和QQ空间发说说相册读取、拍照、图片裁剪和图片上传服务器等功能的实现
- 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
- Android WebView实现长按保存图片及长按识别二维码功能
- (转)【Android游戏开发十六】Android Gesture之【触摸屏手势识别】操作！利用触摸屏手势实现一个简单切换图片的功能！
- 微信小程序实现图片上传功能实例（前端+PHP后端）
- 微信小程序的实现图片预览功能
- Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
- 一款图片选择器，模仿微信的 ui，实现了 图片选取，图片预览 ，拍照 功能
- 【微信开发笔记】常见的长按保存图片功能的实现方式及清晰度优化方式
- tesseract-ocr 实现图片识别功能
- 微信小程序实现图片上传功能
- Android客户端读取PHP服务器的图片等信息，并用ListView列出来，实现缓存功能。
- tesseract-ocr 实现图片识别功能
- 微信jsapi上传下载图片功能实现（5）
- android 实现微信分享多张图片的功能
- Android一键转发图片多张图片到微信，朋友圈功能实现
- Android实现二维码扫描功能（四）-ZXing识别图片二维码，相册选图
- 小程序web-view用wx.scanQRCode实现微信扫一扫功能，识别二维码——微信序web-view高级用法8
- 基于文字识别---实现点击图片任意位置文字即可翻译的功能
- PHP实现微信小程序人脸识别刷脸登录功能