devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙应用中图片的显示（Image组件）_鸿蒙image组件加载网络图片

作者：小蓝xlanll | 2024-02-27 04:40:27

赞

踩

鸿蒙image组件加载网络图片

        

目录

1、加载图片资源

1.1、存档图类型数据源

a.本地资源

b.网络资源

c.Resource资源

d.媒体库file://data/storage

e.base64 

1.2、多媒体像素图片

2、显示矢量图

3、添加属性

3.1、设置图片缩放类型

3.2、设置图片重复样式

3.3、设置图片渲染模式 

3.4、设置图片解码尺寸

3.5、添加滤镜效果

3.6、同步加载图片

3.7、事件调用

        开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考Image组件。

        Image通过调用接口来创建，接口调用形式如下：

Image(src: string | Resource | media.PixelMap)

        该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考加载图片资源。

1、加载图片资源

        Image支持加载存档图、多媒体像素图两种类型。

1.1、存档图类型数据源

        存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库资源和base64。

  • a.本地资源

        创建文件夹，将本地图片放入ets文件夹下的任意位置。Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。

  1. Image('images/view.jpg')
  2. .width(200)
  • b.网络资源

        引入网络图片需申请权限ohos.permission.INTERNET，具体申请方式请参考权限申请声明。此时，Image组件的src参数为网络图片的链接。

Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址
  • c.Resource资源

        使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读取到并转换到Resource格式。

        调用方式

Image($r('app.media.girl1'))

         还可以将图片放在rawfile文件夹下。

        调用方式： 

