HarmonyOS開發：透過文字生成碼圖

nshen發表於2024-12-09

目錄

  • 前言
  • 碼圖技術概述
  • 關於文字生成碼圖
  • 使用場景
  • 文字生成碼圖的約束與限制
  • 實現文字生成碼圖
  • 自定義碼圖

  • 結束語

    前言

    在當前的軟體開發中，生成二維碼和條形碼（統稱為碼圖）是一個非常常見的需求，尤其是在需要快速分享資訊、資料驗證和支付處理的應用中，再加上掃碼支付和掃碼認證等功能的越來越普及，碼圖的應用越來越多。而且在鴻蒙原生應用開發中，HarmonyOS提供了強大的API支援，使得開發者可以輕鬆實現透過文字生成碼圖的功能。那麼本文就來詳細介紹如何在HarmonyOS應用中實現文字到碼圖的轉換，包括技術選型、實現步驟和程式碼示例。

碼圖技術概述

先來了解一下碼圖技術，它其實包括二維碼和條形碼，是一種將資料編碼為圖形的方式，便於掃描和自動識別。二維碼因其高密度資訊儲存和易於生成的特點，比條形碼更為流行。另外，碼圖生成能力支援將字串轉換為自定義格式的碼圖。

關於文字生成碼圖

在HarmonyOS中，透過文字生成碼圖通常涉及以下步驟：
1.整合碼圖生成庫：選擇一個合適的庫來生成二維碼或條形碼。
2.配置碼圖引數：設定碼圖的型別、文字內容、尺寸等引數。
3.生成碼圖：使用庫提供的API生成碼圖。
4.顯示和使用碼圖：將生成的碼圖顯示在介面上或用於其他用途。

使用場景

由於碼圖生成能力支援將字串轉換為自定義格式的碼圖，包含條形碼、二維碼生成，實際應用中可以將字串轉成聯絡人碼圖，手機克隆碼圖，比如將"HarmonyOS"字串生成碼圖使用。

文字生成碼圖的約束與限制

根據鴻蒙官方的介紹，文字生成碼圖的功能支援十三種碼圖生成，每種碼圖對生成引數有不同的要求，關於碼圖的限制請參照下面的表格內容：
截圖2024-12-09 12.14.31.png
需要說明的是：

  • 碼圖顏色和背景：建議使用預設顏色和背景：黑色碼圖、白色背景。如果碼圖顏色和背景對比度較小會影響識別率。
  • 碼圖邊距：建議使用預設邊距1，單位：px，取值範圍：[1, 10]。

  • 碼圖大小：生成QR Code、Data Matrix、Aztec型別的碼圖時，輸入的width和height值相同且均大於等於200小於等於4096，否則生成的碼圖過小會影響識別；生成EAN-8、EAN-13、UPC-A、UPC-E、Codabar、Code 39、Code 93、Code 128、ITF-14、PDF417型別的碼圖時，建議輸入的width和height值比例為2:1，並且width值需大於400，否則生成的碼圖會過小影響識別。

    實現文字生成碼圖

    關於實現文字生成碼圖的使用，碼圖生成根據傳參內容直接生成所需碼圖，需要傳入固定引數和可選引數，那麼下面分享的示例就是以呼叫碼圖生成能力的createBarcode介面實現碼圖生成，具體操作如下步驟所示。

    步驟1：匯入模組

    首先匯入碼圖生成介面模組，該模組提供了碼圖生成的引數和方法，具體的匯入方法如下所示：

// 匯入碼圖生成需要的圖片模組、錯誤碼模組
import { scanCore, generateBarcode } from '@kit.ScanKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { image } from '@kit.ImageKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

步驟2：呼叫碼圖生成介面

接下來是呼叫碼圖生成能力的createBarcode介面實現碼圖生成，分為兩種呼叫方式：透過Promise方式回撥和透過Callback方式回撥，具體操作步驟如下所示：
1、透過Promise方式回撥，獲取生成的碼圖，具體操作如下所示：

@Entry
@Component
struct Index {
  @State pixelMap: image.PixelMap | undefined = undefined

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('generateBarcode Promise').onClick(() => {
        // 以QR碼為例，碼圖生成引數
        this.pixelMap = undefined;
        let content: string = 'huawei';
        let options: generateBarcode.CreateOptions = {
          scanType: scanCore.ScanType.QR_CODE,
          height: 400,
          width: 400
        }
        try {
          // 碼圖生成介面，成功返回PixelMap格式圖片
          generateBarcode.createBarcode(content, options).then((pixelMap: image.PixelMap) => {
            this.pixelMap = pixelMap;
          }).catch((error: BusinessError) => {
          })
        } catch (error) {
        }

      })
      // 獲取生成碼後顯示
      if (this.pixelMap) {
        Image(this.pixelMap).width(300).height(300).objectFit(ImageFit.Contain)
      }
    }
    .width('100%')
    .height('100%')
  }
}

2、透過Callback方式回撥，獲取生成的碼圖，具體操作如下所示：

@Entry
@Component
struct Index {
  @State pixelMap: image.PixelMap | undefined = undefined

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('generateBarcode Callback').onClick(() => {
        // 以QR碼為例，碼圖生成引數
        let content = 'huawei';
        let options: generateBarcode.CreateOptions = {
          scanType: scanCore.ScanType.QR_CODE,
          height: 400,
          width: 400
        }
        try {
          // 碼圖生成介面，成功返回PixelMap格式圖片
          generateBarcode.createBarcode(content, options, (error: BusinessError, pixelMap: image.PixelMap) => {
            if (error) {
              return;
            }
            this.pixelMap = pixelMap;
          })
        } catch (error) {
        }
      })
      // 獲取生成碼後顯示
      if (this.pixelMap) {
        Image(this.pixelMap).width(300).height(300).objectFit(ImageFit.Contain)
      }
    }
    .width('100%')
    .height('100%')
  }
}

步驟4：特別說明：關於模擬器使用

據悉，目前暫不支援模擬器使用文字生成碼圖的功能，如果呼叫會返回錯誤資訊“Emulator is not supported.”

自定義碼圖

除了上面基本的碼圖生成的功能，我們還可以根據應用的需求自定義碼圖行為，比如下面的操作：

  • 自定義碼圖樣式：改變碼圖的顏色、邊框等樣式。

  • 碼圖尺寸調整：根據需要調整碼圖的尺寸。

    結束語

    透過文字詳細介紹，不難看出生成碼圖是HarmonyOS開發中的一項實用功能，它為應用提供了便捷的資訊分享和資料驗證能力，想必大家都應該瞭解瞭如何在HarmonyOS應用中實現文字到碼圖的轉換，也可以看到鴻蒙原生應用自帶的文字生成碼圖的強大能力。隨著技術的不斷發展，碼圖的生成功能將在HarmonyOS生態中繼續扮演重要的角色，給大家帶來更加豐富和方便的體驗。

相關文章