组件中使用

<template>
    <view class="cameraPage">
        <camera device-position="back" flash="off" style="width: 100%;height: 400upx; position: relative;">
            <image src="../../../../static/images/imageFile.webp" class="imageFile" @click="uploadImage" mode="">
            </image>
        </camera>
        <button type="default" @tap="TakePhoto" class="btn_camera">拍照</button>
        <!-- <image :src="photoSrc" style="width: 100%;" mode=""></image> -->
    </view>
</template>

<script>
    import {
        pathToBase64
    } from '@/pages/infoProvided/componts/cameraPage/pathToBase64.js'
    import ajax from 'uni-ajax'
    export default {
        data() {
            return {
                photoSrc: '',
                accessToken: '', //百度识别的token
                cardType: 'front', //身份证正面
                IDCardInfo: { //身份证包含的信息
                    name: '',
                    ethnic: '',
                    address: '',
                    idNumber: '',
                    birthday: '',
                    gender: '',
                },
            }
        },
        onLoad() { //监听页面加载
            this.getAccessToken() //获取身份识别的 Access Token
        },
        methods: {
            TakePhoto: function() {
                const _this = this
                const camera = uni.createCameraContext() //创建照相机对象
                camera.takePhoto({ //实现拍照功能
                    quality: 'high', //high 高质量成像、 normal 普通质量、row 低质量
                    success: (res) => {
                        _this.photoSrc = res.tempImagePath
                        pathToBase64(_this.photoSrc).then(base64 => {
                            let imgBase64 = base64
                            _this.getIdCardInfo(imgBase64)
                        })
                    }
                })
            },
            uploadImage: function(ocrtype) { //打开相册
                var _this = this
                var cardType = ""
                if (ocrtype == 1) {
                    cardType = "front"
                } else {
                    cardType = "back"
                }
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album'], //从相册选择
                    success(res) {
                        var tempImg = res.tempFilePaths[0]
                        _this.photoSrc = tempImg
                        pathToBase64(tempImg).then(base64 => {
                            let imgBase64 = base64
                            _this.getIdCardInfo(imgBase64)
                        })
                    }
                })
            },
            getAccessToken: function() { // 获取身份识别的 Access Token
                uni.showLoading({
                    title: '加载中',
                    mask: true
                })
                var _this = this
                uni.request({
                    url: "https://aip.baidubce.com/oauth/2.0/token",
                    data: {
                        grant_type: "client_credentials",
                        client_id: "你的百度云API Key", //API Key
                        client_secret: "你的百度云Secret Key" //Secret Key
                    },
                    method: 'POST',
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    success(res) {
                        _this.accessToken = res.data.access_token
                        uni.hideLoading();
                    }
                })
            },
            getIdCardInfo: function(base64) { //调用百度API进行识别身份证base64位图片
                uni.showLoading({
                    title: '识别中',
                    mask: true
                })
                const _this = this
                ajax({
                    url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + _this.accessToken,
                    data: {
                        id_card_side: _this.cardType,
                        detect_direction: true, //检测图像朝向
                        image: base64,
                    },
                    method: 'POST',
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    success(res) {
                        var cardName = res.data.words_result.姓名
                        if (cardName != undefined) {
                            _this.IDCardInfo.name = res.data.words_result.姓名.words
                            _this.IDCardInfo.ethnic = res.data.words_result.民族.words
                            _this.IDCardInfo.address = res.data.words_result.住址.words
                            _this.IDCardInfo.idNumber = res.data.words_result.公民身份号码.words
                            _this.IDCardInfo.birthday = res.data.words_result.出生.words
                            _this.IDCardInfo.gender = res.data.words_result.性别.words
                            uni.$emit("setIDCardInfo", _this.IDCardInfo.idNumber)
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1, //返回层数,2则上上页
                                })
                            },1000)
                        }
                        else if (cardName && cardName.image_status && (cardName.image_status == "reversed_side" || cardName.image_status ==
                            "non_idcard")) {
                            uni.showToast({
                                title: "请选择正确的正面身份证图片",
                                icon: "none",
                                duration: 2000
                            })
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1, //返回层数,2则上上页
                                })
                            },2000)
                        }else {
                            uni.showToast({
                                title: "未识别",
                                icon: "none",
                                duration: 2000
                            })
                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1, //返回层数,2则上上页
                                })
                            },2000)
                        }
                        uni.hideLoading();
                    },
                    fail(err) {
                        console.log(err)
                        uni.hideLoading();
                    }
                })
            }
        },
    }
</script>
<style lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

.cameraPage {
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: rgb(36, 41, 46);
        display: flex;
        flex-wrap: wrap;
        align-content: center;

.btn_camera {
            width: 100%;
            height: 100rpx;
        }

.imageFile {
            position: absolute;
            bottom: 20rpx;
            right: 20rpx;
            width: 100rpx;
            height: 100rpx;
        }
    }
</style>
pathToBase64.js

