顯示圖片（Image）

2024-01-25 13:21 更新

開發(fā)者經(jīng)常需要在應(yīng)用中顯示一些圖片，例如：按鈕中的icon、網(wǎng)絡(luò)圖片、本地圖片等。在應(yīng)用中顯示圖片需要使用Image組件實(shí)現(xiàn)，Image支持多種圖片格式，包括png、jpg、bmp、svg和gif，具體用法請(qǐng)參考Image組件。

Image通過調(diào)用接口來(lái)創(chuàng)建，接口調(diào)用形式如下：

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

該接口通過圖片數(shù)據(jù)源獲取圖片，支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。其中，src是圖片的數(shù)據(jù)源，加載方式請(qǐng)參考加載圖片資源。

加載圖片資源

Image支持加載存檔圖、多媒體像素圖兩種類型。

存檔圖類型數(shù)據(jù)源

存檔圖類型的數(shù)據(jù)源可以分為本地資源、網(wǎng)絡(luò)資源、Resource資源、媒體庫(kù)資源和base64。

  • 本地資源

    創(chuàng)建文件夾，將本地圖片放入ets文件夾下的任意位置。

    Image組件引入本地圖片路徑，即可顯示圖片（根目錄為ets文件夾）。

    1. Image('images/view.jpg')
    2. .width(200)
  • 網(wǎng)絡(luò)資源

    引入網(wǎng)絡(luò)圖片需申請(qǐng)權(quán)限ohos.permission.INTERNET，具體申請(qǐng)方式請(qǐng)參考權(quán)限申請(qǐng)聲明。此時(shí)，Image組件的src參數(shù)為網(wǎng)絡(luò)圖片的鏈接。

    1. Image('https://www.example.com/example.JPG') // 實(shí)際使用時(shí)請(qǐng)?zhí)鎿Q為真實(shí)地址
  • Resource資源

    使用資源格式可以跨包/跨模塊引入圖片，resources文件夾下的圖片都可以通過$r資源接口讀取到并轉(zhuǎn)換到Resource格式。

    圖1 resources

    調(diào)用方式：

    1. Image($r('app.media.icon'))

    還可以將圖片放在rawfile文件夾下。

    圖2 rawfile

    調(diào)用方式：

    1. Image($rawfile('snap'))
  • 媒體庫(kù)file://data/storage

    支持file://路徑前綴的字符串，用于訪問通過媒體庫(kù)提供的圖片路徑。

    1. 調(diào)用接口獲取圖庫(kù)的照片url。
      1. import picker from '@ohos.file.picker';
      2. 

      3. @Entry
      4. @Component
      5. struct Index {
      6.   @State imgDatas: string[] = [];
      7.   // 獲取照片url集
      8.   getAllImg() {
      9.     
      10.     let result = new Array<string>();
      11.     try {
      12.       let PhotoSelectOptions = new picker.PhotoSelectOptions();
      13.       PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
      14.       PhotoSelectOptions.maxSelectNumber = 5;
      15.       let photoPicker = new picker.PhotoViewPicker();
      16.       photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
      17.         this.imgDatas = PhotoSelectResult.photoUris;
      18.         console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
      19.       }).catch((err) => {
      20.         console.error(`PhotoViewPicker.select failed with. Code: ${err.code}, message: ${err.message}`);
      21.       });
      22.     } catch (err) {
      23.       console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`);    }
      24.   }
      25. 

      26.   // aboutToAppear中調(diào)用上述函數(shù)，獲取圖庫(kù)的所有圖片url，存在imgDatas中
      27.   async aboutToAppear() {
      28.     this.getAllImg();
      29.   }
      30.   // 使用imgDatas的url加載圖片。
      31.   build() {
      32.     Column() {
      33.       Grid() {
      34.         ForEach(this.imgDatas, item => {
      35.           GridItem() {
      36.             Image(item)
      37.               .width(200)
      38.           }
      39.         }, item => JSON.stringify(item))
      40.       }
      41.     }.width('100%').height('100%')
      42.   }
      43. }
    2. 從媒體庫(kù)獲取的url格式通常如下。
      1. Image('file://media/Photos/5')
      2. .width(200)
  • base64

    路徑格式為data:image/[png|jpeg|bmp|webp];base64,[base64 data]，其中[base64 data]為Base64字符串?dāng)?shù)據(jù)。

    Base64格式字符串可用于存儲(chǔ)圖片的像素?cái)?shù)據(jù)，在網(wǎng)頁(yè)上使用較為廣泛。

多媒體像素圖

PixelMap是圖片解碼后的像素圖，具體用法請(qǐng)參考圖片開發(fā)指導(dǎo)。以下示例將加載的網(wǎng)絡(luò)圖片返回的數(shù)據(jù)解碼成PixelMap格式，再顯示在Image組件上，

  1. 創(chuàng)建PixelMap狀態(tài)變量。
    1. @State image: PixelMap = undefined;
  2. 引用多媒體。

    請(qǐng)求網(wǎng)絡(luò)圖片請(qǐng)求，解碼編碼PixelMap。

    1. 引用網(wǎng)絡(luò)權(quán)限與媒體庫(kù)權(quán)限。
      1. import http from '@ohos.net.http';
      2. import ResponseCode from '@ohos.net.http';
      3. import image from '@ohos.multimedia.image';
    2. 填寫網(wǎng)絡(luò)圖片地址。
      1. http.createHttp().request("https://www.example.com/xxx.png",
      2.   (error, data) => {
      3.     if (error){
      4.       console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
      5.     } else {
      6.     }
      7.   }
      8. )
    3. 將網(wǎng)絡(luò)地址成功返回的數(shù)據(jù)，編碼轉(zhuǎn)碼成pixelMap的圖片格式。
      1. let code = data.responseCode;
      2. if (ResponseCode.ResponseCode.OK === code) {
      3.   let res: any = data.result  
      4.   let imageSource = image.createImageSource(res);
      5.   let options = {
      6.     alphaType: 0,                     // 透明度
      7.     editable: false,                  // 是否可編輯
      8.     pixelFormat: 3,                   // 像素格式
      9.     scaleMode: 1,                     // 縮略值
      10.     size: { height: 100, width: 100}
      11.    }  // 創(chuàng)建圖片大小
      12.     imageSource.createPixelMap(options).then((pixelMap) => {
      13.     this.image = pixelMap
      14.   })
      15. }
    4. 顯示圖片。
      1. Button("獲取網(wǎng)絡(luò)圖片")
      2.   .onClick(() => {
      3.     this.httpRequest()
      4.   })
      5. Image(this.image).height(100).width(100)

顯示矢量圖

Image組件可顯示矢量圖（svg格式的圖片），支持的svg標(biāo)簽為：svg、rect、circle、ellipse、path、line、polyline、polygon和animate。

svg格式的圖片可以使用fillColor屬性改變圖片的繪制顏色。

  1. Image($r('app.media.cloud')).width(50)
  2. .fillColor(Color.Blue)
圖3 原始圖片
圖4 設(shè)置繪制顏色后的svg圖片

添加屬性

給Image組件設(shè)置屬性可以使圖片顯示更靈活，達(dá)到一些自定義的效果。以下是幾個(gè)常用屬性的使用示例，完整屬性信息詳見Image。

設(shè)置圖片縮放類型

通過objectFit屬性使圖片縮放到高度和寬度確定的框內(nèi)。

  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) // 保持寬高比進(jìn)行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)。
  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.           // 保持寬高比進(jìn)行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界。
  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.             // 自適應(yīng)顯示。
  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.           // 不保持寬高比進(jìn)行放大縮小，使得圖片充滿顯示邊界。
  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. }

圖片插值

當(dāng)原圖分辨率較低并且放大顯示時(shí)，圖片會(huì)模糊出現(xiàn)鋸齒。這時(shí)可以使用interpolation屬性對(duì)圖片進(jìn)行插值，使圖片顯示得更清晰。

  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Column() {
  6.       Row() {
  7.         Image($r('app.media.grass'))
  8.           .width('40%')
  9.           .interpolation(ImageInterpolation.None)
  10.           .borderWidth(1)
  11.           .overlay("Interpolation.None", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  12.           .margin(10)
  13.         Image($r('app.media.grass'))
  14.           .width('40%')
  15.           .interpolation(ImageInterpolation.Low)
  16.           .borderWidth(1)
  17.           .overlay("Interpolation.Low", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  18.           .margin(10)
  19.       }.width('100%')
  20.       .justifyContent(FlexAlign.Center)
  21. 

  22.       Row() {
  23.         Image($r('app.media.grass'))
  24.           .width('40%')
  25.           .interpolation(ImageInterpolation.Medium)
  26.           .borderWidth(1)
  27.           .overlay("Interpolation.Medium", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  28.           .margin(10)
  29.         Image($r('app.media.grass'))
  30.           .width('40%')
  31.           .interpolation(ImageInterpolation.High)
  32.           .borderWidth(1)
  33.           .overlay("Interpolation.High", { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  34.           .margin(10)
  35.       }.width('100%')
  36.       .justifyContent(FlexAlign.Center)
  37.     }
  38.     .height('100%')
  39.   }
  40. }

設(shè)置圖片重復(fù)樣式

通過objectRepeat屬性設(shè)置圖片的重復(fù)樣式方式，重復(fù)樣式請(qǐng)參考ImageRepeat枚舉說明。

  1. @Entry
  2. @Component
  3. struct MyComponent {
  4.   build() {
  5.     Column({ space: 10 }) {
  6.       Row({ space: 5 }) {
  7.         Image($r('app.media.ic_public_favor_filled_1'))
  8.           .width(110)
  9.           .height(115)
  10.           .border({ width: 1 })
  11.           .objectRepeat(ImageRepeat.XY)
  12.           .objectFit(ImageFit.ScaleDown)
  13.           // 在水平軸和豎直軸上同時(shí)重復(fù)繪制圖片
  14.           .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  15.         Image($r('app.media.ic_public_favor_filled_1'))
  16.           .width(110)
  17.           .height(115)
  18.           .border({ width: 1 })
  19.           .objectRepeat(ImageRepeat.Y)
  20.           .objectFit(ImageFit.ScaleDown)
  21.           // 只在豎直軸上重復(fù)繪制圖片
  22.           .overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  23.         Image($r('app.media.ic_public_favor_filled_1'))
  24.           .width(110)
  25.           .height(115)
  26.           .border({ width: 1 })
  27.           .objectRepeat(ImageRepeat.X)
  28.           .objectFit(ImageFit.ScaleDown)
  29.           // 只在水平軸上重復(fù)繪制圖片
  30.           .overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  31.       }
  32.     }.height(150).width('100%').padding(8)
  33.   }
  34. }

設(shè)置圖片渲染模式

通過renderMode屬性設(shè)置圖片的渲染模式為原色或黑白。

  1. @Entry
  2. @Component
  3. struct MyComponent {
  4.   build() {
  5.     Column({ space: 10 }) {
  6.       Row({ space: 50 }) {
  7.         Image($r('app.media.example'))
  8.           // 設(shè)置圖片的渲染模式為原色 
  9.           .renderMode(ImageRenderMode.Original)
  10.           .width(100)
  11.           .height(100)
  12.           .border({ width: 1 })
  13.             // overlay是通用屬性，用于在組件上顯示說明文字
  14.           .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
  15.         Image($r('app.media.example'))
  16.           // 設(shè)置圖片的渲染模式為黑白
  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. }

設(shè)置圖片解碼尺寸

通過sourceSize屬性設(shè)置圖片解碼尺寸，降低圖片的分辨率。

原圖尺寸為1280*960，該示例將圖片解碼為150*150和400*400。

  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Column() {
  6.       Row({ space: 20 }) {
  7.         Image($r('app.media.example'))
  8.           .sourceSize({
  9.             width: 150,
  10.             height: 150
  11.           })
  12.           .objectFit(ImageFit.ScaleDown)
  13.           .width('25%')
  14.           .aspectRatio(1)
  15.           .border({ width: 1 })
  16.           .overlay('width:150 height:150', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })
  17.         Image($r('app.media.example'))
  18.           .sourceSize({
  19.             width: 400,
  20.             height: 400
  21.           })
  22.           .objectFit(ImageFit.ScaleDown)
  23.           .width('25%')
  24.           .aspectRatio(1)
  25.           .border({ width: 1 })
  26.           .overlay('width:400 height:400', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })
  27.       }.height(150).width('100%').padding(20)
  28. 

  29.     }
  30.   }
  31. }

為圖片添加濾鏡效果

通過colorFilter修改圖片的像素顏色，為圖片添加濾鏡。

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

同步加載圖片

一般情況下，圖片加載流程會(huì)異步進(jìn)行，以避免阻塞主線程，影響UI交互。但是特定情況下，圖片刷新時(shí)會(huì)出現(xiàn)閃爍，這時(shí)可以使用syncLoad屬性，使圖片同步加載，從而避免出現(xiàn)閃爍。不建議圖片加載較長(zhǎng)時(shí)間時(shí)使用，會(huì)導(dǎo)致頁(yè)面無(wú)法響應(yīng)。

  1. Image($r('app.media.icon'))
  2.   .syncLoad(true)

事件調(diào)用

通過在Image組件上綁定onComplete事件，圖片加載成功后可以獲取圖片的必要信息。如果圖片加載失敗，也可以通過綁定onError回調(diào)來(lái)獲得結(jié)果。

  1. @Entry
  2. @Component
  3. struct MyComponent {
  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.ic_img_2'))
  13.           .width(200)
  14.           .height(150)
  15.           .margin(15)
  16.           .onComplete(msg => {
  17.             if(msg){
  18.               this.widthValue = msg.width
  19.               this.heightValue = msg.height
  20.               this.componentWidth = msg.componentWidth
  21.               this.componentHeight = msg.componentHeight
  22.             }
  23.           })
  24.             // 圖片獲取失敗，打印結(jié)果
  25.           .onError(() => {
  26.             console.info('load image fail')
  27.           })
  28.           .overlay('\nwidth: ' + String(this.widthValue) + ', height: ' + String(this.heightValue) + '\ncomponentWidth: ' + String(this.componentWidth) + '\ncomponentHeight: ' + String(this.componentHeight), {
  29.             align: Alignment.Bottom,
  30.             offset: { x: 0, y: 60 }
  31.           })
  32.       }
  33.     }
  34.   }
  35. }

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)