HarmonyOS鸿蒙Next中如何解决PixelMap加载网络接口返回的图片失败的问题

【问题现象】

先用http.createHttp().request请求一个链接返回图片格式，然后用多媒体像素图PixelMap加载图片，并显示到Image组件上面，但是没有得到预期效果，程序崩溃。

问题现象如下：

【背景知识】

• PixelMap：PixelMap图像像素类，用于读取或写入图像数据以及获取图像信息。
• image.createImageSource：通过缓冲区创建图片源实例。buf数据应为未解码的数据，不能传入类似于RBGA，YUV的像素buffer数据，如果需要通过像素buffer数据创建pixelMap，可以调用image.createPixelMapSync这一类接口。

【定位思路】

1. 检查接口是否请求成功。
2. 检查接口返回数据类型。

问题代码如下：

// 请求网络图片
let OutData: http.HttpResponse
http.createHttp().request("https://xxx",
  async (error: BusinessError, data: http.HttpResponse) => {
    if (error) {
      console.error(`http request failed with. Code: ${error.code}, message: ${error.message}`);
    } else {
      OutData = data
      let code: http.ResponseCode | number = OutData.responseCode
      if (ResponseCode.ResponseCode.OK === code) {
        let imageData: ArrayBuffer = OutData.result as ArrayBuffer;
        let imageSource: image.ImageSource = image.createImageSource(imageData);
        let opts: image.InitializationOptions = {
          editable: false,
          pixelFormat: image.PixelMapFormat.RGBA_8888,
          alphaType: 0,
          size: { height: 100, width: 100 }
        }
        imageSource.createPixelMap(opts).then((pixelMap: PixelMap) => {
          this.imageUrl = pixelMap
        })
      }
    }
  }
)
}
// 加载图片
Image(this.imageUrl).height(100).width(100)

通过调试发现，接口请求成功，返回数据类型为字符串类型，并非图片buffer，使用OutData.result作为buffer转成imageSource后，无法获取pixelMap图片。

【解决方案】

可以先使用文件下载能力将接口返回的图片保存为本地文件，然后使用文件读取并用createPixelMap创建PixelMap对象，再使用Image组件展示，代码示例如下：

downloadFile() {
  let tempPath = getContext(this).filesDir + '/' + new Date().getTime() + '.gif';
  try {
    request.downloadFile(getContext(this), {
      // 通过request.downloadFile方法下载到本地之后展示
      url: "https://xxx",
      header: {  },
      filePath: tempPath
    }).then((downloadTask: request.DownloadTask) => {
      downloadTask.on('complete', async () => {
        console.info('download complete');
        // 方式一：直接使用本地uri展示 -- 可以展示gif动态效果
        this.imageUrl = fileUri.getUriFromPath(tempPath);
        // 方式二：本地文件转为pixelMap展示
        let file = fileIo.openSync(tempPath, fileIo.OpenMode.READ_ONLY);
        let imageSource: image.ImageSource = image.createImageSource(file.fd);
        let opts: image.InitializationOptions = {
          editable: false,
          pixelFormat: image.PixelMapFormat.RGBA_8888,
          alphaType: 0,
          size: { height: 100, width: 100 }
        }
        this.imageUrl1 = await imageSource.createPixelMap(opts);
      })
    }).catch((err: BusinessError) => {
      console.error(`Invoke downloadTask failed, code is ${err.code}, message is ${err.message}`);
    });
  } catch (error) {
    console.error(`Invoke downloadFile failed, error is ${JSON.stringify(error)}`);
  }
}

【总结】

对于请求接口获取网络图片并加载的场景，可先使用文件下载能力将图片保存到本地，再使用PixelMap和Image组件加载。