微信公众号开发调用摄像头、拍摄或选择图片、OCR识别

罗梦怡 發表於 2020-1-10 16:50:00

微信公众号开发调用摄像头、拍摄或选择图片、OCR识别

<h2> 一、准备工作      </h2>
      <1> 域名认证准备工作
  在需要调用摄像头的接口页面引入微信的js，具体地址为：（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
  首先JS安全接口域名认证：
   <img src="https://img2018.cnblogs.com/common/1708164/202001/1708164-20200110163418085-967447721.png">
   具体可参考开发文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115     填写规则（必须是备案通过的域名）：     若域名类似为：xxx.xxx.xxx.com　   则接口域名为：xxx.xxx.com     若域名类似为：xxx.xxx.com      则接口域名为：xxx.com     若域名类似为：xxx.xxx.com:8080   则接口域名为：xxx.com:8080    <2> OCR识别准备工作 
    注册百度云服务账号，网址：https://cloud.baidu.com/index.html?track=cp:npinzhuan|pf:pc|pp:left|ci:|pu:495     点击智能控制台>>产品服务>>人工智能>>文字识别>>创建应用     填写相关信息选择对应的需求     点击创建应用>>查看详情：appid、apikey、secretkey是我们所需要的    <img src="https://img2018.cnblogs.com/common/1708164/202001/1708164-20200110163818078-429959533.png">
<h2> 二、具体代码实现</h2>
       在需要调用微信js的jsp页面引入js，做如下操作：