export function pathToBase64(path) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            if (typeof FileReader === 'function') {
                var xhr = new XMLHttpRequest()
                xhr.open('GET', path, true)
                xhr.responseType = 'blob'
                xhr.onload = function() {
                    if (this.status === 200) {
                        let fileReader = new FileReader()
                        fileReader.onload = function(e) {
                            resolve(e.target.result)
                        }
                        fileReader.onerror = reject
                        fileReader.readAsDataURL(this.response)
                    }
                }
                xhr.onerror = reject
                xhr.send()
                return
            }
            var canvas = document.createElement('canvas')
            var c2x = canvas.getContext('2d')
            var img = new Image
            img.onload = function() {
                canvas.width = img.width
                canvas.height = img.height
                c2x.drawImage(img, 0, 0)
                resolve(canvas.toDataURL())
                canvas.height = canvas.width = 0
            }
            img.onerror = reject
            img.src = path
            return
        }
        if (typeof plus === 'object') {
            plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
                entry.file(function(file) {
                    var fileReader = new plus.io.FileReader()
                    fileReader.onload = function(data) {
                        resolve(data.target.result)
                    }
                    fileReader.onerror = function(error) {
                        reject(error)
                    }
                    fileReader.readAsDataURL(file)
                }, function(error) {
                    reject(error)
                })
            }, function(error) {
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            wx.getFileSystemManager().readFile({
                filePath: path,
                encoding: 'base64',
                success: function(res) {
                    resolve('data:image/png;base64,' + res.data)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

如何在uniapp中使用百度云实现OCR身份证识别功能相关推荐

  1. 基于百度AI完成OCR身份证识别功能

    百度AI链接:https://ai.baidu.com 注册百度AI的账户.完善百度AI账户中的应用信息等. 下载对应的SDK(本文以PHP为例) 下载完成后 将文件放置在自己的项目中. 本文目录结构 ...

  2. python用百度云接口实现身份证识别

    python可以通过python+Opencv来实现很多文字识别之类的工作,因为OpenCV库的功能可以说是相当强大,很多功能都可以完成.但是实现起来需要自己造轮子,所以很费时间和精力,我们可以直接学 ...

  3. SpringBoot+百度云API 实现人脸识别功能

    Java项目分享 缺项目经验的请看过来 2篇原创内容 公众号 前言 去年在公司参与了一个某某机场建设智能机场的一个项目,人脸登机是其中的一个功能模块,当时只是写了后台的接口,调用人脸识别设备的api, ...

  4. Android使用阿里云接口实现身份证识别功能

    前言 现如今,许多app需要智能识别用户提供的身份证图片上的信息来完成一些工作,阿里云刚好提供了这个接口,下面我们实现一个小的demo来和大家学习一下. 效果图: 随便在网上找了两张身份证图片,识别并 ...

  5. 如何在uni-app中引入iconfont图标

    如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...

  6. 删除我的电脑中的百度云管家图标

    在安装了百度云管家后,会在我的电脑中C盘前面产生一个图标,官方的设置里面设置为不在我的电脑中显示百度云管家后,仍然还在.最后通过度娘找到了解决办法. 打开"注册表编辑器"(摁&qu ...

  7. python代码示例百度云-python利用百度云接口实现车牌识别的示例

    一个小需求---实现车牌识别. 目前有两个想法 1. 调云在线的接口或者使用SDK做开发(配置环境和编译第三方库很麻烦,当然使用python可以避免这些问题) 2. 自己实现车牌识别算法(复杂) 一开 ...

  8. php利用ajax文件上传,如何在PHP中利用AjaxForm实现一个文件上传功能

    如何在PHP中利用AjaxForm实现一个文件上传功能 发布时间:2020-12-18 14:52:38 来源:亿速云 阅读:94 作者:Leah 如何在PHP中利用AjaxForm实现一个文件上传功 ...

  9. android开发 转跳功能,如何在Android中利用Intent实现一个页面跳转功能

    如何在Android中利用Intent实现一个页面跳转功能 发布时间:2021-02-20 17:06:31 来源:亿速云 阅读:113 作者:Leah 本篇文章为大家展示了如何在Android中利用 ...

  10. python不调包实现sobel_python利用百度云接口实现车牌识别的示例

    一个小需求---实现车牌识别. 目前有两个想法 1. 调云在线的接口或者使用SDK做开发(配置环境和编译第三方库很麻烦,当然使用python可以避免这些问题) 2. 自己实现车牌识别算法(复杂) 一开 ...

最新文章

  1. gulp.js 的安装以及使用
  2. 【翻译】理念:无冲突的扩展本地DOM原型
  3. 洛谷 P1886 滑动窗口
  4. 开发人员如何学习 Kubernetes
  5. 如何通过自学找到一份开发的工作?
  6. 什么是javax.ws.rs.core.context? [第5部分]
  7. Android studio 创建kotlin工程
  8. 300张小抄表搞定机器学习知识点:学习根本停不下来!
  9. Windows 2003 上使用 Windows Live Writer
  10. 2021年高考成绩什么时候查询辽宁,2021年辽宁高考成绩什么时候几点可以查
  11. csstd超出部分用...替换
  12. linux初级之总结复习
  13. 关于Initializing Spring root WebApplicationContext解决方法
  14. python3 歌词文件krc转lrc
  15. 51单片机驱动TM1638芯片+Proteus仿真
  16. Gmail企业邮箱让中小企业免费拥有企业邮箱
  17. 麦当劳可以免费添加可乐的!
  18. linux raid5热备,有热备盘的服务器RAID-5数据恢复实例
  19. R语言GO富集分析报错求助
  20. [错题]Mocha and Railgun

热门文章

  1. linux设置伪静态地址,wordpress网站linux和win主机URL伪静态设置方法详解
  2. HDLbits day2 一位全加器逻辑表达式原理 FPGA关于仿真
  3. 1688API接口,item_get_app - 获取1688app上原数据
  4. delphi7丢失控件面板的处理方法
  5. linux多线程如何分配到多核上,Linux多线程编程 多核编程
  6. Unity3D开发之VideoPlayer
  7. EXCEL VBA编程进阶-曾贤志-专题视频课程
  8. 冲击波病毒简介及解决方法
  9. 图网络模型原理详解(Graph Network)
  10. SQL Bulk Insert