鸿蒙(HarmonyOS)原生AI能力之文本识别

原生智能介绍

  • 在之前开发中,很多场景我们是通过调用云端的智能能力进行开发。例如文本识别、人脸识别等。

  • 原生即指将一些能力直接集成在本地鸿蒙系统中,通过不同层次的AI能力开放,满足开发者的不同场景下的诉求,降低应用开发门槛,帮助开发者快速实现应用智能化

有哪些原生智能能力

  • 基础视觉服务
  • 基础语音服务
  • 端侧模型部署
  • 端侧推理
  • 意图框架
  • .........

基础视觉服务 - Core Vision Kit

  • Core Vision Kit(基础视觉服务)是机器视觉相关的基础能力,接下来要导入的类,都在@kit.VisionKit中例如本篇要讲的文字识别即是如此。

文本识别介绍与使用

  • 概念:将图片中的文字给识别出来

  • 使用 textRecognition 实现文本识别

  • 限制:

    • 仅能识别5种语言类型
      • 简体中文、繁体中文、英文、日文、韩文
  • 使用步骤

    1. 导入textRecognition

      import { textRecognition } from '@kit.CoreVisionKit'
      
    2. 实例化visionInfo对象,用来准备待识别的图片(需PixelMap类型)

      let visionInfo: textRecognition.VisionInfo = {
          pixelMap: '待识别图片'
      };
      
    3. 实例化TextRecognitionConfiguration对象,设置识别配置(目前仅有是否开启朝向检测一项配置)

      let textConfiguration: textRecognition.TextRecognitionConfiguration = {
        	// 是否开启朝向检测
          isDirectionDetectionSupported: false
      };
      
    4. 调用textRecognition的recognizeText接口传入以上两个对象,开启识别并对识别结果进行处理,得到的是TextRecognitionResult类型结果,这个对象的value属性即为识别结果

      textRecognition.recognizeText(visionInfo, textConfiguration)
      
  • 这里解释一下这几步

    • 你需要用textRecognition,所以需要先找到它,也即导入,这没什么好说的

    • 你需要用它来帮你识别图片,那你是不是应该把需要识别的图片给它?所以第一个参数就是给他传递一个图片,只不过这个图片只能传PixelMap类型的(这就是为什么上篇我要写PixMap的原因),但是这个图片不能直接传,要包装成VisionInfo类型的对象(虽然目前为止,这个对象只有这一个属性,但保不齐未来会加)

      然后就是设置一下它识别的相关参数,它目前也只有一个参数,叫isDirectionDetectionSupported,设置是否开启朝向检测,因为有的图片可能是正的,有的图片可能是反的斜的。所以对于反的斜的图片如果这项开启为true,则会检测的更为准确。但是经过猫林老师肉测,其实开不开启扫描反的斜的图片,得到的结果都差不多了。所以可以看自己选择。顺便一提,这个参数可以不传,不传默认是true。然后猫林老师觉得:未来随着API发展,可能会多一些参数也说不准

    • 最后即为调用其进行识别的方法,也即recognizeText开始识别

    • 根据上面所说的,其实上面说的四步,也可以极简改为两步,代码如下

      import { textRecognition } from '@kit.CoreVisionKit'
      
      textRecognition.recognizeText({ pixelMap: '待识别图片' })
      
      • 解释:这里就相当于没传第二个参数,它默认值即为true,也即开启朝向检测。
    • 至于如何读取相册图片,以及把图片解码变成PixelMap,不是今天分享的主题,且之前猫林老师有两篇文章分别讲过不会的可以看之前文章,所以这里直接给代码(可看注释)

      // 1. 使用PhotoViewPicker选择相册图片
      let photoPicker = new photoAccessHelper.PhotoViewPicker();
      // 2. 使用select方法开始选择图片
       photoPicker.select({
         			// 设置只选择图片
              MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
         			// 设置最大只能选择1张
              maxSelectNumber: 1
      })
      .then((res: photoAccessHelper.PhotoSelectResult) => {
         // res参数里的photoUris属性即为选择的图片结果数组(因为可以选择多张),每个元素得到的是临时路径
         // 用fs打开这个路径
         let fileSource = fileIo.openSync(res.photoUris[0], fileIo.OpenMode.READ_ONLY);
         // 使用createImageSource方法将图片文件流常见成图片源码
         let imageSource = image.createImageSource(fileSource.fd);
         // 再使用createPixelMap方法,将图片源码制作成PixelMap类型
         const pixelMap = imageSource.createPixelMapSync()
         // 后续使用textRecognition的recognizeText那一套代码进行识别即可
      })
      

