devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app之接入百度OCR识别身份证(微信小程序版本)_身份证拍照信息识别小程序demo下载

作者：不正经 | 2024-03-26 01:04:58

赞

踩

身份证拍照信息识别小程序demo下载

本文为uni-app接入百度OCR识别身份证号，话不多说，直接上代码：

1. 第一步注册百度智能云账号，选择文字识别，创建应用，获取Api Key 与 Secret Key（下面要用到）：

2.第二步，查看百度OCR身份证识别技术文档，如下，共需调用2个接口：

第一接口：获取百度access_token， 上代码:

  1. getBDtoken() {
  2.       uni.showLoading({
  3.         title: '正在连接服务...'
  4.       })
  5.       return new Promise(resolve => {
  6.         uni.request({
  7.           url: 'https://aip.baidubce.com/oauth/2.0/token', // 百度获取token接口地址
  8.           data: {
  9.             'grant_type': 'client_credentials', // 固定写死
  10.             'client_id': '你上面申请获取的API Key',
  11.             'client_secret': '你上面申请的Secret Key'
  12.           },
  13.           method: 'GET',
  14.           success(res) {
  15.             resolve(res)
  16.           },
  17.           fail(e) {
  18.             uni.hideLoading()
  19.             Modal.toast('连接服务出错，请稍后再试!')
  20.           }
  21.         })
  22.       })
  23.     }

第二个接口先不要着急，请继续往下看：

3.百度OCR的第二个接口入参需要图像信息，这个图像信息怎么获取呢？上代码:

  1. takePhoto() {
  2.       // 直接调用uni-app现有API, 爽翻天
  3.       const ctx = uni.createCameraContext()
  4.       ctx.takePhoto({
  5.         quality: 'high',
  6.         success: async res => {
  7.             let path = res.tempImagePath // 拍照的临时地址
  8.             // 这里用百度ORC身份识别的image参数，需要转成base64格式
  9.             let base64String = `${wx.getFileSystemManager().readFileSync(path, "base64")}`
  10.         },
  11.         fail: err => {
  12.           uni.hideLoading()
  13.           Modal.toast('生成图片错误, 请稍后重试！')
  14.         }
  15.       })
  16.     },

4.好了，到这里就可以调用百度OCR的第二个接口了，上代码:

  1. // 参数准备
  2. // const params = {
  3. //   access_token: data.data.access_token,
  4. //   data: {
  5. //     image: base64String,
  6. //     id_card_side: 'front'
  7. //   }
  8. // }
  9.  
  10.  
  11. // 这个接口才是真正的识别身份证，上面准备的access_token，base64String都为此准备
  12. getIdCard(params) {
  13.       uni.showLoading({
  14.         title: '正在解析...'
  15.       })
  16.       return new Promise(resolve => {
  17.         uni.request({
  18.           // 身份证识别接口
  19.           url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + params.access_token,
  20.           data: params.data,
  21.           method: 'POST',
  22.           header: {
  23.             "Content-Type": "application/x-www-form-urlencoded"
  24.           },
  25.           success(res) {
  26.             uni.hideLoading()
  27.             resolve(res)
  28.           },
  29.           fail(e) {
  30.             uni.hideLoading()
  31.             Modal.toast('解析出错，请稍后再试!')
  32.           },
  33.           complete() {
  34.           }
  35.         })
  36.       })
  37.     },

5.效果图:

