HarmonyOS开发：文档扫描详解

目录

• 前言
• 文档扫描技术概述
• 关于文档扫描
• 使用场景
• 实现文档扫描
• 自定义文档扫描
• 结束语

前言

在数字化转型的浪潮中，文档扫描功能已成为移动应用中的一项重要功能。无论是办公自动化、教育、金融还是医疗领域，文档扫描都极大地提高了信息处理的效率。在HarmonyOS开发中，鸿蒙操作系统提供了强大的API支持，这让开发者可以轻松实现文档扫描功能。那么本文就来详细介绍如何在HarmonyOS应用中实现文档扫描功能，包括技术选型、实现步骤和代码示例。

文档扫描技术概述

先来了解一下文档扫描技术，文档扫描功能涉及图像采集、图像处理、文字识别等多个技术领域。而在HarmonyOS中，可以通过集成图像处理和OCR（光学字符识别）技术来实现高质量的文档扫描。

关于文档扫描

在HarmonyOS中，文档扫描通常涉及以下的步骤，具体如下所示：
1.图像采集：使用设备的相机拍摄文档图像。
2.图像预处理：对图像进行裁剪、旋转校正、增强对比度等操作。
3.文字识别：使用OCR技术识别图像中的文字。
4.结果处理：根据识别结果执行后续操作，如显示、存储或进一步处理。

使用场景

再来介绍一下文档扫描的使用场景，文档扫描控件提供拍摄文档并转换为高清扫描件的服务。仅需使用手机拍摄文档，即可自动裁剪和优化，并支持图片保存和分享；同时支持拍摄或从图库选择图片识别表格，生成表格文档。可广泛用于教育办公场景，扫描文档、票据、课堂PPT和书籍等输出图片供用户完成发送、存档等操作。

实现文档扫描

步骤1：引入类文件

将文档扫描控件相关的类添加至工程，具体如下所示：

import { DocType, DocumentScanner, DocumentScannerConfig, SaveOption, FilterId, ShootingMode } from "@kit.VisionKit";

步骤2：配置布局

配置布局，根据业务场景配置文档扫描控件的相关属性，获取返回的文档图片uri列表，具体如下所示：

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = 'DocumentScanner'

@Entry
@Component
struct Index {
  private docScanConfig = new DocumentScannerConfig()

  aboutToAppear() {
    this.docScanConfig.supportType = [DocType.DOC, DocType.SHEET]
    this.docScanConfig.isGallerySupported = true
    this.docScanConfig.editTabs = []
    this.docScanConfig.maxShotCount = 3
    this.docScanConfig.defaultFilterId = FilterId.ORIGINAL
    this.docScanConfig.defaultShootingMode = ShootingMode.MANUAL
    this.docScanConfig.isShareable = true
    this.docScanConfig.originalUris = []
  }

  build() {
    Column() {
      DocumentScanner({
        scannerConfig: this.docScanConfig,
        onResult: (code: number, saveType: SaveOption, uris: string[]) => {
          hilog.info(0x0001, TAG, `result code: ${code}, save: ${saveType}`)
          uris.forEach(uriString => {
            hilog.info(0x0001, TAG, `uri: ${uriString}`)
          })
        }
      }).size({ width: '100%', height: '100%' })
    }
    .height('100%')
    .width('100%')
  }
}

实战示例分享

接下来分享一个实际开发中的使用示例，这里的开发实例分两页实现，一页为文档扫描入口页，一页为文档扫描实现页 ，具体的操作代码如下所示：
1、文档扫描入口页，需引入文档扫描实现页，实现页文件名为DocDemoPage。

import { DocDemoPage } from './DocDemoPage'

@Entry
@Component
struct MainPage {
  @Provide('pathStack') pathStack: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
    if (name === 'documentScanner') {
      DocDemoPage()
    }
  }

  //文档扫描入口按钮，可替换为业务入口
  build() {
    Navigation(this.pathStack) {
      Button('DocumentScanner', { stateEffect: true, type: ButtonType.Capsule })
        .width('50%')
        .height(40)
        .onClick(() => {
          this.pathStack.pushPath({ name: 'documentScanner' })
        })
    }.title('文档扫描控件demo').navDestination(this.PageMap)
    .mode(NavigationMode.Stack)
  }
}

2、文档扫描实现页，文件名为DocDemoPage，需被引入至入口页。

import {
  DocType,
  DocumentScanner,
  DocumentScannerConfig,
  SaveOption,
  EditTab,
  FilterId,
  ShootingMode
} from "@kit.VisionKit"
import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = 'DocDemoPage'

//文档扫描页，用于加载uiExtensionAbility
@Entry
@Component
export struct DocDemoPage {
  @State docImageUris: string[] = []
  @Consume('pathStack') pathStack: NavPathStack
  private docScanConfig = new DocumentScannerConfig()

  aboutToAppear() {
    this.docScanConfig.supportType = [DocType.DOC, DocType.SHEET]
    this.docScanConfig.isGallerySupported = true
    this.docScanConfig.editTabs = []
    this.docScanConfig.maxShotCount = 3
    this.docScanConfig.defaultFilterId = FilterId.ORIGINAL
    this.docScanConfig.defaultShootingMode = ShootingMode.MANUAL
    this.docScanConfig.isShareable = true
    this.docScanConfig.originalUris = []
  }

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Top }) {
      //展示文档扫描结果
        List() {
          ForEach(this.docImageUris, (uri: string) => {
            ListItem() {
              Image(uri)
                .objectFit(ImageFit.Contain)
                .width(100)
                .height(100)
            }
          })
        }
        .listDirection(Axis.Vertical)
        .alignListItem(ListItemAlign.Center)
        .margin({
          top: 50
        })
        .width('80%')
        .height('80%')
        
        //文档扫描
        DocumentScanner({
          scannerConfig: this.docScanConfig,
          onResult: (code: number, saveType: SaveOption, uris: string[]) => {

            if (code === -1) {
              this.pathStack.pop()
            }
            uris.forEach(uriString => {

            })
            this.docImageUris = uris
          }
        })
          .size({ width: '100%', height: '100%' })
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .hideTitleBar(true)
  }
}

最后再来看一下文档扫描的效果图，具体如下所示：

自定义文档扫描

上面常规的文档扫描使用介绍完之后，其实还有自定义文档扫描。也就是说除了使用预置的OCR模型，开发者还可以根据应用的需求自定义文档扫描行为，比如：

• 自定义图像预处理流程：根据文档的特点调整图像处理参数。
• 自定义识别结果的格式：根据应用的需求调整识别结果的格式和内容。

结束语

上面关于文档扫描的详细介绍，不难发现文档扫描功能是HarmonyOS开发中的一项强大工具，它不仅能够提升应用的实用性，还能增强用户的交互体验。通过本文的介绍，大家应该了解了如何在HarmonyOS应用中实现文档扫描功能，在后面的开发中想必也会有更加深刻的认识和使用。随着技术的不断进步和生态的日益成熟，我们期待更多的创新应用能够利用这一功能，为用户提供更加丰富和便捷的服务，开发出更加专业的移动端应用。