【HarmonyOS】API9网络buffer图片加载_鸿蒙 image 加载需要鉴权的图片

 【引言】

HarmonyOS中加载网络图片常用的方法是直接给Image组件添加图片的网络地址，申请网络权限ohos.permission.INTERNET后就可以通过url加载对应的图片了，如HarmonyOS官网中的写法：

Image('https://www.example.com/example.JPG')

【问题概述】

但是日常开发中有些图片是存储云服务器中的，下载这些图片需要通过鉴权接口请求，获得的也不是图片的url地址而是二进制的图片buffer数据，类似于AGC中云存储的REST API接口：下载文件-REST API-Server-云存储 | 华为开发者联盟 (huawei.com)，下面是官网Java示例代码：

public static void download(String storageUrl, DownloadObjectParam param) throws Exception {
   URIBuilder uriBuilder = new URIBuilder(storageUrl + param.getBucketName() + "/" + param.getObjectName());
   HttpGet get = new HttpGet(uriBuilder.build());
   get.setHeader("productId", param.getProjectId());
   get.setHeader("client_id", param.getClientId());
   get.setHeader("Authorization", "Bearer " + param.getToken());
   CloseableHttpClient httpClient = HttpClients.createDefault();
   CloseableHttpResponse httpResponse = httpClient.execute(get);
   int statusCode = httpResponse.getStatusLine().getStatusCode();
   if (statusCode == HttpStatus.SC_OK) {
       try (InputStream inputStream = httpResponse.getEntity().getContent();
            FileOutputStream outputStream = new FileOutputStream(getFileName(param.getObjectName()))) {
           // 将响应的实体流写入到本地文件，业务实际应用时，需要将FileOutputStream的入参改成业务指定的目录下
           byte[] buffer = new byte[1024];
           int len;
           while ((len = inputStream.read(buffer)) > 0) {
               outputStream.write(buffer, 0, len);
           }
           outputStream.flush();
       }
   }
   httpResponse.close();
}

上述代码中我们获取图片数据首先需要进行授权验证，验证通过接口会获取文件数据，然后就可以使用流的操作形式将数据保存再本地文件中展示，那么在HarmonyOS中我们该如何操作呢

【具体实现】

一、通过httpRequest构建GET请求，添加鉴权的header头文件，创建request请求

二、将获取data中的result数据创建pixelMap，解码编码PixelMap完成图片buffer的加载。

三、Image组件使用pixel数据完成加载

具体代码如下：

  private async httpRequest() {
   let httpRequest = http.createHttp()
   let url="storageUrl";
   let option={
     method:http.RequestMethod.GET,
     header:{
       "Authorization":"Bearer XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
       "productId":"",
       "client_id":""
     },
   }
   let _res= httpRequest.request(url ,option);  // 请填写一个具体的网络图片地址
   await _res.then((data) => {
         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)
         }
     }
   ).catch((err) => {
     console.log("error code: " + error.code + ", msg: " + error.message)
   });
 }
 
}