文本识别展示案例

  • 我们来实现如下图的效果

    image-20241223092305711

    • 界面上从上往下放:
      • Image:显示选择的待识别图片
      • Button:选择相册里的图片
      • Button:开始识别按钮
      • TextArea:显示识别后的结果,使用TextArea的原因是它对比Text会多一个滚动效果(防止内容过多显示不全)
  • 结合上面说的使用方法,最终文本识别代码如下

    import { photoAccessHelper } from '@kit.MediaLibraryKit'
    import { fileIo } from '@kit.CoreFileKit'
    import { image } from '@kit.ImageKit'
    import { textRecognition } from '@kit.CoreVisionKit'
    
    @Entry
    @Component
    struct Index {
      @State text: string = '识别结果'
      @State imgPixelMap: PixelMap | null = null
    
      build() {
        Column({ space: 20 }) {
          Button('打开图片')
            .width('85%')
            .onClick(async () => {
              const uri = await this.selectPhoto()
              if (uri) {
                const pixelMap = await this.getPixMap(uri)
                this.imgPixelMap = pixelMap
              }
            })
    
          Button('开始识别')
            .width('85%')
            .onClick(() => {
              this.recognize()
            })
    
          Image(this.imgPixelMap)
            .objectFit(ImageFit.Contain)
            .height('45%')
    
          Text(this.text)
            .width('85%')
            .layoutWeight(1)
            .border({ style: BorderStyle.Dotted, width: 5, color: Color.Red })
        }
        .width('100%')
        .height('100%')
      }
    
      async selectPhoto() {
        try {
          // 实例化照片选择器
          const picker = new photoAccessHelper.PhotoViewPicker()
          // 选择图片
          const uris = await picker.select({
            MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
            maxSelectNumber: 1
          })
          return uris.photoUris[0]
    
        } catch {
          console.log('err')
          return null
        }
      }
    
      // 根据图片路径转PixelMap
      async getPixMap(uri: string) {
        try {
          const imgSrc = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY)
          let source = image.createImageSource(imgSrc.fd)
          return source.createPixelMapSync()
        } catch {
          console.log('error' + uri)
          return null
        }
      }
    
      // 文字识别
      async recognize() {
        const info: textRecognition.VisionInfo = {
          pixelMap: this.imgPixelMap!
        }
        const res = await textRecognition.recognizeText(info, {
          isDirectionDetectionSupported: false
        })
        this.text = res.value
      }
    }
    

总结

  • 今天猫林老师给大家分享了鸿蒙提供的原生AI能力。其实听起来名字很高大上,用起来非常简单。这是因为鸿蒙帮我们做了高度封装,我们无须再关注OCR的相关知识,只需要使用鸿蒙提供的接口即可。所以,华为为了推广鸿蒙,发展鸿蒙生态,真的为开发者想了好多。这样的华为,你爱了吗?
  • 友情提醒:本篇内容只适合用真机测试,模拟器无法出效果。
  • P.S:根据猫林老师肉测,在API12版本中的Mac模拟器成功出效果。其他版本都不行。所以建议有条件还是上真机。
