HarmonyOS鸿蒙Next中关于image.PixelMap跨页面流转的问题

HarmonyOS鸿蒙Next中关于image.PixelMap跨页面流转的问题 我在一个页面获取了一个 image.PixelMap 对象（该对象是正常的在当前页面可以正常显示），之后把这个 image.PixelMap 对象通过如下方法封装流转到其它页面:

const _config: Record<string, image.PixelMap> = { 'config': pixelmap }
let storage: LocalStorage = new LocalStorage(_config);

在其它页面获取方式:

@Entry({ routeName: MUDialogContentWindowName, storage: LocalStorage.getShared() })
@Component
struct MUCustomContent {
  @LocalStorageProp('config') config: SignatureConfirmAlertConfig | undefined = undefined

  build(){
    Column(){
      Image(this.testImage)
        .width(200)
        .height(200)
        .backgroundColor(Color.Red)
    }
  }
}

异常的问题是: this.testImage 打印有值但是 Image 未展示图片，排查了不知道为什么。我在当前界面打印 this.testImage 有值，但是图片就是不显示，我在当前界面通过 Image 展示一个在线图片可以展示，不知道为什么 this.testImage 有值却无法展示出来，麻烦看下。


更多关于HarmonyOS鸿蒙Next中关于image.PixelMap跨页面流转的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

在LocalStorage中使用@LocalStorageProp变量装饰器是有限制的，允许装饰的变量类型：Object、class、string、number、boolean、enum类型，以及这些类型的数组。API12及以上支持Map、Set、Date类型。不支持装饰PixelMap类型。详细请参考如下文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-localstorage-V5# 装饰器使用规则说明

建议您将PixelMap类型转变成base64字符串，再进行操作，示例代码如下：

let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };

let imagePackerApi = image.createImagePacker();

imagePackerApi.packing(this.pixelMap, packOpts).then(
  (data : ArrayBuffer) => {

    let base64Str = buffer.from(data).toString('base64')

    this.resultBase64Str="data:image/png;base64,"+base64Str

    console.log('resultBase64Str = ', this.resultBase64Str)

  }).catch(
  (error : BusinessError) => {

    console.error('Failed to pack the image. And the error is: ' + error);

  })

读取的时候Image组件可以直接使用，如 Image(this.resultBase64Str)

更多关于HarmonyOS鸿蒙Next中关于image.PixelMap跨页面流转的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，image.PixelMap跨页面流转主要依赖于Ability间的数据传递机制。PixelMap是鸿蒙系统中用于处理图像数据的对象，支持跨页面传递。通过Ability的Intent参数，可以将PixelMap对象从一个页面传递到另一个页面。传递时，PixelMap会被序列化为Parcelable对象，确保数据在传递过程中保持完整。接收页面通过Intent获取PixelMap对象后，可以直接用于图像渲染或其他处理。需要注意的是，PixelMap对象在传递过程中不会自动释放，开发者需手动管理其生命周期，避免内存泄漏。

在HarmonyOS鸿蒙Next中，image.PixelMap的跨页面流转可以通过Ability间的数据传递实现。具体步骤如下：

  1. 序列化PixelMap：将PixelMap对象转换为ArrayBuffer或base64字符串。
  2. 传递数据：使用Intent或EventBus等机制，将序列化后的数据传输到目标页面。
  3. 反序列化PixelMap：在目标页面接收数据后，将其转换回PixelMap对象。

注意，由于PixelMap是位图数据，序列化后数据量较大，建议优化传输方式或使用共享内存等技术减少性能开销。

回到顶部