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

一、工具

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