posted @ 2024-12-23 10:36 猫林老师 阅读(333) 评论(0) 推荐(0) 编辑
摘要: 写入图片到相册介绍 在上一篇中,猫林老师给大家分享了如何在不申请权限的情况下读取相册内容。这一篇教大家如何写入图片到相册。 这在应用开发中,也是一个很常见的场景,比如我们要做一个文件扫描的功能。那是不是得把扫描的结果保存到图库呢?再比如我们做一个美颜的功能,那把相册里的原始图片读取出来后,经过我们的 阅读全文
posted @ 2024-12-18 15:14 猫林老师 阅读(56) 评论(0) 推荐(0) 编辑
摘要: 访问相册图片介绍 在应用开发中,很多场景需要我们需要访问相册中的图片。例如:上传头像、上传银行卡、身份证资料、扫描文件功能、美颜功能等 所以访问相册里的图片成为我们必须要学习和掌握的内容。那如何访问相册图片呢? 在HarmonyOS中,鉴于对用户隐私的高度保护,要方便的完全读取相册与写入相册,需要极 阅读全文
posted @ 2024-12-18 15:14 猫林老师 阅读(344) 评论(0) 推荐(0) 编辑
摘要: 本文所学技术可以用在哪 很多读者一看这个文章标题,可能根本不知道能干嘛,且不感兴趣。所以咱们先说说,今天写的这个技术有没有用。 首先,猫林老师即将给大家写的《原生AI之文字识别》就得用到这个知识。如果不学,等这篇文章面世时,各位可能有些代码看不懂。 其次,这个技术是实现一切图片处理的基石,比如你的A 阅读全文
posted @ 2024-12-18 14:26 猫林老师 阅读(33) 评论(0) 推荐(0) 编辑
摘要: 鸿蒙应用开发从入门到入行 预览器上下两栏白边 自从HarmonyOS升级到release版后,很多同学会问猫林老师:为什么他的预览器上下有白边,为什么明明根容器写了宽高百分百但没铺满。如下图 白边原因 其实上面的白边,称之为状态栏。上面会放手机wifi信号、电池电量等信息。一般情况下我们不需要把应用 阅读全文
posted @ 2024-12-18 09:36 猫林老师 阅读(64) 评论(0) 推荐(0) 编辑
摘要: 鸿蒙应用开发从入门到入行 鸿蒙开发神器 - AI辅助编程 CodeGenie介绍 目前有好几款AI插件可以装到DevEco上,出名的例如Copilot、通义灵码等。但是经过猫林老师截至到目前的测试。都没有特别适合鸿蒙开发,特别是Copilot还按月收费,对于大量希望转入鸿蒙开发的新入行者真是太不友好 阅读全文
posted @ 2024-12-09 10:33 猫林老师 阅读(30) 评论(0) 推荐(0) 编辑
摘要: 鸿蒙应用开发从入门到入行 第八天 - Tabs选项卡 导读:在本篇文章里,您将掌握使用Tabs选项卡做栏目分类,这是未来应用开发中极为常用的组件 首先说一声抱歉,比较忙很久没更新了。但放心吧,目前该忙的事已经忙完,后面会恢复更新频率。以及后续有计划出一套免费视频教程,敬请期待! 本篇文章所用素材下载 阅读全文
posted @ 2024-12-09 10:25 猫林老师 阅读(120) 评论(0) 推荐(0) 编辑
摘要: 鸿蒙应用开发从入门到入行 第七篇 - http网络请求 导读:在本篇文章里,您将掌握鸿蒙开发工具DevEco的基本使用、ArkUI里的基础组件,并通过制作一个简单界面掌握使用 HarmonyOS - 网络请求概述 在应用开发中,少不了需要向云端发送请求进行交互,这就需要进行网络通信。在Harmony 阅读全文
posted @ 2024-12-09 10:22 猫林老师 阅读(141) 评论(0) 推荐(1) 编辑
摘要: 第五篇 - 组件化开发思想开发鸿蒙案例(详解父子组件传值) 导读:在本篇文章里,您将掌握组件化开发、组件传值等相关知识。并能彻底弄懂鸿蒙父子组件数据的同步机制。本篇干货很多,特别是有些关于组件的细节,需要好好掌握。 本次整体学习目标介绍 最近比较忙,不过好在本文也是紧赶慢赶的弄出来了。 话不多说,我 阅读全文
posted @ 2024-12-09 10:09 猫林老师 阅读(84) 评论(0) 推荐(0) 编辑
摘要: 第四篇 - 层叠布局、自定义组件、ForEach循环生成组件 导读:在本篇文章里,您将掌握层叠布局、自定义组件的用法,特别是自定义组件将来的开发中必然会用,其中应该特别关注自定义组件的一些规范与装饰器。 Stack - 层叠容器组件 在App效果中,我们经常看到一些阴影蒙版、加载中遮罩等,如下图列表 阅读全文
posted @ 2024-12-09 10:03 猫林老师 阅读(50) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示