微信小程序> 微信识别图片功能实现(以读取银行卡为例)

微信识别图片功能实现(以读取银行卡为例)

浏览量:2878 时间: 来源:weixin_34345560

假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术之旅吧,详情请点击http://106.12.206.16:8080/qingruihappy/index.html

一,需求讲解

小程序

小程序

 

如图所示,扫描图片的时候,实现银行卡号和银行名称自动回填。

接口网址(事例):http://cloud.exocr.com/

二,代码

2.1,html页面

 1             <input type="file" name="upload" style="display:none;" οnchange="ocrScan(this);" id="upload" accept="image/*"/> 2  3  4  <li class="item-list"> 5                     <span class="name" >银行卡号</span> 6                     <img class="fr bank-img" οnclick="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.pluginsorg.eclipse.wst.server.coretmp5workCatalinalocalhost项目名,换句话就是说在发送请求之前,到达方法之前就会把这张图片放到这个目录下,一旦请求结束,这张照片就会被删除。

小程序

上面的图片中的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.pluginsorg.eclipse.wst.server.coretmp5workCatalinalocalhostweixinupload__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 imageFile5      * @return6      */7     Map<String, Object> bankCardRecognize(MultipartFile imageFile);

 

2.4,OcrServiceImpl实现类

1 @Override2     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.sun21  *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 recotype37      *         要识别的证件类型38      * @param imageFile39      *         要识别的证件文件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); // BankCard55             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 {  
            
            

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