当前位置:   article > 正文

如何在uniapp中使用百度云实现OCR身份证识别功能_uniapp拍照使用百度ocr

uniapp拍照使用百度ocr

组件中使用

<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'))
    })
}

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

闽ICP备14008679号