如何将网络图片返回的数据解码成PixelMap格式，再显示在Image组件

徐建国

发布于 2023-08-10 09:29:39

4580

发布于 2023-08-10 09:29:39

文章被收录于专栏：个人路线

PixelMap是图片解码后的像素图，以下示例将加载的网络图片返回的数据解码成PixelMap格式，再显示在Image组件上，

1.创建PixelMap状态变量。

@State image: PixelMap = undefined;

2.引用多媒体。请求网络图片请求，解码编码PixelMap。

2.1引用网络权限与媒体库权限。

import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';

2.2填写网络图片地址。

http.createHttp().request("https://www.example.com/xxx.png",
  (error, data) => {
    if (error){
      console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
    } else {
    }
  }
)

2.3将网络地址成功返回的数据，编码转码成pixelMap的图片格式。

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
})

2.4显示图片。

Button("获取网络图片")
  .onClick(() => {
    this.httpRequest()
  })
Image(this.image).height(100).width(100)

import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';

@Entry
@Component
struct NetworkImagePage {
  @State message: string = 'Hello World'
  @State image: PixelMap = undefined;
  httpRequest() {
    http.createHttp().request("https://luckly007.oss-cn-beijing.aliyuncs.com/macimages/image-20221221183413012.png",
      (error, data) => {
        let code = data.responseCode;
        if (error) {
          console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
        } else {

          if (ResponseCode.ResponseCode.OK === code) {

            // @ts-ignore
            let imageSource = image.createImageSource(data.result);
            let options = {
              alphaType: 0, // 透明度
              editable: true, // 是否可编辑
              pixelFormat: 3, // 像素格式
              scaleMode: 1, // 缩略值
              size: { height: 100, width: 100 }
            } // 创建图片大小
            imageSource.createPixelMap(options).then((pixelMap) => {
              this.image = pixelMap
            })
          }
        }
      }
    )
  }

  build() {


    Row() {
      Column() {
        Button("获取网络图片")
          .onClick(() => {
            this.httpRequest()
          })
        Image(this.image).height(100).width(100)
      }
      .width('100%')
    }
    .height('100%')
  }
}

完毕。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-06-06，如有侵权请联系 cloudcommunity@tencent.com 删除

image