Recognizing Barcodes in Local Images

The image-based barcode recognition capability is supported since API version 26.0.0.

The image-based barcode recognition capability can scan and recognize a barcode image in the photo gallery to retrieve information.

Use Cases

This capability can recognize 1D codes, 2D codes, and multifunctional codes from an image selected from the gallery and retrieve information such as the code type, value, and position information. It can be used to recognize one or multiple barcodes, such as 1D codes and payment codes, on an image.

Flowchart

A user sends an image-based barcode recognition request to your atomic service.
Your atomic service calls the decode API of Scan Kit to start image-based barcode recognition.
Scan Kit returns the image-based barcode recognition result.
Your atomic service sends the barcode scanning result to the user.

API Description

The APIs use either a callback or promise to return the result. The tables below list the APIs that use a callback, which provide same functions as their counterparts that use a promise. For details about the API, please refer to API Reference.

API	Description
decode(inputImage: InputImage, options?: scanBarcode.ScanOptions): Promise<Array<scanBarcode.ScanResult>>	Starts image-based barcode recognition. This API uses InputImage to pass the image, ScanOptions to set barcode scanning parameters (options is optional) and return the barcode scanning result. This API returns the result asynchronously through a promise.
decode(inputImage: InputImage, options: scanBarcode.ScanOptions, callback: AsyncCallback<Array<scanBarcode.ScanResult>>): void	Starts image-based barcode recognition. This API uses InputImage to pass the image, ScanOptions to set barcode scanning parameters and return the barcode scanning result. This API returns the result asynchronously through a callback.
decode(inputImage: InputImage, callback: AsyncCallback<Array<scanBarcode.ScanResult>>): void	Starts image-based barcode scanning. This API uses InputImage to pass the image and return the barcode scanning result. This API returns the result asynchronously through a callback.

Development Procedure

Image-based barcode recognition can recognize 1D codes, QR codes, and multifunctional codes from images in the gallery and return information such as the code type, value, and position information (coordinates of the upper left and lower right corners of the minimum bounding rectangle of the barcode image).

The following describes how to call the decode API to retrieve barcode image information.

Import the image-based barcode recognition API module and other relevant API modules. This API provides parameters and methods for recognizing barcodes in images.

// Import the log and PhotoViewPicker modules required for image-based barcode scanning.
import { scanCore, scanBarcode, detectBarcode } from '@kit.ScanKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

Call the decode API to parse the barcode image.

Obtain the scanning result using a promise. You are advised to obtain the uri parameter in the InputImage object through the PhotoViewPicker.

@Entry
@Component
struct DetectPage {
  build() {
    Column() {
      Button('Promise with options')
        .backgroundColor('#0D9FFB')
        .fontSize(20)
        .fontColor($r('sys.color.comp_background_list_card'))
        .fontWeight(FontWeight.Normal)
        .align(Alignment.Center)
        .type(ButtonType.Capsule)
        .width('90%')
        .height(40)
        .margin({ top: 5, bottom: 5 })
        .onClick(() => {
          // Define scanning parameters.
          let options: scanBarcode.ScanOptions = {
            scanTypes: [scanCore.ScanType.ALL],
            enableMultiMode: true
          };
          // Use PhotoViewPicker to open the gallery and select an image.
          let photoOption = new photoAccessHelper.PhotoSelectOptions();
          photoOption.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
          photoOption.maxSelectNumber = 1;
          let photoPicker = new photoAccessHelper.PhotoViewPicker();
          photoPicker.select(photoOption).then((data) => {
            // Define the barcode scanning parameter inputImage. The uri parameter indicates the path of the image selected by PhotoViewPicker.
            let inputImage: detectBarcode.InputImage = { uri: data.photoUris[0] };
            try {
              // Call the image recognition API.
              detectBarcode.decode(inputImage, options).then((data: Array<scanBarcode.ScanResult>) => {
                hilog.info(0x0001, '[Scan Sample]',
                  `Succeeded in getting ScanResult by promise with options, result length: ${data.length}`);
              }).catch((err: BusinessError) => {
                hilog.error(0x0001, '[Scan Sample]',
                  `Failed to get ScanResult by promise with options. Code: ${err.code}, message: ${err.message}`);
              });
            } catch (err) {
              hilog.error(0x0001, '[Scan Sample]',
                `Failed to detectBarcode. Code: ${err.code}, message: ${err.message}`);
            }
          }).catch((err: BusinessError) => {
            hilog.error(0x0001, '[Scan Sample]',
              `Failed to select a photo. Code: ${err.code}, message: ${err.message}`);
          });
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

Obtain the scanning result using a callback. You are advised to obtain the uri parameter in the InputImage object through the PhotoViewPicker.

@Entry
@Component
struct DetectPage {
  build() {
    Column() {
      Button('Callback with options')
        .backgroundColor('#0D9FFB')
        .fontSize(20)
        .fontColor($r('sys.color.comp_background_list_card'))
        .fontWeight(FontWeight.Normal)
        .align(Alignment.Center)
        .type(ButtonType.Capsule)
        .width('90%')
        .height(40)
        .margin({ top: 5, bottom: 5 })
        .onClick(() => {
          // Define scanning parameters.
          let options: scanBarcode.ScanOptions = {
            scanTypes: [scanCore.ScanType.ALL],
            enableMultiMode: true,
            enableAlbum: true
          };
          // Use PhotoViewPicker to open the gallery and select an image.
          let photoOption = new photoAccessHelper.PhotoSelectOptions();
          photoOption.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
          photoOption.maxSelectNumber = 1;
          let photoPicker = new photoAccessHelper.PhotoViewPicker();
          photoPicker.select(photoOption).then((data) => {
            // Define the barcode scanning parameter inputImage. The uri parameter indicates the path of the image selected by PhotoViewPicker.
            let inputImage: detectBarcode.InputImage = { uri: data.photoUris[0] };
            try {
              // Call the image recognition API.
              detectBarcode.decode(inputImage, options,
                (err: BusinessError, data: Array<scanBarcode.ScanResult>) => {
                  if (err && err.code) {
                    hilog.error(0x0001, '[Scan Sample]',
                      `Failed to get ScanResult by callback with options. Code: ${err.code}, message: ${err.message}`);
                    return;
                  }
                  hilog.info(0x0001, '[Scan Sample]',
                    `Succeeded in getting ScanResult by callback with options, result length: ${data.length}`);
                });
            } catch (err) {
              hilog.error(0x0001, '[Scan Sample]',
                `Failed to detectBarcode. Code: ${err.code}, message: ${err.message}`);
            }
          }).catch((err: BusinessError) => {
            hilog.error(0x0001, '[Scan Sample]',
              `Failed to select a photo. Code: ${err.code}, message: ${err.message}`);
          });
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

Emulator-based Development