OpenHarmony条形码怎么加 logo

在 OpenHarmony 里给条形码（一维码 / 二维码）“加 logo”，本质上和在其他平台一样：先生成条码图像，再把 logo 叠加绘制到图像中心。OpenHarmony 目前主要用 ArkTS + Canvas 来实现。

下面分几种常见情况说明。

一、使用 Canvas 绘制条码并叠加 Logo（推荐）

1. 生成条码（以二维码为例）

可以使用第三方库（如 qrcode 的 ArkTS 移植版）或后端生成。

假设已经拿到条码的 PixelMap / ImageSource。

2. 用 Canvas 绘制条码 + Logo

import image from '@ohos.multimedia.image'
import { canvas } from '@ohos.graphics.canvas'

@Entry
@Component
struct BarcodeWithLogo {
  private canvasContext: CanvasRenderingContext2D | null = null

  build() {
    Column() {
      Canvas(this.canvasContext)
        .width(300)
        .height(300)
        .onReady(async (ctx: CanvasRenderingContext2D) => {
          this.canvasContext = ctx
          await this.drawBarcodeWithLogo()
        })
    }
  }

  async drawBarcodeWithLogo() {
    const ctx = this.canvasContext!
    // 1. 画条码
    const barcodeImage = await this.getBarcodePixelMap()
    ctx.drawImage(barcodeImage, 0, 0, 300, 300)

    // 2. 画 Logo
    const logoImage = await this.getLogoPixelMap()
    const logoSize = 60
    ctx.drawImage(
      logoImage,
      120, // (300-60)/2
      120,
      logoSize,
      logoSize
    )

    // 可选：画白色圆底
    ctx.fillStyle = '#FFFFFF'
    ctx.beginPath()
    ctx.arc(150, 150, 35, 0, Math.PI * 2)
    ctx.fill()
  }

  async getBarcodePixelMap(): Promise<image.PixelMap> {
    // 从资源或接口获取
    return image.createPixelMap(/* ... */)
  }

  async getLogoPixelMap(): Promise<image.PixelMap> {
    return image.createPixelMap(/* ... */)
  }
}

✅ 优点：完全可控，支持任意条码类型
❌ 缺点：需要自己处理图像

二、使用 Image 组件叠加（简单方案）

适合 静态条码图片 + logo

Stack() {
  Image($r('app.media.barcode'))
    .width(300)
    .height(300)

  Image($r('app.media.logo'))
    .width(60)
    .height(60)
}

✅ 最简单
❌ 不支持动态生成条码

三、后端生成（企业常用）

条码 + logo 由服务端生成（Java / Python / Node）：

• Java：ZXing
• Python：qrcode + PIL
• 返回图片 URL 或 Base64

OpenHarmony 只负责展示：

Image('https://xxx.com/barcode.png')

✅ 稳定、跨平台
✅ 不占端上性能

四、注意事项（OpenHarmony 特有）

1. 一维码（Code128 等）不建议加 logo
   • 会破坏可读性
2. 二维码 logo 建议：
   • 尺寸 ≤ 30%
   • 加白底
3. 使用 PixelMap 时注意释放资源
4. API 版本建议：OpenHarmony 3.2+

五、如果你用的是具体条码库

你可以告诉我：

• OpenHarmony 版本
• 用的是 ArkTS / JS / eTS
• 一维码还是二维码
• 是否允许后端生成

我可以给你可直接跑的示例代码。