Image($rawfile('snap'))
  • d.媒体库file://data/storage

        支持file://路径前缀的字符串，用于访问通过媒体库提供的图片路径。

  1. 调用接口获取图库的照片url。 
    1. import picker from '@ohos.file.picker';
    2. import http from '@ohos.net.http';
    3. import image from '@ohos.multimedia.image';
    4.  
    5. @Entry
    6. @Component
    7. struct ImageSelectPage {
    8.   @State imgDatas: string[] = [];
    9.  
    10.   @State image: PixelMap = null
    11.   // 获取照片url集
    12.   getAllImg() {
    13.  
    14.     let result = new Array<string>();
    15.     try {
    16.       let PhotoSelectOptions = new picker.PhotoSelectOptions();
    17.       PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    18.       PhotoSelectOptions.maxSelectNumber = 5;
    19.       let photoPicker = new picker.PhotoViewPicker();
    20.       photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
    21.         this.imgDatas = PhotoSelectResult.photoUris;
    22.         console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
    23.       }).catch((err) => {
    24.         console.error(`PhotoViewPicker.select failed with. Code: ${err.code}, message: ${err.message}`);
    25.       });
    26.     } catch (err) {
    27.       console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`);    }
    28.   }
    29.  
    30.   // aboutToAppear中调用上述函数，获取图库的所有图片url，存在imgDatas中
    31.   async aboutToAppear() {
    32.     this.getAllImg();
    33.   }
    34.   // 使用imgDatas的url加载图片。
    35.   build() {
    36.     Column() {
    37.       if (null != this.image) {
    38.         Image(this.image)
    39.       }
    40.  
    41.       Grid() {
    42.         ForEach(this.imgDatas, item => {
    43.           GridItem() {
    44.             Image(item)
    45.               .width(200)
    46.           }
    47.         }, item => JSON.stringify(item))
    48.       }
    49.     }.width('100%').height('100%')
    50.   }
    51. }

            选择照片后返回的数据格式如下：

e.base64 

        路径格式为data:image/[png|jpeg|bmp|webp];base64,[base64 data]，其中[base64 data]为Base64字符串数据。Base64格式字符串可用于存储图片的像素数据，在网页上使用较为广泛。

1.2、多媒体像素图片

        PixelMap是图片解码后的像素图，具体用法请参考图片开发指导。以下示例将加载的网络图片返回的数据解码成PixelMap格式，再显示在Image组件上，代码如下：

  1. import http from '@ohos.net.http';
  2. import image from '@ohos.multimedia.image';
  3.  
  4. @Entry
  5. @Component
  6. struct ShowNetworkImagePage {
  7.   @State image: PixelMap = undefined;
  8.  
  9.   aboutToAppear() {
  10.  
  11.   }
  12.   build() {
  13.     Row() {
  14.       Stack() {
  15.         Column() {
  16.           Image(this.image)
  17.         }
  18.         .width('100%')
  19.         Text('点击加载网络图片').onClick(() => {
  20.           this.httpRequest()
  21.         }).fontSize(32)
  22.       }
  23.     }
  24.     .height('100%').backgroundColor('#8067c8ff')
  25.   }
  26.  
  27.   httpRequest() {
  28.     http.createHttp().request('https://lmg.jj20.com/up/allimg/1112/04051Z03929/1Z405003929-4-1200.jpg',
  29.       (error, data) => {
  30.         if (error) {
  31.           console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
  32.         } else {
  33.           let code = data.responseCode;
  34.           if (http.ResponseCode.OK === data.responseCode) {
  35.             let res: any = data.result
  36.             let imageSource = image.createImageSource(res);
  37.             let options = {
  38.               alphaType: 0,    // 透明度
  39.               editable: false, // 是否可编辑
  40.               pixelFormat: 3,  // 像素格式
  41.               scaleMode: 1,    // 缩略值
  42.               size: { height: 100, width: 100 }
  43.             } // 创建图片大小
  44.             imageSource.createPixelMap(options).then((pixelMap) => {
  45.               this.image = pixelMap
  46.             })
  47.           }
  48.         }
  49.       }
  50.     )
  51.   }
  52. }

2、显示矢量图

        Image组件可显示矢量图（svg格式的图片），支持的svg标签为：svg、rect、circle、ellipse、path、line、polyline、polygon和animate。

        svg格式的图片可以使用fillColor属性改变图片的绘制颜色。

  1. @Entry
  2. @Component
  3. struct SVGImageTestPage {
  4.   @State message: string = 'Hello World'
  5.  
  6.   build() {
  7.     Row() {
  8.       Column() {
  9.         Image($r('app.media.smile_beam'))
  10.           .width(200)
  11.           .height(200)
  12.           .backgroundColor('#8067c8ff')
  13.           .fillColor(Color.Red)
  14.       }
  15.       .width('100%')
  16.     }
  17.     .height('100%')
  18.   }
  19. }

        说明：

此处的fillColor属性没有生效，估计是svg资源的问题！！

3、添加属性

        给Image组件设置属性可以使图片显示更灵活，达到一些自定义的效果。以下是几个常用属性的使用示例，完整属性信息详见Image。 

3.1、设置图片缩放类型

        通过objectFit属性使图片缩放到高度和宽度确定的框内。

  1. @Entry
  2. @Component
  3. struct MyComponent {
  4.   scroller: Scroller = new Scroller()
  5.  
  6.   build() {
  7.     Scroll(this.scroller) {
  8.       Row() {
  9.         Image($r('app.media.img_2')).width(200).height(150)
  10.           .border({ width: 1 })
  11.           .objectFit(ImageFit.Contain).margin(15) // 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
  12.           .overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  13.         Image($r('app.media.ic_img_2')).width(200).height(150)
  14.           .border({ width: 1 })
  15.           .objectFit(ImageFit.Cover).margin(15)
  16.           // 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
  17.           .overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  18.         Image($r('app.media.img_2')).width(200).height(150)
  19.           .border({ width: 1 })
  20.             // 自适应显示。
  21.           .objectFit(ImageFit.Auto).margin(15)
  22.           .overlay('Auto', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  23.       }
  24.       Row() {
  25.         Image($r('app.media.img_2')).width(200).height(150)
  26.           .border({ width: 1 })
  27.           .objectFit(ImageFit.Fill).margin(15)
  28.           // 不保持宽高比进行放大缩小，使得图片充满显示边界。
  29.           .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  30.         Image($r('app.media.img_2')).width(200).height(150)
  31.           .border({ width: 1 })
  32.           // 保持宽高比显示，图片缩小或者保持不变。
  33.           .objectFit(ImageFit.ScaleDown).margin(15)
  34.           .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  35.         Image($r('app.media.img_2')).width(200).height(150)
  36.           .border({ width: 1 })
  37.           // 保持原有尺寸显示。
  38.           .objectFit(ImageFit.None).margin(15)
  39.           .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  40.       }
  41.     }
  42.   }
  43. }

        运行效果如下：

3.2、图片插值

        当原图分辨率较低并且放大显示时，图片会模糊出现锯齿。这时可以使用interpolation属性对图片进行插值，使图片显示得更清晰。

  1. @Entry
  2. @Component
  3. struct ImageInterpolationPage {
  4.   @State message: string = 'Hello World'
  5.  
  6.   build() {
  7.     Column() {
  8.       Row() {
  9.         Image($r('app.media.wrench_simple_20'))
  10.           .width('40%')
  11.           .interpolation(ImageInterpolation.None)
  12.           .borderWidth(1)
  13.           .overlay("Interpolation.None", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  14.           .margin(10)
  15.         Image($r('app.media.wrench_simple_20'))
  16.           .width('40%')
  17.           .interpolation(ImageInterpolation.Low)
  18.           .borderWidth(1)
  19.           .overlay("Interpolation.Low", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  20.           .margin(10)
  21.       }.width('100%')
  22.       .justifyContent(FlexAlign.Center)
  23.  
  24.       Row() {
  25.         Image($r('app.media.wrench_simple_20'))
  26.           .width('40%')
  27.           .interpolation(ImageInterpolation.Medium)
  28.           .borderWidth(1)
  29.           .overlay("Interpolation.Medium", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  30.           .margin(10)
  31.         Image($r('app.media.wrench_simple_20'))
  32.           .width('40%')
  33.           .interpolation(ImageInterpolation.High)
  34.           .borderWidth(1)
  35.           .overlay("Interpolation.High", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  36.           .margin(10)
  37.       }.width('100%')
  38.       .justifyContent(FlexAlign.Center)
  39.     }
  40.     .height('100%')
  41.   }
  42. }

         效果如下：

3.2、设置图片重复样式

        通过objectRepeat属性设置图片的重复样式方式，重复样式请参考ImageRepeat枚举说明。 

  1. @Entry
  2. @Component
  3. struct ImageRepeatTestPage {
  4.   @State message: string = 'Hello World'
  5.  
  6.   build() {
  7.     Column({ space: 10 }) {
  8.       Column({ space: 5 }) {
  9.         Image($r('app.media.wrench_simple_20'))
  10.           .width('60%')
  11.           .height(300)
  12.           .border({ width: 1 })
  13.           .objectRepeat(ImageRepeat.XY)
  14.           .objectFit(ImageFit.ScaleDown)
  15.           .margin({top: 48})
  16.             // 在水平轴和竖直轴上同时重复绘制图片
  17.           .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  18.         Image($r('app.media.wrench_simple_20'))
  19.           .width('60%')
  20.           .height(300)
  21.           .border({ width: 1 })
  22.           .objectRepeat(ImageRepeat.Y)
  23.           .objectFit(ImageFit.ScaleDown)
  24.           .margin({top: 40})
  25.             // 只在竖直轴上重复绘制图片
  26.           .overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  27.         Image($r('app.media.wrench_simple_20'))
  28.           .width('60%')
  29.           .height(300)
  30.           .border({ width: 1 })
  31.           .objectRepeat(ImageRepeat.X)
  32.           .objectFit(ImageFit.ScaleDown)
  33.           .margin({top: 40})
  34.             // 只在水平轴上重复绘制图片
  35.           .overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  36.       }
  37.     }.height(150).width('100%').padding(8)
  38.   }
  39. }

        效果如下：

3.3、设置图片渲染模式 

        通过renderMode属性设置图片的渲染模式为原色或黑白。

  1. @Entry
  2. @Component
  3. struct RenderModePage {
  4.   @State message: string = 'Hello World'
  5.  
  6.   build() {
  7.     Row() {
  8.       Column({ space: 10 }) {
  9.         Row({ space: 50 }) {
  10.           Image($r('app.media.girl9'))// 设置图片的渲染模式为原色
  11.             .renderMode(ImageRenderMode.Original)
  12.             .width(100)
  13.             .height(100)
  14.             .border({ width: 1 })// overlay是通用属性，用于在组件上显示说明文字
  15.             .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  16.           Image($r('app.media.girl9'))// 设置图片的渲染模式为黑白
  17.             .renderMode(ImageRenderMode.Template)
  18.             .width(100)
  19.             .height(100)
  20.             .border({ width: 1 })
  21.             .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  22.         }
  23.       }.height(150).width('100%').padding({ top: 20, right: 10 })
  24.     }
  25.   }
  26. }

        效果如下：

3.4、设置图片解码尺寸

        通过sourceSize属性设置图片解码尺寸，降低图片的分辨率。原图尺寸为1280*960，该示例将图片解码为150*150和400*400。

 

  1. @Entry
  2. @Component
  3. struct ImageSourceSizePage {
  4.   @State message: string = 'Hello World'
  5.   private imagrUrl:string = 'https://10wallpaper.com/wallpaper/1280x960/1605/Asian_fashion_beauty_model_photo_HD_Wallpapers_06_1280x960.jpg'
  6.  
  7.   build() {
  8.     Column() {
  9.       Row({ space: 20 }) {
  10.         Image(this.imagrUrl)
  11.           .sourceSize({
  12.             width: 150,
  13.             height: 150
  14.           })
  15.           .objectFit(ImageFit.ScaleDown)
  16.           .width('25%')
  17.           .aspectRatio(1)
  18.           .border({ width: 1 })
  19.           .overlay('width:150 height:150', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })
  20.         Image(this.imagrUrl)
  21.           .sourceSize({
  22.             width: 400,
  23.             height: 400
  24.           })
  25.           .objectFit(ImageFit.ScaleDown)
  26.           .width('25%')
  27.           .aspectRatio(1)
  28.           .border({ width: 1 })
  29.           .overlay('width:400 height:400', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })
  30.       }
  31.       .height(150)
  32.       .width('100%')
  33.       .padding(20)
  34.       .justifyContent(FlexAlign.Center)
  35.       .backgroundColor("#dfaaaa")
  36.  
  37.     }
  38.   }
  39. }

        效果如下：

3.5、添加滤镜效果

        通过colorFilter修改图片的像素颜色，为图片添加滤镜。 

  1. @Entry
  2. @Component
  3. struct ImageColorFilterPage {
  4.   @State message: string = 'Hello World'
  5.  
  6.   build() {
  7.     Column() {
  8.       Row() {
  9.         Image($r('app.media.girl16'))
  10.           .width('40%')
  11.           .margin(10)
  12.         Image($r('app.media.girl16'))
  13.           .width('40%')
  14.           .colorFilter(
  15.             [1, 1, 0, 0, 0,
  16.               0, 1, 0, 0, 0,
  17.               0, 0, 1, 0, 0,
  18.               0, 0, 0, 1, 0])
  19.           .margin(10)
  20.       }.width('100%')
  21.       .justifyContent(FlexAlign.Center)
  22.     }
  23.   }
  24. }

        效果如下：

3.6、同步加载图片

        一般情况下，图片加载流程会异步进行，以避免阻塞主线程，影响UI交互。但是特定情况下，图片刷新时会出现闪烁，这时可以使用syncLoad属性，使图片同步加载，从而避免出现闪烁。不建议图片加载较长时间时使用，会导致页面无法响应。

  1. Image($r('app.media.icon'))
  2.   .syncLoad(true)
3.7、事件调用

        通过在Image组件上绑定onComplete事件，图片加载成功后可以获取图片的必要信息。如果图片加载失败，也可以通过绑定onError回调来获得结果。

  1. @Entry
  2. @Component
  3. struct ImageLoadEventPage {
  4.   @State widthValue: number = 0
  5.   @State heightValue: number = 0
  6.   @State componentWidth: number = 0
  7.   @State componentHeight: number = 0
  8.  
  9.   build() {
  10.     Column() {
  11.       Row() {
  12.         Image($r('app.media.girl6'))
  13.           .width(200)
  14.           .height(150)
  15.           .margin(15)
  16.           .objectFit(ImageFit.Contain)
  17.           .onComplete((msg: {
  18.             width: number,
  19.             height: number,
  20.             componentWidth: number,
  21.             componentHeight: number
  22.           }) => {
  23.             this.widthValue = msg.width
  24.             this.heightValue = msg.height
  25.             this.componentWidth = msg.componentWidth
  26.             this.componentHeight = msg.componentHeight
  27.           })// 图片获取失败，打印结果
  28.           .onError(() => {
  29.             console.info('load image fail')
  30.           })
  31.           .overlay('\nwidth: ' + String(this.widthValue) + ', height: ' + String(this.heightValue) + '\ncomponentWidth: ' + String(this.componentWidth) + '\ncomponentHeight: ' + String(this.componentHeight), {
  32.             align: Alignment.Bottom,
  33.             offset: { x: 0, y: 60 }
  34.           })
  35.       }
  36.     }.justifyContent(FlexAlign.Center).backgroundColor('#777').width('100%')
  37.   }
  38. }

        效果如下：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/150107
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号