鸿蒙应用开发之场景化视觉服务卡证识别基础

仿佛云烟

发布于 2025-6-28 16:59

浏览

0收藏

一、工具

DevEco Studio

二、项目介绍

开发步骤
将卡证识别控件相关的类添加至工程。
//其中CardRecognitionConfig,CardContentConfig,BankCardConfig从API12开始支持
import { CardRecognition, CallbackParam, CardType, CardSide, CardRecognitionConfig, ShootingMode, CardContentConfig, BankCardConfig } from "@kit.VisionKit";
配置页面的布局，选择需要识别的卡证类型和需要识别的卡证页面，配置对应设置项，在回调中获取结果返回值。
以下分别为身份证、银行卡、护照、驾驶证和行驶证的示例代码。
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = 'CardRecognition'

@Entry
@Component
struct Index {
build() {
Column() {
//身份证
CardRecognition({
supportType: CardType.CARD_ID,
// 身份证可双面识别
cardSide: CardSide.DEFAULT,
cardRecognitionConfig: {
defaultShootingMode: ShootingMode.MANUAL,
isPhotoSelectionSupported: true
},
callback: ((params: CallbackParam) => {
hilog.info(0x0001, TAG, params code: ${params.code})
hilog.info(0x0001, TAG, params cardType: ${params.cardType})
hilog.info(0x0001, TAG, params cardInfo front: ${JSON.stringify(params.cardInfo?.front)})
hilog.info(0x0001, TAG, params cardInfo back: ${JSON.stringify(params.cardInfo?.back)})
})
})
}
.height('100%')
.width('100%')
}
}
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = 'CardRecognition'

@Entry
@Component
struct Index {
build() {
Column() {
// 银行卡
CardRecognition({
supportType: CardType.CARD_BANK,
// 银行卡为单面识别
cardSide: CardSide.FRONT,
cardRecognitionConfig: {
defaultShootingMode: ShootingMode.MANUAL,
isPhotoSelectionSupported: true,
cardContentConfig: { bankCard: { isBankNumberDialogShown: true} }
},
callback: ((params: CallbackParam) => {
hilog.info(0x0001, TAG, params code: ${params.code})
hilog.info(0x0001, TAG, params cardType: ${params.cardType})
hilog.info(0x0001, TAG, params cardInfo: ${JSON.stringify(params.cardInfo?.main)})
})})
}
.height('100%')
.width('100%')
}
}
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = 'CardRecognition'

@Entry
@Component
struct Index {
build() {
Column() {
// 护照
CardRecognition({
supportType: CardType.CARD_PASSPORT,
// 护照为单面识别
cardSide: CardSide.FRONT,
cardRecognitionConfig: {
defaultShootingMode: ShootingMode.MANUAL,
isPhotoSelectionSupported: true
},
callback: ((params: CallbackParam) => {
hilog.info(0x0001, TAG, params code: ${params.code})
hilog.info(0x0001, TAG, params cardType: ${params.cardType})
hilog.info(0x0001, TAG, params cardInfo: ${JSON.stringify(params.cardInfo?.main)})
})})
}
.height('100%')
.width('100%')
}
}
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = 'CardRecognition'

@Entry
@Component
struct Index {
build() {
Column() {
// 驾驶证
CardRecognition({
supportType: CardType.CARD_DRIVER_LICENSE,
// 驾驶证可双面识别
cardSide: CardSide.DEFAULT,
cardRecognitionConfig: {
defaultShootingMode: ShootingMode.MANUAL,
isPhotoSelectionSupported: true
},
callback: ((params: CallbackParam) => {
hilog.info(0x0001, TAG, params code: ${params.code})
hilog.info(0x0001, TAG, params cardType: ${params.cardType})
hilog.info(0x0001, TAG, params cardInfo front: ${JSON.stringify(params.cardInfo?.front)})
hilog.info(0x0001, TAG, params cardInfo back: ${JSON.stringify(params.cardInfo?.back)})
})
})
}
.height('100%')
.width('100%')
}
}
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = 'CardRecognition'