<div class="cnblogs_code">
<pre> 1 $(function (){
 2 wx.config({
 3 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,测试完成后需要关闭。
 4 appId: $('#appId').val(), // 必填，公众号的唯一标识
 5 timestamp: $('#timestamp').val(), // 必填，生成签名的时间戳
 6 nonceStr: $('#nonceStr').val(), // 必填，生成签名的随机串
 7 signature: $('#signature').val(),// 必填，签名（加密后，下文有实现）
 8 jsApiList: ['chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表，开发文档上有所有接口名称，根据需要选用就好。
 9 });
10 });
11
12
13 function openCamera(){
14 wx.chooseImage({
15 count: 1, // 默认9
16 sizeType: ['original', 'compressed'], // 指定是原图还是压缩图，默认都有
17 sourceType: ['album', 'camera'], // 指定来源是相册还是相机，默认都有
18 success: function (res) {
19 var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
20 wx.uploadImage({
21 localId: localIds.toString(), // 需要上传的图片的ID，由chooseImage接口获得
22 isShowProgressTips: 1, // 进度提示
23 success: function (res) {
24 var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
25 //将获取到的 mediaId 传入后台方法savePicture
26 $.post(path+"/getImage/savePicture",{"mediaId":mediaId,"tmp":"填写证件的正反面参数"},function(res){
27 //填写你自己的业务逻辑
28 });
29 },
30 fail: function (res) {
31 alertModal('图片上传失败，请重试');
32 }
33 });
34 }
35 });
36 }</pre>
</div>
  wx.config这个函数是进行js域名验证所必须的操作，具体实现如下：
<div class="cnblogs_code">
<pre> 1 //-------------------------初始化js-sdk--------begin----------------------------
 2 SortedMap<Object, Object> params = new TreeMap<Object, Object>();
 3 String access_token = WechatAppUtil.getAccessToken(appid,appSecret);// 建议放redis放缓存中（access_token ）
 4 String jsapi_ticket = WechatAppUtil.getJsapiTicket(access_token);
 5 String noncestr = WechatSignUtil.getNonceStr();
 6 String timestamp = WechatSignUtil.getTimestamp();
 7 params.put("noncestr", noncestr);
 8 params.put("jsapi_ticket", jsapi_ticket);
 9 params.put("timestamp", timestamp);
10 StringBuffer url = cRequest.getRequestURL();
11 Enumeration<String> headerNames = cRequest.getHeaderNames();
12 if (headerNames != null) {
13 while (headerNames.hasMoreElements()) {
14 String header = headerNames.nextElement();
15 log.info("Header: {}， Value={}", header, cRequest.getHeader(header));
16 }
17 }
18 String httpFlag = cRequest.getHeader("X-Forwarded-Proto");
19 if (httpFlag != null && httpFlag.equals("https")) {
20 url.replace(0, 5, "https");
21 }
22 String queryString = cRequest.getQueryString();
23 log.info("queryString={}", queryString);
24 if (StringUtil.isNotEmpty(queryString)) {
25 url.append("?").append(cRequest.getQueryString());
26 }
27 params.put("url", url.toString());
28 log.info("url---------------->:"+url.toString());
29 String sign = WechatSignUtil.createSignBySha1(params);
30 log.info("sign---------------->:"+sign);
31 //-------------------------初始化js-sdk--------end----------------------------
32 ModelAndView tView = new ModelAndView(LoginPageConstant.STAFF_REGIST2);
33 tView.addObject("appId", appid);
34 tView.addObject("timestamp", timestamp);
35 tView.addObject("nonceStr", noncestr);
36 tView.addObject("signature", sign); return tView; </pre>
</div>
<div class="cnblogs_code">
<pre>1 /**
2 * @Title: getAccessToken
3 * @Description: 获取公众号access_token
4 * @param @param appId
5 * @param @param appSecret
6 * @param @return
7 * @return String 返回类型
8 * @throws
9 */
 10 public static String getAccessToken(String appId,String appSecret){
 11 final String param = "grant_type=client_credential" + "&appid=" + appId + "&secret=" + appSecret;
 12 final String data = HttpClientUtil.get(GET_ACCESS_TOKEN_PATH, param);
 13 JSONObject resultJson = JSON.parseObject(data);
 14 String access_token = resultJson.getString("access_token");
 15 return access_token;
 16 }
 17
 18 /**
 19 *
 20 * @Title: getJsapiTicket
 21 * @Description: 获取JsapiTicket
 22 * @param @param access_token
 23 * @param @return
 24 * @return String 返回类型
 25 * @throws
 26 */
 27 public static String getJsapiTicket(String access_token){
 28 final String param = "access_token="+access_token+ "&type=jsapi";
 29 final String data = HttpClientUtil.get(GET_JSAPI_TICKET, param);
 30 JSONObject resultJson = JSON.parseObject(data);
 31 String jsapi_ticket = resultJson.getString("ticket");
 32 return jsapi_ticket;
 33 }/**
 34 *
 35 * @Title: getNonceStr
 36 * @Description: 生成随机字符串
 37 * @param @return
 38 * @return String 返回类型
 39 * @throws
 40 */
 41 public static String getNonceStr() {
 42 String currT = getCurrTime();
 43 String strT = currT.substring(8, currT.length());
 44 String strRandom = buildRandom(4) + "";
 45 return strT + strRandom;
 46 }
 47
 48
 49 /**
 50 *
 51 * @Title: buildRandom
 52 * @Description: 生成随机数
 53 * @param @param length
 54 * @param @return
 55 * @return int 返回类型
 56 * @throws
 57 */
 58 public static int buildRandom(int length) {
 59 int mm= 1;
 60 double random = Math.random();
 61 if (random < 0.1) {
 62 random = random + 0.1;
 63 }
 64 for (int i = 0; i < length; i++) {
 65 mm= mm* 10;
 66 }
 67 return (int) ((random * mm));
 68 }
 69
 70
 71 /**
 72 *
 73 * @Title: getCurrTime
 74 * @Description: 获取当前时间
 75 * @param @return
 76 * @return String 返回类型
 77 * @throws
 78 */
 79 public static String getCurrTime() {
 80 Date date = new Date();
 81 SimpleDateFormat of= new SimpleDateFormat("yyyyMMddHHmmss");
 82 String s = of.format(date);
 83 return s;
 84 }
 85
 86 /**
 87 *
 88 * @Title: createSignBySha1
 89 * @Description: 生成签名
 90 * @param @param params
 91 * @param @return
 92 * @return String 返回类型
 93 * @throws
 94 */
 95 @SuppressWarnings("rawtypes")
 96 public static String createSignBySha1(SortedMap<Object, Object> params) {
 97 StringBuffer sb = new StringBuffer();
 98 Set es = params.entrySet();
 99 Iterator it = es.iterator();
100 while (it.hasNext()) {
101 Map.Entry entry = (Map.Entry) it.next();
102 String k = (String) entry.getKey();
103 String v = (String) entry.getValue();
104 if (v != null && !v.equals("")) {
105 sb.append(k + "=" + v + "&");
106 }
107 }
108 String result = sb.toString().substring(0, sb.toString().length()-1);
109 return getSHA1(result);
110 }
111 /**
112 *
113 * @Title: getTimestamp
114 * @Description: 获取时间戳(秒)
115 * @param @return 参数
116 * @return String 返回类型
117 * @throws
118 */
119 public static String getTimestamp() {
120 return String.valueOf(System.currentTimeMillis() / 1000);
121 }
122
123
124 /**
125 *
126 * @Title: getSHA1
127 * @Description: SHA1签名生成
128 * @param @param str
129 * @param @return 参数
130 * @return String 返回类型
131 * @throws
132 */
133 public static String getSHA1(String str){
134 StringBuffer hexstr = new StringBuffer();
135 try {
136 MessageDigest md = MessageDigest.getInstance("SHA-1");
137 md.update(str.getBytes());
138 byte[] digest = md.digest();
139 String shaHex = "";
140 for (int i = 0; i < digest.length; i++) {
141 shaHex = Integer.toHexString(digest & 0xFF);
142 if (shaHex.length() < 2) {
143 hexstr.append(0);
144 }
145 hexstr.append(shaHex);
146 }
147 } catch (NoSuchAlgorithmException e) {
148 e.printStackTrace();
149 }
150 return hexstr.toString();
151 }</pre>
</div>
  验证完成后台实现如下：
<div class="cnblogs_code">
<pre>1 /**
2 *
3 * @Title: savePicture
4 * @Description: 接收图片
5 * @param @param request
6 * @param @return
7 * @return String 返回类型
8 * @throws
9 */
 10 @ResponseBody
 11 @RequestMapping("/savePicture")
 12 public String savePicture(HttpServletRequest request) {
 13 String mediaId = request.getParameter("mediaId");
 14 String tmp = request.getParameter("tmp");
 15 String filename = saveImageToDisk(mediaId,tmp,request);
 16 log.info("filename----------->:"+filename);
 17 return "success";
 18 }
 19
 20 /**
 21 *
 22 * @Title: saveImageToDisk
 23 * @Description: 存盘
 24 * @param @param mediaId
 25 * @param @return
 26 * @return String 返回类型
 27 * @throws
 28 */
 29 private String saveImageToDisk(String mediaId,String tmp,HttpServletRequest request){
 30 String filename = "";
 31 InputStream inputStream = getMedia(mediaId);
 32 byte[] data = new byte;
 33 int len = 0;
 34 FileOutputStream fileOutputStream = null;
 35 try {
 36 //服务器存图路径
 37 String path = request.getServletContext().getRealPath("你需要存放的服务器路径");
 38 filename = System.currentTimeMillis() + WechatSignUtil.getNonceStr() + ".jpg";
 39 fileOutputStream = new FileOutputStream(path + filename);
 40 while ((len = inputStream.read(data)) != -1) {
 41 fileOutputStream.write(data, 0, len);
 42 }
 43 WeChatUser idCardMsg = getIdCardMsg(tmp,path + filename);
 44 } catch (IOException e) {
 45 e.printStackTrace();
 46 } finally {
 47 if (inputStream != null) {
 48 try {
 49 inputStream.close();
 50 } catch (IOException e) {
 51 e.printStackTrace();
 52 }
 53 }
 54 if (fileOutputStream != null) {
 55 try {
 56 fileOutputStream.close();
 57 } catch (IOException e) {
 58 e.printStackTrace();
 59 }
 60 }
 61 }
 62 return filename;
 63 }
 64
 65 /**
 66 *
 67 * @Title: getMedia
 68 * @Description: 获取图片
 69 * @param @param mediaId
 70 * @param @return 参数
 71 * @return InputStream 返回类型
 72 * @throws
 73 */
 74 private InputStream getMedia(String mediaId) {
 75 String url = "https://api.weixin.qq.com/cgi-bin/media/get";
 76 String access_token = WechatAppUtil.getAccessToken("**********","*************");
 77 String params = "access_token=" + access_token + "&media_id=" + mediaId;
 78 InputStream is = null;
 79 try {
 80 String urlNameString = url + "?" + params;
 81 URL urlGet = new URL(urlNameString);
 82 HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
 83 http.setRequestMethod("GET"); // 必须是get方式请求
 84 http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");
 85 http.setDoOutput(true);
 86 http.setDoInput(true);
 87 http.connect();
 88 // 获取文件转化为byte流
 89 is = http.getInputStream();
 90 } catch (Exception e) {
 91 e.printStackTrace();
 92 }
 93 return is;
 94 }
 95
 96 /**
 97 *
 98 * @Title: getIdCardMsg
 99 * @Description:
100 * @param @param tmp
101 * @param @param imgUrl 图片路径
102 * @param @return
103 * @return WeChatUser 返回类型
104 * @throws
105 */
106 private WeChatUser getIdCardMsg(String tmp,String imgUrl){
107 // 初始化一个AipOcr
108 AipOcr client = new AipOcr(APP_ID, API_KEY, SECRET_KEY);
109 // 可选：设置网络连接参数
110 client.setConnectionTimeoutInMillis(2000);
111 client.setSocketTimeoutInMillis(60000);
112 // 传入可选参数调用接口
113 HashMap<String, String> options = new HashMap<String, String>();
114 options.put("detect_direction", "true");
115 options.put("detect_risk", "false");
116 String idCardSide = tmp;
117 // 参数为图片路径
118 String image = imgUrl;
119 JSONObject res = client.idcard(image, idCardSide, options);
120 具体返回信息处理请参考开发文档:https://cloud.baidu.com/doc/OCR/OCR-Java-SDK.html#.E6.8E.A5.E5.8F.A3.E8.83.BD.E5.8A.9B
121 }</pre>
</div> 
来源：https://www.cnblogs.com/yzss/p/12176962.html

頁: [1]

琼殿技术论坛's Archiver

微信公众号开发调用摄像头、拍摄或选择图片、OCR识别