鴻蒙應(yīng)用開發(fā)之——場景化視覺服務(wù)（卡證識別）（基礎(chǔ)）

一、工具

DevEco Studio

二、項目介紹

開發(fā)步驟

將卡證識別控件相關(guān)的類添加至工程。

//其中CardRecognitionConfig,CardContentConfig,BankCardConfig從API12開始支持

import { CardRecognition, CallbackParam, CardType, CardSide, CardRecognitionConfig, ShootingMode, CardContentConfig, BankCardConfig } from "@kit.VisionKit";

配置頁面的布局，選擇需要識別的卡證類型和需要識別的卡證頁面，配置對應(yīng)設(shè)置項，在回調(diào)中獲取結(jié)果返回值。

以下分別為身份證、銀行卡、護照、駕駛證和行駛證的示例代碼。

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

? }

}

開發(fā)實例

// 卡證識別開發(fā)實例分兩頁實現(xiàn)，一頁為卡證識別入口頁，一頁為卡證識別實現(xiàn)頁

// 卡證識別入口頁，需引入卡證識別實現(xiàn)頁，以下文實例為例，實現(xiàn)頁文件名為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)

? }

}

//卡證識別實現(xiàn)頁，文件名為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%')

? }

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容