6.完整代码，可以直接拿去用，不喜欢样式的自行修改：

  1. <template>
  2.   <view class="container">
  3.     <camera device-position="back" flash="auto" @error="error" class="camera">
  4.       <cover-view class="cover-view">
  5.         <cover-view class="cover-view-top"></cover-view>
  6.         <cover-view class="scan-img-view">
  7.           <cover-image src="../../static/img/idCard/scan-img.png" class="scan-img" id="scanImg"></cover-image>
  8.           <cover-view class="tips">
  9.             <cover-view>{{tips}}</cover-view>
  10.           </cover-view>
  11.         </cover-view>
  12.         <cover-view class="cover-view-bot">
  13.           <cover-image src="../../static/img/idCard/takePhoto.png" class="take-img" @click="takePhoto"></cover-image>
  14.         </cover-view>
  15.         <cover-view class="id-card-info" v-if="dialogVisible">
  16.           <cover-view class="middle">
  17.             <cover-view class="title">识别结果</cover-view>
  18.             <cover-view class="content">
  19.               <cover-view class="item">
  20.                 <cover-view class="label">姓名: </cover-view>
  21.                 <cover-view class="value">{{cradInfo.name}}</cover-view>
  22.               </cover-view>
  23.               <cover-view class="item">
  24.                 <cover-view class="label">出生日期: </cover-view>
  25.                 <cover-view class="value">{{cradInfo.birthdate}}</cover-view>
  26.               </cover-view>
  27.               <view class="item">
  28.                 <cover-view class="label">性别: </cover-view>
  29.                 <cover-view class="value">{{cradInfo.sex === '801' ? '男':'女'}}</cover-view>
  30.               </view>
  31.               <view class="item">
  32.                 <cover-view class="label">身份证号: </cover-view>
  33.                 <cover-view class="value">{{cradInfo.idNo}}</cover-view>
  34.               </view>
  35.             </cover-view>
  36.             <cover-view class="footer">
  37.               <cover-view class="btn sure">确认信息</cover-view>
  38.               <cover-view class="btn cancel" @click="closeDialog">重新识别</cover-view>
  39.             </cover-view>
  40.           </cover-view>
  41.         </cover-view>
  42.       </cover-view>
  43.     </camera>
  44.   </view>
  45. </template>
  46.  
  47. <script>
  48. let t
  49. export default {
  50.   data() {
  51.     return {
  52.       cradInfo: {},
  53.       dialogVisible: false,
  54.       tips: '请将身份证置于拍照区域拍照'
  55.     }
  56.   },
  57.   onShow() {
  58.     const timer = setTimeout(() => {
  59.       this.setTipsStatus()
  60.       clearTimeout(timer)
  61.     }, 1000)
  62.   },
  63.   methods: {
  64.     setTipsStatus() {
  65.       let num = 0
  66.       t = setInterval(() => {
  67.         num++
  68.         if (num > 4) {
  69.           num = 0
  70.         }
  71.         this.tips = '请将身份证置于拍照区域拍照' + '....'.substring(0, num)
  72.       }, 1000)
  73.     },
  74.     takePhoto() {
  75.       const ctx = uni.createCameraContext()
  76.       ctx.takePhoto({
  77.         quality: 'high',
  78.         success: async res => {
  79.           this.drawCanvas(res.tempImagePath)
  80.         },
  81.         fail: err => {
  82.           uni.hideLoading()
  83.           uni.showToast({
  84.             title: '生成图片错误, 请稍后重试！'
  85.           })
  86.         }
  87.       })
  88.     },
  89.     drawCanvas(path) {
  90.       uni.showLoading({
  91.         title: '正在生成图片...'
  92.       })
  93.       let base64String = `${wx.getFileSystemManager().readFileSync(path, "base64")}`
  94.       this.getBDtoken().then(data => {
  95.         const params = {
  96.           access_token: data.data.access_token,
  97.           data: {
  98.             image: base64String,
  99.             id_card_side: 'front'
  100.           }
  101.         }
  102.         this.getIdCard(params).then(res => {
  103.           if (res) {
  104.             const result = res.data.words_result
  105.             this.cradInfo = {
  106.               idNo: result['公民身份号码'] ? result['公民身份号码'].words : '',
  107.               name: result['姓名'] ? result['姓名'].words : '',
  108.               sex: result['性别'] ? (result['性别'].words === '男' ? '801' : '802') : '801',
  109.               birthdate: result['出生'] ? (result['出生'].words.substring(0, 4) + '-' + result['出生'].words.substring(4, 6) + '-' + result['出生'].words.substring(6, 8)) : '',
  110.             }
  111.             this.dialogVisible = true
  112.           }
  113.         })
  114.       })
  115.     },
  116.     getBDtoken() {
  117.       uni.showLoading({
  118.         title: '正在连接服务...'
  119.       })
  120.       return new Promise(resolve => {
  121.         uni.request({
  122.           url: 'https://aip.baidubce.com/oauth/2.0/token',
  123.           data: {
  124.             'grant_type': 'client_credentials',
  125.             'client_id': '你申请的API Key',
  126.             'client_secret': '你申请的Secret Key'
  127.           },
  128.           method: 'GET',
  129.           success(res) {
  130.             resolve(res)
  131.           },
  132.           fail(e) {
  133.             uni.hideLoading()
  134.             uni.showToast({
  135.                 title: '连接服务出错，请稍后再试!'
  136.             })
  137.           }
  138.         })
  139.       })
  140.     },
  141.     getIdCard(params) {
  142.       uni.showLoading({
  143.         title: '正在解析...'
  144.       })
  145.       return new Promise(resolve => {
  146.         uni.request({
  147.           url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + params.access_token,
  148.           data: params.data,
  149.           method: 'POST',
  150.           header: {
  151.             "Content-Type": "application/x-www-form-urlencoded"
  152.           },
  153.           success(res) {
  154.             uni.hideLoading()
  155.             resolve(res)
  156.           },
  157.           fail(e) {
  158.             uni.hideLoading()
  159.             uni.showToast({
  160.                 title: '解析出错，请稍后再试!'
  161.             })
  162.           },
  163.           complete() {
  164.           }
  165.         })
  166.       })
  167.     },
  168.     error(e) {
  169.       console.log(e.detail);
  170.     },
  171.     closeDialog() {
  172.       this.dialogVisible = false
  173.       this.cradInfo = {}
  174.     }
  175.   }
  176. }
  177. </script>
  178.  
  179. <style lang="scss" scoped>
  180.  
  181. .container{
  182.   position: relative;
  183. }
  184.  
  185. .camera {
  186.   position: absolute;
  187.   top: 0;
  188.   left: 0;
  189.   z-index: 99;
  190.   width: 750upx;
  191.   height: 100%;
  192. }
  193.  
  194. .cover-view {
  195.   width: 750upx;
  196.   height: 100%;
  197.   box-sizing: border-box;
  198.   display: flex;
  199.   flex-direction: column;
  200.   justify-content: center;
  201.   align-items: center;
  202. }
  203.  
  204. .cover-view-top {
  205.   width: 750upx;
  206.   height: 200upx;
  207.   background-color: rgba(0, 0, 0, .4);
  208. }
  209.  
  210. .cover-view-bot {
  211.   flex: 1;
  212.   width: 750upx;
  213.   background-color: rgba(0, 0, 0, .4);
  214.   display: flex;
  215.   justify-content: center;
  216.   align-items: center;
  217.  
  218.   .take-img {
  219.     width: 120upx;
  220.     height: 120upx;
  221.   }
  222. }
  223.  
  224. .canvas{
  225.   position: absolute;
  226.   top: 240upx;
  227.   left: 45upx;
  228.   height: 410upx;
  229.   width: 660upx;
  230. }
  231.  
  232. .scan-img-view{
  233.   position: relative;
  234.   .scan-img {
  235.     opacity: 0.4;
  236.     width: 100%;
  237.     height: 500upx;
  238.   }
  239.   .tips{
  240.     position: absolute;
  241.     top: 0;
  242.     left: 0;
  243.     bottom: 0;
  244.     right: 0;
  245.     display: flex;
  246.     justify-content: center;
  247.     align-items: center;
  248.     color: #ffffff;
  249.     font-size: $uni-font-size-sm;
  250.   }
  251. }
  252.  
  253. .id-card-info{
  254.   position: absolute;
  255.   top: 0;
  256.   left: 0;
  257.   bottom: 0;
  258.   right: 0;
  259.   display: flex;
  260.   justify-content: center;
  261.   align-items: center;
  262.   background-color: rgba(0, 0, 0, .8);
  263.   z-index: 999999 !important;
  264.   .middle{
  265.     width: 550upx;
  266.     height: 600upx;
  267.     background-color: #ffffff;
  268.     border-radius: 20upx;
  269.     display: flex;
  270.     flex-direction: column;
  271.     justify-content: center;
  272.     align-items: center;
  273.     .title{
  274.       font-size: $uni-font-size-maxer;
  275.       height: 100upx;
  276.       line-height: 100upx;
  277.       text-align: center;
  278.       font-weight: bold;
  279.     }
  280.     .content{
  281.       flex: 1;
  282.       width: 100%;
  283.       padding-left: 50upx;
  284.       box-sizing: border-box;
  285.       display: flex;
  286.       flex-direction: column;
  287.       justify-content: center;
  288.       align-items: flex-start;
  289.       .item{
  290.         display: flex;
  291.         margin-bottom: 20upx;
  292.         font-size: $uni-font-size-lger;
  293.         .label{
  294.           color: $uni-text-color-grey;
  295.         }
  296.         .value{
  297.           margin-left: 10upx;
  298.         }
  299.       }
  300.     }
  301.     .footer{
  302.       display: flex;
  303.       flex-direction: column;
  304.       justify-content: center;
  305.       align-items: center;
  306.       padding: 20upx;
  307.       .btn{
  308.         width: 450upx;
  309.         height: 80upx;
  310.         border-radius: 60upx;
  311.         line-height: 80upx;
  312.         text-align: center;
  313.       }
  314.       .sure{
  315.         color: #ffffff;
  316.         background-color: $uni-bg-color-global;
  317.         margin-bottom: 20upx;
  318.       }
  319.       .cancel{
  320.         color: grey;
  321.         background-color: $uni-bg-color-grey;
  322.       }
  323.     }
  324.   }
  325. }
  326. </style>

有小伙伴私信我要图片，安排:

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/313568
推荐阅读