HarmonyOS6 - 鸿蒙AI卡证识别实战案例

开发环境为：

开发工具：DevEco Studio 6.0.1 Release
API版本是：API21

本文所有代码都已使用模拟器测试成功！

1. 演示

2. 需求

需求如下：

1. 用户可以拍照或从图库中选择得到身份证正反面照片，然后自动识别出相关信息，显示到页面中
2. 用户可以拍照或从图库中选择得到银行卡照片，然后自动识别出卡号等相关信息，显示到页面中

3. 分析

针对以上需求，鸿蒙SDK中的AI能力里，有一个卡证识别控件，该控件提供身份证（目前仅支持中国大陆二代身份证，且不包含民汉双文身份证）、行驶证、驾驶证、护照、银行卡的结构化识别服务，满足卡证的自动分类功能，系统可自动判断所属卡证类型并返回结构化信息和卡证图片信息。

对于需要填充卡证信息的场景，如身份证、银行卡信息等，可使用卡证识别控件读取OCR（Optical Character Recognition）信息，将结果信息返回后进行填充。支持单独识别正面、反面，或同时进行双面识别。

但是在开发过程中，我们需要注意如下约束和限制：

• 支持的语种类型：简体中文、英文。
• 卡证识别暂时只支持中国二代身份证、中国国内银行卡、中国护照、中国驾驶证、中国行驶证（暂不支持中国港澳台地区及海外证件）。
• 卡证需要保持与真实证件一致的长宽比、没有形变、正向拍摄角度小于30度。
• 卡证图像清晰、完整。无摩尔纹、无遮挡、无反光、无卡套。
• 不允许被其他组件或窗口遮挡。

4. 开发

官网参考API文档地址：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/vision-card-recognition

我们可以参考官方API文档进行代码开发，以下我以身份证和银行卡识别为例

1. 身份证正反面识别

页面代码如下：

import { CardRecognition, CardRecognitionResult, CardSide, CardType, ShootingMode } from '@kit.VisionKit';

/**
 * 身份证人像面，数据模型
 */
export interface CardFrontModel {
  name?: string //姓名
  sex?: string //性别(男)
  nationality?: string //民族
  address?: string //住址
  birth?: string //出生(1991年5月13日)
  idNumber?: string //公民身份号码
  cardImageUri?: string //身份证人像面图片uri（不含背景）
  originalImageUri?: string //身份证人像面图片uri（含背景）
}

/**
 * 身份证国徽面，数据模型
 */
export interface CardBackModel {
  authority?: string //签发机关
  validPeriod?: string //有效期限(2021.05.31-2041.05.31)
  cardImageUri?: string //身份证国徽面图片uri（不含背景）
  originalImageUri?: string //身份证国徽面图片uri（含背景）
}

/**
 * 案例：身份证正反面信息识别
 */
@Entry
@Component
struct Page12 {
  //保存身份证人像面数据的对象
  @State cardFrontModel: CardFrontModel = {};
  //保存身份证国徽面数据的对象
  @State cardBackModel: CardBackModel = {};

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Stack({ alignContent: Alignment.Top }) {
        if (this.cardFrontModel.name) {
          Column({ space: 10 }) {
            Text('身份证正面信息：')
              .fontSize(20)
              .fontWeight(500)
            Column({ space: 10 }) {
              //正面照
              Image(this.cardFrontModel.cardImageUri)
                .objectFit(ImageFit.Contain)
                .width('100%')
                .borderRadius(5)
                .height(160)
              //姓名
              Text('姓名：' + this.cardFrontModel.name)
              Row({ space: 40 }) {
                //性别
                Text('性别：' + this.cardFrontModel.sex)
                //民族
                Text('民族：' + this.cardFrontModel.nationality)
              }
              .width('100%')

              //出生
              Text('出生：' + this.cardFrontModel.birth)
              //住址
              Text('住址：' + this.cardFrontModel.address)
              //公民身份号码
              Text('公民身份号码：' + this.cardFrontModel.idNumber)
            }
            .width('100%')
            .alignItems(HorizontalAlign.Start)

            Text('身份证反面信息：')
              .fontSize(20)
              .fontWeight(500)
              .margin({ top: 15 })
            Column({ space: 10 }) {
              //国徽面
              Image(this.cardBackModel.cardImageUri)
                .objectFit(ImageFit.Contain)
                .width('100%')
                .borderRadius(5)
                .height(160)
              //签发机关
              Text('签发机关：' + this.cardBackModel.authority)
              //有效期限
              Text('有效期限：' + this.cardBackModel.validPeriod)
            }
            .width('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .alignItems(HorizontalAlign.Start)
          .width('100%')
          .padding(20)
        } else {
          Column() {
            Text('暂无数据')
              .fontWeight(800)
              .fontSize(30)
          }
        }
      }
      .size({
        width: '100%',
        height: '100%'
      });

      if (canIUse('SystemCapability.AI.Component.CardRecognition')) {
        CardRecognition({
          supportType: CardType.CARD_ID, //Types of cards
          cardSide: CardSide.DEFAULT, // identify Pages
          cardRecognitionConfig: {
            defaultShootingMode: ShootingMode.MANUAL,
            isPhotoSelectionSupported: true
          },
          callback: ((params: CardRecognitionResult) => {
            if (params.code == 200) {
              this.cardFrontModel = JSON.parse(JSON.stringify(params.cardInfo?.front))
              this.cardBackModel = JSON.parse(JSON.stringify(params.cardInfo?.back))
            }
          })
        });
      }
    }
    .width('100%')
    .height('100%');
  }
}

