HarmonyOS 鸿蒙Next ArKTS中HttpResponse.result类型如何为ArrayBuffer，默认为string

我也在研究这个问题，你试试直接用data.result作为ArrayBuffer。但根据JS相关的资料，说的是ArrayBuffer是不能被操作和访问的，比如foreach遍历的，又要用DataView封装一遍。但其实我只是想参考官方给的网络图片加载而已。

官方代码如下：

// 先创建一个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作为字符串，是可以看到和图上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//                
                pixelMap.getImageInfo().then((data) => {//                  
                  console.info("data.size.width=" + data.size.width)//                  
                  console.info("data.size.height=" + data.size.height)//                  
                  data.size.height//                
                })              
              }).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作为ArrayBuffer这种形式，发现会提示错误。
2. 于是手动确定图片大小后，按照上述图片处理API所述，根据图片分辨率1125x720x4创建了ArrayBuffer；
3. createPixelMap第二个参数options中的 size: { height: 750, width: 1125 }
4. 使用writeBufferToPixels方法将传入的data.result作为ArrayBuffer写入pixelMap中。

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

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