Case Study of Document Scanner in VisionKit on HarmonyOS 5.0 Abstract This article introduces how to use @hms.ai.DocumentScanner to implement the document scanning function in HarmonyOS 5.0. By creating the VisionKitDocumentScanner component, users can perform document scanning and display the scanning results.

import { router } from '@kit.ArkUI' import { DocumentScanner, DocumentScannerConfig } from '@hms.ai.DocumentScanner'

@Entry @Component struct VisionKitDocumentScanner { @State docImageUris: string[] = [] private docScanConfig = new DocumentScannerConfig()

  aboutToAppear(): void { 
    this.docScanConfig.maxShotCount = 3 
  } 

  build() { 
    Stack({ alignContent: Alignment.Top }) { 
      Swiper() { 
        ForEach(this.docImageUris, (uri: string) => { 
          Image(uri) 
            .objectFit(ImageFit.Contain) 
            .width(100) 
            .height(100) 
        }) 
      } 
      .padding(15) 
      .width('100%') 
      .height('100%') 

      // Document scanning 
      DocumentScanner({ 
        scannerConfig: this.docScanConfig, 
        onResult: (code, saveType, uris) => { 
          if (code === -1) { 
            router.back() 
          } 
          this.docImageUris = uris 
        } 
      }) 
    } 
    .height('100%') 
    .width('100%') 
  } 
}