HarmonyOS 如何接收后端返回的BufferedImage数据？

Question

后端有个接口返回的是BufferedImage这种图片数据流，要怎么去接收并且显示在image上面？

Answer 1

可以使用ArrayBuffer接收，然后将buffer转为PixelMap再展示。参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5

获取到buffer数据：

import { common } from '@kit.AbilityKit';
import fs from '@ohos.file.fs';
import { BusinessError, request } from '@kit.BasicServicesKit';
import { buffer } from '@kit.ArkTS';
import util from '@ohos.util';
import { fileUri } from '@kit.CoreFileKit';
import { promptAction } from '@kit.ArkUI';
import { http } from '@kit.NetworkKit';

// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;
let filesDir = context.filesDir;

@Entry
@Component
struct Index3 {
  @State message: string = 'Hello World';
  url1: string = "xxx.jpg";
  url2: string = "图片资源地址"

  build() {
    Column() {
      Column() {
        Text(this.url1)
        Button("保存")
          .onClick(() => {
            this.download2(this.url1, "jpg")
          })
      }
      .margin({ top: 15, bottom: 15 })
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }

  download(url: string, type: string) {
    try {
      request.downloadFile(context, {
        url: url,
        filePath: filesDir + '/test.jpg'
      }).then((downloadTask: request.DownloadTask) => {
        downloadTask.on('complete', async () => {
          console.info('download complete');
          let file = fs.openSync(filesDir + '/test.jpg', fs.OpenMode.READ_WRITE);
          let arrayBuffer = new ArrayBuffer(1024);
          let readLen = fs.readSync(file.fd, arrayBuffer);
          let buf = buffer.from(arrayBuffer, 0, readLen);
          console.info(`imageBuffer: ${buf.buffer.toString()}`);
          await fs.close(file);
        })
      }).catch((err: BusinessError) => {
        console.error(`Invoke downloadTask failed, code is ${err.code}, message is ${err.message}`);
      });
    } catch (error) {
      let err: BusinessError = error as BusinessError;
      console.error(`Invoke downloadFile failed, code is ${err.code}, message is ${err.message}`);
    }
  }

  download2(url: string, type: string) {
    httpDownload(url, type).then((result: DownloadResult) => {
      if (result.isSuccess) {
        promptAction.showToast({
          message: "下载成功"
        })
      } else {
        console.error("失败：" + result.msg);
        promptAction.showToast({ message: "下载失败❌，请查看日志" })
      }
    })
  }
}

interface DownloadResult {
  isSuccess: boolean,
  msg: string
}

async function httpDownload(imgUrl: string, imgType: string): Promise<DownloadResult> {
  return new Promise((resolve, reject) => {
    http.createHttp().request(imgUrl, async (error: BusinessError, data: http.HttpResponse) => {
      // 下载失败
      if (error) {
        return resolve({ isSuccess: false, msg: "下载失败" });
      }
      // 数据格式不正确
      if ((data.result instanceof ArrayBuffer) == false) {
        return resolve({ isSuccess: false, msg: "图片保存失败：数据流不支持" });
      }
      // 保存到Cache目录下
      let imageBuffer: ArrayBuffer = data.result as ArrayBuffer;
      console.info(`imageBuffer: ${imageBuffer.toString()}`);
      const newFileName = util.generateRandomUUID() + "." + imgType;
      const newFilePath = getContext().cacheDir + "/" + newFileName;
      const newFileUri = fileUri.getUriFromPath(newFilePath);
      let file: fs.File = await fs.open(newFileUri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
      await fs.write(file.fd, imageBuffer);
      await fs.close(file);
      console.info("文件路径：" + newFileUri);
    });
  })
}