HarmonyOS 鸿蒙Next ArkUI中加载网络图片的问题

HarmonyOS 鸿蒙Next ArkUI中加载网络图片的问题

参考这位老兄的提问，我也遇到的相同的问题。

根据官方提供Image组件加载网络图片的代码：

// 先创建一个PixelMap状态变量用于接收网络图片  
@State image: PixelMap = undefined  
build() {  
  Column({space: 10}) {  
    Button("获取网络图片")  
      .onClick(() => {  
        this.httpRequest();  
      })  
    Image(this.image).height(100).width(100)  
  }  
  .width('100%')  
  .height('100%')  
  .padding(10)  
}  
// 网络图片请求方法  
private httpRequest() {  
  let httpRequest = http.createHttp();      
  httpRequest.request(  
    "https://www.example.com/xxx.png",   // 请填写一个具体的网络图片地址  
    (error, data) => {  
      if(error) {  
        console.log("error code: " + error.code + ", msg: " + error.message)  
      } else {  
        let code = data.responseCode          
        if(ResponseCode.ResponseCode.OK == code) {  
          let imageSource = image.createImageSource(data.result)  
          let options = {alphaType: 0,                     
                         editable: false,                  
                         pixelFormat: 3,                   
                         scaleMode: 1,                     
                         size: {height: 100, width: 100}}  
          imageSource.createPixelMap(options).then((pixelMap) => {  
            this.image = pixelMap  
          })  
        } else {  
          console.log("response code: " + code);  
        }  
      }  
    }  
  )  
}

发现但这段代码有个问题：

let imageSource = image.createImageSource(data.result)

使用API8，这个createImageSource方法的提示是要传入一个url:string，但其实http直接访问图片网址，请求到的data.result是这样的

如果直接在控制台打印data.result as string，是可以看到和图上TEXT相同的乱码文本的。但这个文本显然是Image组件无法直接使用的

因此我又查看了giee上官方提供的图片处理相关API

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-image.md#imagecreatepixelmap8

按照我的理解，核心逻辑是要构建一个 pixelMap，Image组件直接绑定该 pixelMap，然后把请求到的图像数据写入 pixelMap 中。

写了一段，还是没跑通，代码如下：

这张网络图片的一些属性如下：

图片大小66.5 KB

网络请求返回的Content-Length=68107

分辨率 1125x750

struct Index {  
  // 先创建一个PixelMap状态变量用于接收网络图片  
  @State imageMy: PixelMap = undefined  
  build() {  
    Column({ space: 10 }) {  
      Button("获取网络图片")  
        .onClick(() => {  
          this.httpRequest();  
        })  
      Image(this.image)  
        .height(100)  
        .width(100)  
        .alt($r('app.media.ic_launcher'))  
        .objectFit(ImageFit.Contain)  
    }  
    .width('100%')  
    .height('100%')  
    .padding(10)  
  }  
  // 网络图片请求方法  
  private httpRequest() {  
    let httpRequest = http.createHttp();  
    httpRequest.request(  
      "https://images.pexels.com/photos/7858743/pexels-photo-7858743.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", // 请填写一个具体的网络图片地址  
      {  
        method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET  
        // 开发者根据自身业务需要添加header字段  
        header: {},  
        connectTimeout: 60000, // 可选，默认为60s  
        readTimeout: 60000, // 可选，默认为60s  
      },  
      (error, data) => {  
        if (error) {  
          console.log("error code: " + error.code + ", msg: " + error.message)  
        } else {  
          // data.header为http响应头，可根据业务需要进行解析  
          console.info('header:' + JSON.stringify(data.header));  
          let code = data.responseCode          
          if (ResponseCode.ResponseCode.OK == code) {  
            console.info("ResponseCode.ResponseCode.OK=" + ResponseCode.ResponseCode.OK)  
            console.info("code=" + ResponseCode.ResponseCode.OK)  
            let resultArrayBuffer = data.result as ArrayBuffer  
            let resultArrayBufferLength = new ArrayBuffer(3375000)  
            console.info("resultArrayBuffer=" + resultArrayBuffer.length)  
            let options = {  
              alphaType: 0, // 透明度  
              editable: true, // 是否可编辑  
              pixelFormat: 2, // 像素格式  
              scaleMode: 1, // 缩略值  
              size: { height: 750, width: 1125 }  
            } // 创建图片大小  
            image.createPixelMap(resultArrayBufferLength, options).then((pixelMap) => {  
              pixelMap.writeBufferToPixels(resultArrayBuffer).then(() => {  
                console.log("Succeeded in writing data from a buffer to a PixelMap.");  
                this.imageMy=pixelMap  
              }).catch((err) => {  
                console.error("Failed to write data from a buffer to a PixelMap."+err);  
              })  
            })  
          } else {  
            console.log("response code: " + code);  
          }  
        }  
      }  
    )  
  }

关键点有几个：

1. createPixelMap函数第一个参数需要接收一个ArrayBuffer，最开始我以为这个地方可以直接传入data.result as ArrayBuffer这种形式，发现会提示错误。
2. 于是手动确定图片大小后，按照 上述图片处理API 所述，根据图片分辨率1125x720x4创建了ArrayBuffer；
3. createPixelMap第二个参数options中的 size: { height: 750, width: 1125 }
4. 使用writeBufferToPixels方法将传入的data.result as ArrayBuffer写入pixelMap中。

一切看起来好像没问题，看日志似乎createPixelMap也成功了，但一个报错又给我整不会了。

Failed to write data from a buffer to a PixelMap.Error: Failed to napi_get_arraybuffer_info!