HarmonyOS 如何在A组件创建PixelMap,在B子组件展示图片

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

请参考

import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';
import { BusinessError } from '@ohos.base';
@Entry
@Component
struct Image_PixelMap_Component {
  @State image: PixelMap | undefined = undefined;
  httpRequest() {
    http.createHttp().request(
      "https://photokit.com/features/images/image-text-after.webp",
      (error: BusinessError, data: http.HttpResponse) => {
        if (error) {
          console.error(`WYXX http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
        } else {
          console.error(`WYXX http reqeust success.`);
          let imageData: ArrayBuffer = data.result as ArrayBuffer;
          let imageSource: image.ImageSource = image.createImageSource(imageData);
          console.error(`WYXX http reqeust size = ${imageData.byteLength}`);
          class tmp {
            height: number = 100
            width: number = 100
          }
          let options: Record<string, number | boolean | tmp> = {
            'alphaType': 0, // 透明度
            'editable': false, // 是否可编辑
            'pixelFormat': 3, // 像素格式
          } // 创建图片大小
          imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
            pixelMap.getImageInfo().then((value)=>{
              let imageHeight=value.size.height
              let imageWidth=value.size.width

              pixelMap.crop({ x: 0, y: imageHeight/3, size: { height: 2*imageHeight/3, width: imageWidth } });
              this.image = pixelMap
            })
          })
        }
      }
    )
  }
  build() {
    Column(){
      Button("获取网络图片")
        .onClick(() => {
          this.httpRequest()
        })
      Image(this.image)
        .width('80%')

      if (this.image !== undefined){
        ImageComponent({imagePixelMap: this.image})
      }

    }.backgroundColor('#CCCCCC').width('100%').height('100%')
  }
}

@Component
struct ImageComponent{
  private imagePixelMap: image.PixelMap | undefined = undefined;
  build() {
    Column(){
      Image(this.imagePixelMap)
        .height(200)
        .width(200)
    }
  }
}
分享
微博
QQ
微信
回复
3天前
相关问题
Scroll的组件展示位置如何调整
2522浏览 • 1回复 待解决
循环显示包含图片组件
835浏览 • 1回复 待解决