基于PaddleOCR银行卡识别实现（四）之uni-app离线插件

news2025/11/4 9:22:50

目的

在前三篇文章中完成了银行卡识别整个模型训练等工作，通过了解PaddleOCR的端侧部署，我们也可以将银行卡号检测模型和识别模型移植到手机中，做成一款uni-app手机端离线银行卡号识别的应用。

准备工作

为了不占用过多篇幅，这里不讲解Android studio如何下载和SDK配置，请自行查找资料。

1、HbuilderX

2、Android Studio 并配置 NDK

请根据 Android Studio 用户指南中的安装及配置 NDK 和 CMake 内容，预先配置好 NDK 。

3、基于PaddleOCR的离线银行卡号识别插件

插件包结构：

开始

一、HbuilderX中使用

1、将插件包拷贝到nativeplugins中

2、manifest.json中选择离线插件

3、制作自定义基座后，就可以正常使用了

二、Android Studio中使用

1、将插件里文件引入libs目录下

2、修改app包下的build.gradle

添加ndk配置

排除libc++_shared.so包冲突：

3、修改dcloud_uniplugins.json，添加插件配置

三、编写uni-app页面代码

<template>
    <div>
        <button type="primary" @click="takePhoto">银行卡识别</button>
    </div>
</template>
 
<script>
    var ocrModule = uni.requireNativePlugin("YY-TomatoOCRBank")
    // var ocrModule = uni.requireNativePlugin("OCRModule")
    const modal = uni.requireNativePlugin('modal');
    export default {
        onLoad() {},
        methods: {
            takePhoto() {
                uni.chooseImage({
                    count: 6, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['camera'], //从相册选择
                    success: function(res) {
                        console.log(JSON.stringify(res.tempFilePaths));
 
                        uni.getImageInfo({
                            src: res.tempFilePaths[0],
                            success: function(image) {
                                // 调用异步方法
                                ocrModule.ocrAsyncFunc({
                                        'filePath': image.path
                                    },
                                    (ret) => {
                                        modal.toast({
                                            message: ret,
                                            duration: 30
                                        });
                                    })
                            }
                        });
                    }
                });
            }
        }
    }
</script>

制作一中的自定义基座打包并运行到手机上或导出离线页面在android studio中运行到手机上。