DEV Community

HarmonyOS
HarmonyOS

Posted on

Creating QR Codes with using ScanKit

#harmonyos #qrcodegeneration #scankit #arkui

Read the original article：Creating QR Codes with using ScanKit

Context

You need a paste-ready guide that shows two ways to generate and display QR codes in a HarmonyOS app: (1) creating a PixelMap via @kit.ScanKit and (2) rendering directly with the QRCode UI component. This helps when you either need a savable image (Way 1) or a quick on-screen render (Way 2).

Description

HarmonyOS provides a barcode/QR generation API in ScanKit that can return an image.PixelMap for full control over saving/editing. In addition, ArkUI offers a QRCode component you can place directly in your UI. Use Way 1 for export/sharing workflows; use Way 2 for simple on-screen display.

Solution / Approach

1) Required kits & imports

import { scanCore, generateBarcode } from '@kit.ScanKit';
import { image } from '@kit.ImageKit';
import { BusinessError } from '@kit.BasicServicesKit';
Enter fullscreen mode Exit fullscreen mode

2) Way 1 — Generate a PixelMap with generateBarcode.createBarcode()

// In your component/state:
private pixelMap?: image.PixelMap;

aboutToAppear(): void {
  this.pixelMap = undefined;
  const content: string = 'huawei';

  const options: generateBarcode.CreateOptions = {
    scanType: scanCore.ScanType.QR_CODE,
    height: 300,
    width: 300
  };

  try {
    generateBarcode.createBarcode(content, options)
      .then((pm: image.PixelMap) => {
        this.pixelMap = pm;
      })
      .catch((err: BusinessError) => {
        console.log('Failed to get PixelMap (promise): ' + err.message);
      });
  } catch (err) {
    console.log('Failed to createBarcode (try/catch): ' + (err as BusinessError).message);
  }
}
Enter fullscreen mode Exit fullscreen mode

Display the PixelMap (if available)

if (this.pixelMap) {
  Image(this.pixelMap)
    .width(140)
    .height(140)
    .objectFit(ImageFit.Contain)
    .margin({ bottom: 20 });
}
Enter fullscreen mode Exit fullscreen mode

3) Way 2 — Render directly with the QRCode component

QRCode('huawei')
  .width(140)
  .height(140)
  .margin({ bottom: 30 });
Enter fullscreen mode Exit fullscreen mode

4) Example build() showcasing both

build() {
  Scroll() {
    Column() {
      Text('QR Code Test')
        .fontColor(Color.White)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 });

      // Way 1: PixelMap display
      if (this.pixelMap) {
        Image(this.pixelMap)
          .width(140)
          .height(140)
          .objectFit(ImageFit.Contain)
          .margin({ bottom: 20 });
      }

      // Way 2: Direct QRCode component
      QRCode('huawei')
        .width(140)
        .height(140)
        .margin({ bottom: 30 });
    }
    .justifyContent(FlexAlign.Start)
    .height('200%')
    .width('100%')
    .linearGradient({
      direction: GradientDirection.Bottom,
      colors: [[$r('app.color.base_background_gradient_start'), 0.0],
               [$r('app.color.base_background_gradient_end'), 1.0]]
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

Notes

  • Way 1 (PixelMap) is ideal when you need to save, share, or post-process the QR image.
  • Way 2 (component) is the fastest path for on-screen display without extra image handling.
  • For best results, test on a physical device if the emulator lacks certain capabilities.

Key Takeaways

  • Two paths: PixelMap via ScanKit for file control, or QRCode component for quick UI rendering.
  • Minimal setup: Import ScanKit/ImageKit; no special runtime permission is needed just to generate a QR image.
  • Production tips: Use sufficient size/contrast; generate at higher resolution if you plan to save/print.

Written by Aycanur Ucar

Top comments (0)