@Entry
@Component
struct Index {
build() {
Column() {
// 行驶证
CardRecognition({
supportType: CardType.CARD_VEHICLE_LICENSE,
// 行驶证可双面识别
cardSide: CardSide.DEFAULT,
cardRecognitionConfig: {
defaultShootingMode: ShootingMode.MANUAL,
isPhotoSelectionSupported: true
},
callback: ((params: CallbackParam) => {
hilog.info(0x0001, TAG, params code: ${params.code})
hilog.info(0x0001, TAG, params cardType: ${params.cardType})
hilog.info(0x0001, TAG, params cardInfo front: ${JSON.stringify(params.cardInfo?.front)})
hilog.info(0x0001, TAG, params cardInfo back: ${JSON.stringify(params.cardInfo?.back)})
})
})
}
.height('100%')
.width('100%')
}
}
开发实例
// 卡证识别开发实例分两页实现，一页为卡证识别入口页，一页为卡证识别实现页
// 卡证识别入口页，需引入卡证识别实现页，以下文实例为例，实现页文件名为CardDemoPage
import { CardDemoPage } from './CardDemoPage'

@Entry
@Component
struct MainPage {
@Provide('pathStack') pathStack: NavPathStack = new NavPathStack()

@Builder
PageMap(name: string) {
if (name === 'cardRecognition') {
CardDemoPage()
}
}

//卡证识别入口按钮
build() {
Navigation(this.pathStack) {
Button('CardRecognition', { stateEffect: true, type: ButtonType.Capsule })
.width('50%')
.height(40)
.onClick(() => {
this.pathStack.pushPath({ name: 'cardRecognition' })
})
}.title('卡证识别控件demo').navDestination(this.PageMap)
.mode(NavigationMode.Stack)
}
}
//卡证识别实现页，文件名为CardDemoPage，需被引入至入口页
import { CardRecognition, CallbackParam, CardType, CardSide, ShootingMode } from "@kit.VisionKit"
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = 'CardRecognitionPage'

//卡证识别页，用于加载uiExtensionAbility
@Entry
@Component
export struct CardDemoPage {
@State cardDataSource: Record<string, string>[] = []
@Consume('pathStack') pathStack: NavPathStack

build() {
NavDestination() {
Stack({ alignContent: Alignment.Top }) {
Stack() {
this.cardDataShowBuilder()
}
.width('80%')
.height('80%')

CardRecognition({
// 此处选择身份证类型作为示例
supportType: CardType.CARD_ID,
cardSide: CardSide.DEFAULT,
cardRecognitionConfig: {
defaultShootingMode: ShootingMode.MANUAL,
isPhotoSelectionSupported: true
},
callback: ((params: CallbackParam) => {
hilog.info(0x0001, TAG, params code: ${params.code})
if (params.code === -1) {
this.pathStack.pop()
}
hilog.info(0x0001, TAG, params cardType: ${params.cardType})
if (params.cardInfo?.front !== undefined) {
this.cardDataSource.push(params.cardInfo?.front)
}

if (params.cardInfo?.back !== undefined) {
this.cardDataSource.push(params.cardInfo?.back)
}

if (params.cardInfo?.main !== undefined) {
this.cardDataSource.push(params.cardInfo?.main)
}
hilog.info(0x0001, TAG, params cardInfo front: ${JSON.stringify(params.cardInfo?.front)})
hilog.info(0x0001, TAG, params cardInfo back: ${JSON.stringify(params.cardInfo?.back)})
})
})
}
.width('100%')
.height('100%')
}
.width('100%')
.height('100%')
.hideTitleBar(true)
}

@Builder
cardDataShowBuilder() {
List() {
ForEach(this.cardDataSource, (cardData: Record<string, string>) => {
ListItem() {
Column() {
Image(cardData.cardImageUri)
.objectFit(ImageFit.Contain)
.width(100)
.height(100)

Text(JSON.stringify(cardData))
.width('100%')
.fontSize(12)
}
}
})
}
.listDirection(Axis.Vertical)
.alignListItem(ListItemAlign.Center)
.margin({
top: 50
})
.width('100%')
.height('100%')
}
}