微信小程序上传图片时校验所选图片是否为身份证图片

在小程序的开发中，有时需求会有上传身份证照片，一般如果没有特殊要求的话，这块可以直接调微信小程序提供的API来实现，但是如果在上传图片的同时还要求校验图片是否为身份证照片时，这就需要做一些处理了。小程序的官方也提供了解决办法，可以使用扩展能力中的OCR插件。

官方文档小程序插件文档OCR 支持

使用步骤如下：

首先打开小程序的后台，点开设置，选择第三方设置。

然后找到插件选项，打开并添加ocr支持插件。

添加完成后，需要领取免费额度，是一天100次。多了就需要购买。链接挂下方
https://fuwu.weixin.qq.com/detail/000ce4cec24ca026d37900ed551415

做好准备工作后就是代码部分。
首先在app.json里配置ocr-plugin

 "plugins": {"ocr-plugin": {"version": "3.0.6","provider": "wx4418e3e031e551be"}}

版本选择最新版。可在 ocr 识别的详情更新记录里查看

然后在需要使用到的页面.json文件里配置组件。

 "usingComponents": {"ocr-navigator": "plugin://ocr-plugin/ocr-navigator"}

最后就是页面引入组件。中间可以自定义触发类型，按钮图片都可。

<ocr-navigator bind:onSuccess="success" certificateType="idCard" opposite="{{false}}"><!-- <van-button color="#4593FB">身份证正面识别</van-button> --><view class="cameraImg"><image src="../../../image/cardCamera.png"></image></view><view class="cameraFont">点击识别身份证</view>
</ocr-navigator>

bind:onSuccess为成功的回调，可以在js方法区写好，打印返回结果。根据数据格式进行下面需求操作。

certificateType="idCard"

certificateType为识别卡片的类型。
身份证：idcard。
驾驶证：drivingLicense
银行卡：bankCard
营业执照：businessLicense

opposite：是否显示正反面。

成功后部分数据截图。

微信小程序上传图片时校验所选图片是否为身份证图片相关推荐

微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
微信小程序上传图片时provisional headers are shown显示我的错误解决方案
按微信官方图片示例上传图片的时候,出现了 provisional headers are shown的错误信息,同时查看返回的信息Connection:close为关闭状态,这就坑得了.找了好久没找到 ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序内容安全校验（遇到的问题解决方案）
微信小程序内容安全校验(遇到的问题解决方案) 怎么实现微信小程序内容安全校验我已经发布了,但是最近又遇到问题,校验等级. msgSecCheck检查一段文本是否含有违法违规内容:我运用实际中安全等级还 ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...
Spring Boot + 微信小程序——登录凭证校验DEMO
基本概念微信小程序-登录凭证校验:通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程. 微信小程序API https://developers.weix ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...

微信小程序上传图片时校验所选图片是否为身份证图片

微信小程序上传图片时校验所选图片是否为身份证图片相关推荐

最新文章

热门文章