鸿蒙Next如何生成带图标的二维码并下载到手机

在鸿蒙Next系统中，如何生成一个带有自定义图标的二维码？生成后能否直接保存到手机相册或指定文件夹？需要调用哪些API或工具？求具体实现步骤和代码示例。

2 回复

鸿蒙Next生成带图标的二维码？简单！用QRCode库生成二维码，再用PixelMap把图标画上去。最后调用FileManager保存到手机相册。代码一写，图标一贴，搞定！记得申请存储权限哦～

更多关于鸿蒙Next如何生成带图标的二维码并下载到手机的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，生成带图标的二维码并下载到手机，可以通过@ohos.zbar（二维码生成库）和文件系统API实现。以下是步骤和示例代码：

步骤：

  1. 导入模块：使用@ohos.zbar生成二维码，@ohos.file.fs处理文件。
  2. 生成二维码：调用zbar.createQRCode生成二维码图片（返回PixelMap）。
  3. 添加图标：通过图像处理API（如@ohos.image）将图标叠加到二维码中心。
  4. 保存到手机：将处理后的图片保存到设备目录（如相册）。
  5. 用户授权：确保应用有存储权限（需在module.json5中声明）。

示例代码：

import { zbar } from '@ohos.zbar';
import { BusinessError } from '@ohos.base';
import image from '@ohos.image';
import fs from '@ohos.file.fs';
import photoAccessHelper from '@ohos.file.photoAccessHelper';

// 生成带图标的二维码并保存
async function generateQRCodeWithIcon(text: string, iconPath: string) {
  try {
    // 1. 生成二维码（返回PixelMap）
    let qrCodePixelMap: image.PixelMap = await zbar.createQRCode(text, {
      width: 300,
      height: 300
    });

    // 2. 加载图标（假设图标在应用资源中）
    let iconPixelMap: image.PixelMap = await image.createImageSource(iconPath).createPixelMap();

    // 3. 创建画布，绘制二维码和图标
    let imageInfo: image.ImageInfo = {
      size: { height: 300, width: 300 }
    };
    let imagePacker = image.createImagePacker();
    let canvas = await image.createCanvas(imageInfo);
    let ctx = canvas.getContext('2d') as image.CanvasRenderingContext2D;

    // 绘制二维码
    ctx.drawImage(qrCodePixelMap, 0, 0, 300, 300);

    // 计算图标位置（居中，大小为例）
    let iconSize = 60;
    let x = (300 - iconSize) / 2;
    let y = (300 - iconSize) / 2;
    ctx.drawImage(iconPixelMap, x, y, iconSize, iconSize);

    // 4. 导出为PixelMap
    let finalPixelMap: image.PixelMap = await canvas.transferToImageBitmap();

    // 5. 保存到相册
    let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(getContext(this));
    let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'qr_code.png');
    let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    let packOpts: image.PackingOption = { format: 'image/png', quality: 100 };
    let arrayBuffer = await imagePacker.packing(finalPixelMap, packOpts);
    await fs.write(file.fd, arrayBuffer);
    await fs.close(file.fd);

    console.log('二维码已保存到相册');
  } catch (error) {
    console.error('生成失败:', (error as BusinessError).message);
  }
}

// 调用示例
generateQRCodeWithIcon('https://example.com', 'resources/base/media/icon.png');

注意事项：

  • 权限声明：在module.json5中添加以下权限：
    {
  "requestPermissions": [
    {
      "name": "ohos.permission.READ_IMAGEVIDEO",
      "reason": "保存二维码到相册"
    },
    {
      "name": "ohos.permission.WRITE_IMAGEVIDEO",
      "reason": "保存二维码到相册"
    }
  ]
}
  • 图标路径：确保图标路径正确（如资源目录resources/base/media/）。
  • 测试：在真机或模拟器上运行，授权存储权限。

此代码生成一个300x300的二维码，将60x60的图标居中叠加，并保存为PNG到手机相册。根据实际需求调整尺寸和路径。

回到顶部