HarmonyOS鸿蒙Next中如何将图片转为base64后再解码显示

HarmonyOS鸿蒙Next中如何将图片转为base64后再解码显示 【问题描述】：将图片转换成Base64后存入数据库，再从数据库中读取解码后进行图片展示，期望提供从选择图片到转换为Base64编码，再从Base64解码后显示图片的示例。

3 回复

从选择图片到转换为Base64编码可参考以下流程：

    从图库选择图片得到图片数组的uris，结合fileIo和ImageKit将uris转换为ImageSource后，通过createPixelMap接口获取到图片的PixelMap。

    将PixelMap转换为ArrayBuffer后，再通过Base64Helper的encodeToString接口即可转换为Base64编码的字符串。

从Base64编码再转换为图片显示可参考以下流程：

    通过Base64Helper.decodeSync函数将PixelMap转换为ArrayBuffer。

    通过image.createPixelMap还原成图片PixelMap。

PixelMap的对象，可以通过ArkUI的Image组件直接展示。

文档参考链接：https://developer.huawei.com/consumer/cn/doc/architecture-guides/tools-v1_2-ts_218-0000002382129590

更多关于HarmonyOS鸿蒙Next中如何将图片转为base64后再解码显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用@ohos.multimedia.image和@ohos.util.base64模块处理图片转Base64及解码显示。首先通过image.createImageSource获取图片源，使用image.createImagePacker打包为指定格式（如JPEG）。调用packing方法获取ArrayBuffer，再通过util.base64.encodeToString转换为Base64字符串。

解码时，用util.base64.decode将Base64字符串转回ArrayBuffer，通过image.createImageSource从ArrayBuffer创建图片源，最后用<Image>组件加载显示。注意权限和资源管理，确保图片路径或资源正确可用。

在HarmonyOS Next中实现图片与Base64的相互转换，可以通过以下步骤完成：

1. 选择图片并转换为Base64

使用PhotoViewPicker选择图片，并通过ArrayBuffer转换为Base64字符串：

import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';

// 选择图片
let photoPicker = new picker.PhotoViewPicker();
let photoSelectOptions = new picker.PhotoSelectOptions();
photoSelectOptions.maxSelectNumber = 1;
let uris = await photoPicker.select(photoSelectOptions);

// 读取文件并转换为Base64
let file = fs.openSync(uris.photoUris[0], fs.OpenMode.READ_ONLY);
let arrayBuffer = new ArrayBuffer(1024);
let readLen = fs.readSync(file.fd, arrayBuffer);
let base64Str = buffer.from(arrayBuffer.slice(0, readLen)).toString('base64');
fs.closeSync(file);

2. Base64存储与读取

将生成的Base64字符串存储到数据库，读取时直接获取字符串即可。

3. Base64解码显示图片

使用Image组件显示解码后的图片：

// 将Base64字符串转换为Uint8Array
let uint8Array = new Uint8Array(buffer.from(base64Str, 'base64'));

// 使用Image组件显示
Image($r('app.media.placeholder')) // 占位图
  .width(200)
  .height(200)
  .alt('decoded image')
  .onClick(() => {
    // 可通过临时文件或内存方式显示图片
    // 具体实现需根据实际存储方式调整
  })

关键点说明：

  • 使用buffer.from()进行Base64编解码
  • 图片数据通过ArrayBuffer进行中间转换
  • 显示时注意内存管理，大图片建议分块处理

注意：实际存储到数据库时需要考虑Base64字符串长度，建议对较大图片进行压缩处理。

回到顶部