HarmonyOS6 - 鸿蒙AI卡证识别实战案例
开发环境为：
开发工具：DevEco Studio 6.0.1 Release
API版本是：API21
本文所有代码都已使用模拟器测试成功！
1. 演示
鸿蒙-AI识别身份证号
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. 身份证正反面识别
页面代码如下：
js
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%');
}
}只需要这一个文件即可，拷贝过去就能使用，用真机访问该页面就可以出现如下效果了：
鸿蒙-AI识别身份证号
2. 银行卡号识别
上面身份证正反面识别没问题之后，其他证件，如银行卡、护照、驾驶证、行驶证等证件就都可以识别了，无非就是改下【CardRecognition】控件中的【supportType】参数即可
supportType参数支持的类型有如下：
页面代码如下：
js
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%');
}
}只需要这一个文件即可，拷贝过去就能使用，用真机访问该页面就可以出现如下效果了：
鸿蒙-AI识别银行卡号
其他证件以此类推，这里我就不再赘述了，大家可以自己换一个证件类似测试即可
注意：
在拍照时，我们只需要对着卡证即可，会自动进行识别区域，还是比较智能的，其他地方好像是需要对着卡证非常正才能识别到，鸿蒙的这个功能感觉更好用一点（个人感觉哈）
最后
- 希望本文对你有所帮助！
- 本人如有任何错误或不当之处，请留言指出，谢谢！