只需要这一个文件即可，拷贝过去就能使用，用真机访问该页面就可以出现如下效果了：

2. 银行卡号识别

上面身份证正反面识别没问题之后，其他证件，如银行卡、护照、驾驶证、行驶证等证件就都可以识别了，无非就是改下【CardRecognition】控件中的【supportType】参数即可

supportType参数支持的类型有如下：

页面代码如下：

import { CardRecognition, CardRecognitionResult, CardSide, CardType, ShootingMode } from '@kit.VisionKit';

/**
 * 银行卡，数据模型
 */
export interface BankModel {
  bankNum?: string //银行卡号
  validPeriod?: string //有效期限
  cardImageUri?: string //银行卡图片uri（不含背景）
  originalImageUri?: string //银行卡图片uri（含背景）
}

/**
 * 案例：银行卡号识别
 */
@Entry
@Component
struct Page13 {
  //保存银行卡数据的对象
  @State bankModel: BankModel = {};

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Stack({ alignContent: Alignment.Top }) {
        if (this.bankModel.bankNum) {
          Column({ space: 10 }) {
            Text('银行卡识别结果：')
              .fontSize(20)
              .fontWeight(500)
            Image(this.bankModel.cardImageUri)
              .objectFit(ImageFit.Contain)
              .width('100%')
              .borderRadius(5)
              .height(160)
            //卡号
            Text('卡号：' + this.bankModel.bankNum)
            Text('有效期限：' + this.bankModel.validPeriod)
          }
          .alignItems(HorizontalAlign.Start)
          .width('100%')
          .padding(20)
        } else {
          Column() {
            Text('暂无数据')
              .fontWeight(800)
              .fontSize(30)
          }
        }
      }
      .size({
        width: '100%',
        height: '100%'
      });

      if (canIUse('SystemCapability.AI.Component.CardRecognition')) {
        CardRecognition({
          supportType: CardType.CARD_BANK, //表示需要识别的卡证类型
          cardSide: CardSide.DEFAULT, //需要识别的卡证页面的枚举值。(DEFAULT:卡证默认面。如身份证为人像面，其他卡证为正面。)
          //cardRecognitionConfig:卡证识别配置项
          cardRecognitionConfig: {
            defaultShootingMode: ShootingMode.MANUAL, //拍摄模式
            isPhotoSelectionSupported: true //是否支持从图库选图。
          },
          //CardRecognitionResult:卡证识别结果返回的参数
          callback: ((params: CardRecognitionResult) => {
            //200：识别成功
            if (params.code == 200) {
              this.bankModel = JSON.parse(JSON.stringify(params.cardInfo?.main))
            }
          })
        });
      }
    }
    .width('100%')
    .height('100%');
  }
}

只需要这一个文件即可，拷贝过去就能使用，用真机访问该页面就可以出现如下效果了：

其他证件以此类推，这里我就不再赘述了，大家可以自己换一个证件类似测试即可

注意：

在拍照时，我们只需要对着卡证即可，会自动进行识别区域，还是比较智能的，其他地方好像是需要对着卡证非常正才能识别到，鸿蒙的这个功能感觉更好用一点（个人感觉哈）

最后

• 希望本文对你有所帮助！
• 本人如有任何错误或不当之处，请留言指出，谢谢！