从零开始开发纯血鸿蒙应用
〇、前言
上一篇,介绍的是无边框截图,总体来说,就是将一个本来可以动态变更内容的文本,固化成永恒不变的图片,反过来,将内容固定的图片转变回支持动态变更内容的文本,是否可以做到呢?在现有的鸿蒙 API 中。答案是可以的。下面就来向大家分享,如何集成该功能。
一、优化菜单功能
因为考虑让编辑页的右上角菜单,与查看页的不同,所以,需要让之前的菜单,演变成具备动态加载菜单项名称的能力,就需要进行一番优化。
在之前,菜单项的名称是以字符串字面量的形式,硬编码在PageTitleMenu
里面的,而现在,将利用其所关联绑定的 MenuOption
进行升级:
如此一来,右上角菜单的具体菜单项的名称,便可以由PageTitleBar
的使用者进行自定义了:
所以,使用同一个PageTitleBar
组件,在 ViewFilePage
可以这样定义菜单内容:
而在 EditPage
由可以变成如下定义:
这便具备了高可复用性。
二、认识 textRecognition
接下来,进入主题,针对实现从图片当中识别通用文本
功能所需的鸿蒙 API:textRecognition 进行系统性了解,并掌握它的使用方法。
1、是什么
在鸿蒙 API 的各个 Kit 中,有个 Core Vision Kit、中文称之为基础视觉服务,属于鸿蒙AI能力的具体一种。
在基础视觉服务API里面,有一个负责文字识别的 textRecognition,官方介绍如下:
通用文字识别服务提供图像信息转换为字符信息的能力。通过拍照、扫描等光学输入方式,把各种票据、卡证、表格、报刊、书籍等印刷品文字转化为图像信息,再利用文字识别技术将图像信息转化为计算机等设备可以使用的字符信息,便于用户提取字符内容、屏幕坐标及外框。目前本服务支持识别的语言有:简体中文、英文、日文、韩文、繁体中文五种语言。
2、如何用
textRecognition 的使用,一般遵循如下步骤:
1)初始化
2)读取图片
3)识别图片
4)保存结果
5)释放占用
从上面的步骤可以看出,textRecognition 的使用,无需获取和持有相应的实例,只需像使用静态类方法那样去调用每个步骤对应的具体方法即可。
3、为什么
textRecognition 为什么可以做到识别指定图片中的包含的文本,并输出成字符串格式的数据呢?
解答这个问题,需要回顾一下前面实现的内容截图功能。对指定组件进行屏幕截图时,直接产生的是一个 PixelMap、也即图片未编码前的内容,是一种像素描述,描述指定范围内的每个像素点的像素信息。
而包含文本的图片,其 PixelMap 中的像素点信息都是很有规律的,因为字形固定的缘故,所以,利用计算机的强大计算能力,完全可以通过扫描非空白像素点的排列,去匹配对应的文字。
三、集成 textRecognition
上一节,从理论的层面去认识了 textRecognition,现在,开始从实践的角度去掌握它。
1、初始化
根据上面提到的使用步骤,首先在需要集成文字识别功能的页面,对 textRecognition 进行初始化,为了保证页面渲染完成时,textRecognition 就已经初始化完成,不妨将对应的代码,放在生命周期函数 ``aboutToAppear 当中:
并用一个状态变量isInitTextRecognition
,去标识 textRecognition 是否成功初始化。
3、释放 textRecognition
既然 textRecognition 的初始化,放在了 aboutToAppear 当中,那么它的释放动作,便可以在 aboutToDisappear
中完成:
3、识别图片
这一步,具体由三个小过程组成:
1)借助 photoAccessHelper.PhotoViewPicker 从图库中选择图片
2)结合 fileIo 和 image 的相关 API 获取所选图片的 PixelMap 数据
3)用完成初始化的 textRecognition 从 PixelMap 中识别文本
对于第一个过程,本着让屏幕前的你再次熟悉如何封装异步方法的目的,我将其单独封装成方法,如下:
而剩下的两个过程,则直接封装在同一个方法体中:
由于 textRecognition 的 recognizeText 方法需要两个参数:
1)VisionInfo:
2)TextRecognitionConfiguration
所以,需要事先准备好。
4、保存结果
最后,就是将文本识别结果给保存起来,而在 EditPage 中,就是利用状态变量 fileContent
,回显到文本输入域当中,进而写入到沙箱文件中。
当文本识别过程中,没有发生错误,就会在对应的 then 回调函数中,通过 textRecognition.TextRecognitionResult
返回:
由于我这里,不要求还原排版,所以,直接用 textRecognition.TextRecognitionResult.value 去获取最终的识别结果;如果需要还原排版,那么就需要顺着 TextBlock
对象往下逐个层级的解析,有兴趣的不妨前往官网textRecognition,进一步学习。
四、总结
屏幕前的你,在阅读到我这篇文档之前,或许会认为,想要在鸿蒙应用中集成识别图片文本的功能,需要经过很复杂的操作,然而,实际上,鸿蒙API Kit 里面早已提供了开箱即用的AI能力,压根不需要很复杂的实现过程。