基础ArkTS组件：图片（HarmonyOS学习第三课【3.2】）

最新推荐文章于 2024-06-11 16:59:08 发布
最新推荐文章于 2024-06-11 16:59:08 发布
阅读量1.5k 收藏 28
点赞数 31
分类专栏： HarmonyOS 文章标签： 学习 华为 harmonyos typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58213084/article/details/138518600
版权

图片组件

Image为图片组件，常用于在应用中显示图片。Image支持加载string、PixelMap和Resource类型的数据源，支持png、jpg、bmp、svg和gif类型的图片格式。

需要权限

使用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考权限申请声明。

子组件

无

接口

Image(src: string | PixelMap | Resource)

通过图片数据源获取图片，用于后续渲染展示。

Image组件加载图片失败或图片尺寸为0时，图片组件大小自动为0，不跟随父组件的布局约束。

从API version 9开始，该接口支持在ArkTS卡片中使用。

Image定义介绍

interface ImageInterface {
  (src: string | PixelMap | Resource): ImageAttribute;
}

  • src：设置要加载的图片资源，支持从本地、网络和内存中加载图片，简单样例如下：

     Flex() {
          Image($r("app.media.fanhui"))
            .width('30')
            .margin({ top: 10 });
        }.width("100%")

        Flex() {
          Image($r("app.media.xiaoxi"))
            .width('120')
            .margin({ top: 10 });
        }.offset({ x: "120vp" })

                  

Image属性介绍：

declare class ImageAttribute extends CommonMethod<ImageAttribute> {
  alt(value: string | Resource): ImageAttribute;
  matchTextDirection(value: boolean): ImageAttribute;
  fitOriginalSize(value: boolean): ImageAttribute;
  fillColor(value: ResourceColor): ImageAttribute;
  objectFit(value: ImageFit): ImageAttribute;
  objectRepeat(value: ImageRepeat): ImageAttribute;
  autoResize(value: boolean): ImageAttribute;
  renderMode(value: ImageRenderMode): ImageAttribute;
  interpolation(value: ImageInterpolation): ImageAttribute;
  sourceSize(value: { width: number; height: number }): ImageAttribute;
  syncLoad(value: boolean): ImageAttribute;
  onComplete(
    callback: (event?: {
      width: number;
      height: number;
      componentWidth: number;
      componentHeight: number;
      loadingStatus: number;
    }) => void,
  ): ImageAttribute;
  onError(callback: (event?: { componentWidth: number; componentHeight: number }) => void): ImageAttribute;
  onFinish(event: () => void): ImageAttribute;
}

  • alt：设置占位图，图片显示之前先显示占位图，比如在加载网络图片或者图片加载失败时的场景。

  • objectFit：设置图片的放缩类型，当 Image 组件大小和图片大小不同时指定图片的放缩类型， ImageFit 提供了以下5种匹配模式：

    • Cover（默认值）：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界外。

    • Contain：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界内。

    • Fill：不保持图片宽高比显示，是图片完全充满显示边界。

    • None：保持图片原有尺寸显示，通常配合 objectRepeat 属性一起使用。

    • ScaleDown：保持图片宽高比显示，使图片缩小或者保持不变的显示出来。

以上6中匹配模式运行结果如下图所示：

                                     

renderMode：设置图片的渲染模式， ImageRenderMode 定义了以下2种渲染模式：

  • Original（默认值）：按照原图进行渲染。

  • Template：将图像渲染为模板图像，忽略图片的颜色信息。

代码：

          Image($r("app.media.xiaoxi"))
            .width(90)
            .height(90)
            .renderMode(ImageRenderMode.Original) // 原图渲染

          Image($r("app.media.xiaoxi"))
            .width(90)
            .height(90)
            .renderMode(ImageRenderMode.Template) // 模板渲染

                  

sourceSize：对原始图片做部分解码，样例如下：

Image($r("app.media.xiaoxi"))
  .width(90)
  .height(90)

Image($r("app.media.xiaoxi"))
  .width(90)
  .height(90)
  .sourceSize({width: 10, height: 10}) // 设置解码的宽高

                     

Image事件介绍

declare class ImageAttribute extends CommonMethod<ImageAttribute> {
  onComplete(
    callback: (event?: {
      width: number;
      height: number;
      componentWidth: number;
      componentHeight: number;
      loadingStatus: number;
    }) => void,
  ): ImageAttribute;
  onError(callback: (event?: { componentWidth: number; componentHeight: number }) => void): ImageAttribute;
  onFinish(event: () => void): ImageAttribute;
}
  • onComplete：图片成功加载时触发该回调，返回图片原始尺寸信息。
  • onError：图片加载出现异常时触发该回调。
  • onFinish：当加载的源文件为带动效的 svg 图片时，当 svg 动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

Image加载方式

  • 从本地加载

    • 拷贝 test.png 图片到工程的 resources/main/base/media 目录下

    • 加载图片，直接使用系统提供的资源访问符 $() 或者本地文件加载

      import image from '@ohos.multimedia.image';
import file from '@ohos.fileio';

@Entry @Component struct ComponentTest {

  @State pixelMap: PixelMap = undefined;

  build() {
    Column() {
      if (undefined == this.pixelMap) {
        Image($r("app.media.test"))
        	.width(180)
				  .height(80)
      } else {
        Image(this.pixelMap)
        	.width(180)
				  .height(80)
      }
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height(('100%'))
    .padding(10)
  }

  private aboutToAppear() {
    var fd = file.openSync("/data/imgs/test.png");
    image.createImageSource(fd).createPixelMap({
      sampleSize: 1,
      rotate: 0,
      editable: false
    }).then((pixelMap) => {
      this.pixelMap = pixelMap;
    })
  }
}

  • 从网络加载

    Image('https://img.sample.com/imgs/test.png')
  .width(180)
  .height(80)

  • 从内存加载

    Image(this.pixelMap) // pixelMap为内存图片
  .width(180)
  .height(80)

Image缓存设置

Image 组件没有提供图片缓存相关的 api ，ArkUI开发框架在 @system.app 模块内提供了图片的全局缓存策略，全局缓存策略使用了 LRU 算法：

  • setImageCacheCount：设置内存中缓存解码后图片的数量上限，单位为 number。

  • setImageRawDataCacheSize：设置内存中缓存解码前图片数据的大小上限，单位为字节。

  • setImageFileCacheSize：设置图片文件缓存的大小上限，单位为字节。

    在APP启动的时候，设置全局缓存策略，用法如下：

    import app from '@system.app';

export default {
  onCreate() {
    console.info('Application onCreate')
    app.setImageRawDataCacheSize(100 * 1024 * 1024) // 设置解码前图片数据内存缓存上限为100MB
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}

官方示例

加载基本类型图片

@Entry
@Component
struct ImageExample1 {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
        Row() {
          // 加载png格式图片
          Image($r('app.media.ic_camera_master_ai_leaf'))
            .width(110).height(110).margin(15)
            .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          // 加载gif格式图片
          Image($r('app.media.loading'))
            .width(110).height(110).margin(15)
            .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
        Row() {
          // 加载svg格式图片
          Image($r('app.media.ic_camera_master_ai_clouded'))
            .width(110).height(110).margin(15)
            .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
          // 加载jpg格式图片
          Image($r('app.media.ic_public_favor_filled'))
            .width(110).height(110).margin(15)
            .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
        }
      }
    }.height(320).width(360).padding({ right: 10, top: 10 })
  }
}

                              

加载网络图片

加载网络图片时，默认网络超时是5分钟，建议使用alt配置加载时的占位图。如果需要更灵活的网络配置，可以使用SDKHTTP工具包发送网络请求，接着将返回的数据解码为Image组件中的PixelMap

使用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考权限申请声明。

@Entry
@Component
struct ImageExample2 {
  build() {
    Column({ space: 10 }) {
      Image("https://www.example.com/xxx.png")// 直接加载网络地址，请填写一个具体的网络图片地址
        .alt($r('app.media.icon'))// 使用alt，在网络图片加载成功前使用占位图
        .width(100)
        .height(100)
    }
  }
}

为图片添加事件 

@Entry
@Component
struct ImageExample3 {
  @State widthValue: number = 0;
  @State heightValue: number = 0;
  private on: Resource = $r('app.media.image_on');
  private off: Resource = $r('app.media.image_off');
  private on2off: Resource = $r('app.media.image_on2off');
  private off2on: Resource = $r('app.media.image_off2on');
  @State src: Resource = this.on;

  build() {
    Column() {
      Row({ space: 20 }) {
        Column() {
          Image($r('app.media.img_example1'))
            .alt($r('app.media.ic_public_picture'))
            .sourceSize({
              width: 900,
              height: 900
            })
            .objectFit(ImageFit.Cover)
            .height(180).width(180)
            // 图片加载完成后，获取图片尺寸。
            .onComplete((msg: { width: number,height: number }) => {
              this.widthValue = msg.width
              this.heightValue = msg.height
            })
            .onError(() => {
              console.log('load image fail')
            })
            .overlay('\nwidth: ' + String(this.widthValue) + ' height: ' + String(this.heightValue), {
              align: Alignment.Bottom,
              offset: { x: 0, y: 20 }
            })
        }
        // 为图片添加点击事件，点击完成后加载特定图片
        Image(this.src)
          .width(120).height(120)
          .onClick(() => {
            if (this.src == this.on || this.src == this.off2on) {
              this.src = this.on2off
            } else {
              this.src = this.off2on
            }
          })
          .onFinish(() => {
            if (this.src == this.off2on) {
              this.src = this.on
            } else {
              this.src = this.off
            }
          })
      }
    }.width('100%')
  }
}

                        

 

拓展：

ImageKnife

专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。

简介

本项目基于开源库 Glide 进行OpenHarmony的自研版本：

  • 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
  • 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。
  • 支持进行图片变换: 支持图像像素源图片变换效果。
  • 支持用户配置参数使用:( 例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
  • 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。
  • 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。

下载安装

ohpm install @ohos/imageknife

使用说明

1.依赖配置

在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例：

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import { ImageKnife } from '@ohos/imageknife'

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index', (err, data) => {
    });
    // 初始化全局ImageKnife 
    ImageKnife.with(this.context);
  	// 后续访问ImageKnife请通过:ImageKnifeGlobal.getInstance().getImageKnife()方式
  }
}
2.加载普通图片

接下来我们来写个简单实例看看:

import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State option: ImageKnifeOption = {
    loadSrc: $r('app.media.icon')
  }

  build() {
      Row() {
        Column() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
          ImageKnifeComponent({ imageKnifeOption: this.option })
            .width(300)
            .height(300)
        }.width('100%')
      }.height('100%')
  }
}

非常简单，仅需定义一个ImageKnifeOption数据对象，然后在你需要的UI位置，加入ImageKnifeComponent自定义组件就可以加载出一张图像了。

3.加载SVG图片

加载svg其实和普通流程没有区别,只要将 loadSrc: $r('app.media.jpgSample'), 改成一张 loadSrc: $r('app.media.svgSample'), svg类型图片即可。

4.加载GIF图片

加载GIF其实和普通流程也没有区别只要将 loadSrc: $r('app.media.jpgSample'), 改成一张 loadSrc: $r('app.media.gifSample'), GIF图片即可。

4.1加载GIF图片

更改ImageKnifeOption对象的autoPlay（可选autoPlay = true为开始播放，autoPlay = false为暂停播放）

5.自定义Key

因为通常改变标识符比较困难或者根本不可能，所以ImageKnife也提供了 签名 API 来混合（你可以控制的）额外数据到你的缓存键中。 签名(signature)适用于媒体内容，也适用于你可以自行维护的一些版本元数据。

将签名传入加载请求

imageKnifeOption = {
                loadSrc: 'https://aahyhy.oss-cn-beijing.aliyuncs.com/blue.jpg',
                signature: new ObjectKey(new Date().getTime().toString())
              }

详细样例请参考SignatureTestPage文件

代码示例

6.自定义请求头规格

设置全局header并且设置request的header时，当key不同时全局和request并行，当key相同时request的header覆盖全局的header

7.自定义网络栈加载图片

7.1 自定义网络栈加载单个图片，在imageKnifeNextOption中添加customGetImage标签，然后完善custom函数的逻辑即可，

ImageKnifeNextComponent({
  imageKnifeNextOption: {
      loadSrc: 'http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg',
      placeholderSrc: $r('app.media.icon_loading'),
      errorholderSrc: $r('app.media.icon_failed'),
      customGetImage: custom
 }
}).width(100).height(100)
// 自定义实现图片获取方法，如自定义网络下载


@Concurrent
async function custom(context: Context, src: string): Promise<ArrayBuffer | undefined> {
  let result: DataFetchResult = new DataFetchResult();
  result.data = arraybuffer; //此处替换成自己网络获取的ArrayBuffer的逻辑
  return result;
}
7.2 自定义网络栈加载全部图片
1.先执行ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataFetchClient()); 替换网络栈
2.在CustomDataFetchClient这个类中也通过下面的逻辑替换成自己网络获取的ArrayBuffer的逻辑
  let result: DataFetchResult = new DataFetchResult();
  result.data = arraybuffer; //此处替换成自己网络获取的ArrayBuffer的逻辑
  return result;
7.3 取消自定义网络栈加载全部图片
如果用户执行了自定义网络加载全部图片，后面又不想自定义网络栈加载全部图片了，可以通过下面的方式恢复
ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataFetchClient());

ImageKnife更高阶用法参考：

OpenHarmony-TPC/ImageKnife (gitee.com)

 

chenchen-IT
关注
  • 31
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS移动应用开发（ArkTS版） 刘安战、余雨萍、陈争艳 清华大学出版社 课件PDF。共十三章，每章1个PPT
【OpenHarmony】 ArkTS 语法基础 ② ( ArkTS 自定义组件 )
06-03
【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 ) https://hanshuliang.blog.csdn.net/article/details/139407374 博客源码快照 ...
OpenHarmony实战开发-图片解码(ArkTS)如何实现图片显示或图片处理。
2401_82546228的博客
05-15 985
图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG、ICO。
鸿蒙arkts的图片资源引入方式和样式的复用方式
weixin_63448554的博客
12-23 2261
组件内的样式不需要使用function 关键字声明，而组件外的样式需要function声明，需要在加上@style修饰符。关于arkts语言的图片资源引入方式目前有下面三种，大家随意选用就好，都可以实现效果。大家好我是海岛，分享一下在传智博学谷学习的一些知识技术。
ArKTS的基本组件
morr_的博客
02-03 5740
设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。
ArkTS的 Image 组件用相对路径加载图片不显示图片
weixin_62288574的博客
03-28 1365
解决方法：在同一个文件夹种时，在使用相对路径时不要加 ‘../’ 和 直接填写文件名 ‘ 111.png’ 而是采用所在文件夹名+ 文件名。问题：在引用图片时，使用 Image Image组件加载但是，图片没有显示。很明显Image占了位置但是图片加载失败。
鸿蒙应用开发ArkTS基础组件的使用
码小白.
12-10 883
其入参需要传入一个图片源，参数名为 src ，参数类型是 union 联合类型，支持字符串地址、像素图以及本地图片在 Text 中套用 Span 组件时，Span 的内容会覆盖掉 Text 的内容: {type?: { type?
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Image）
m0_64420071的博客
03-08 2150
ArkTS声明式开发（基础手势：Image）
鸿蒙开发-ArkTS 语言（二）— ArkUI组件
m0_73838866的博客
02-22 1525
鸿蒙开发-ArkTS 语言（二）— ArkUI组件
HarmonyOS移动应用开发
04-07
通过该课程的学习，您将掌握HarmonyOS基本概念及原理、HarmonyOS技术架构、HarmonyOS应用开发流程、Ability与UI开发知识，具备HarmonyOS功能开发、调试与发布的能力，能够胜任HarmonyOS应用开发工程师岗位。
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本...
HarmonyOS-ArkTS-待办列表源码
12-21
ArkTS语法：ArkTS是HarmonyOS的主要应用开发语言。ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。 Text组件：显示一段文本的组件。 Column组件：沿垂直方向布局的容器。 Row组件：沿水平方向布局的容器。
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（基本语法 二）
爱吃土豆丝的打工人的博客
07-14 4545
struct：自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。说明自定义组件名、类名、函数名不能和系统组件名相同。@Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。说明。
如何学习Golang语言!
FengyangCoder的博客
06-09 426
起源与设计哲学：Go语言由Robert Griesemer、Rob Pike和Ken Thompson三位Google工程师设计，旨在解决现代编程中的一些常见问题，如编译速度、运行效率和并发编程。主要特点：Go语言的语法简单、编译速度快、运行效率高，支持静态类型和内存安全，具有垃圾回收功能，并且原生支持并发编程。
扩展学习|风险管理的文献综述汇总（持续更新向）
weixin_63253486的博客
06-10 785
本片博客主要介绍风险管理领域本人所看到的一些有意思的文章，并就风险管理领域的相关内容进行一个分享。
[ue5]建模场景学习笔记（5）——必修内容可交互的地形，交互沙（3）
qq_40128113的博客
06-09 316
5.第一想法直接clear掉，但直接clear会把想要保留的痕迹一并去除，跑起来就没有痕迹！所以不行，要做一个转载，先把痕迹保留在一个载体上，清楚原来痕迹，用sandsave表示，再把这个载体的痕迹保存回原来rt，这样之前的痕迹被清空了，只留下了保存在载体上的部分，正好符合我们想要的部分。我们现在已经能够让这片地形出现在任意地方，只要角色走在这片地形上，就能够产生痕迹，但这片区域总是需要人工指定，又无法把这片区域无限扩大（显存爆炸），因此尝试使角色无论走到哪里都能产生痕迹。否则绘制不到画板上。
Qt---pro文件的学习
最新发布
weixin_51883798的博客
06-11 457
【代码】Qt---pro文件的学习。
React的表单学习
qq_36935391的博客
06-08 417
react的表单的双向绑定。
harmonyos移动应用开发 arkts版 电子书
01-29
HarmonyOS移动应用开发arkts版电子书是一本关于如何使用HarmonyOS开发移动应用的实用指南。这本电子书的目的是帮助开发者了解HarmonyOS移动应用开发的基本概念和技术，以及如何使用arkts工具包来构建高性能、可靠的应用程序。 这本电子书首先介绍了HarmonyOS的基本概念和架构，包括分布式技术、资源管理和安全性等方面。然后，它详细介绍了arkts工具包的使用方法，包括如何设置开发环境、创建应用程序和调试代码等。此外，该电子书还提供了大量的示例代码和实战案例，供读者参考和学习。 在这本电子书中，读者将学习如何开发HarmonyOS移动应用的各个方面，包括界面设计、数据存储、网络通信和用户体验等。它不仅涵盖了基础知识，还介绍了一些高级主题，如应用程序优化和性能调优。读者可以通过阅读这本电子书，系统地学习和掌握HarmonyOS移动应用开发的技能。 总而言之，HarmonyOS移动应用开发arkts版电子书是一本详细且实用的指南，适用于那些对HarmonyOS移动应用开发感兴趣的开发者。它提供了全面的教程和实战案例，帮助读者快速入门和掌握HarmonyOS移动应用开发的技术。希望通过这本电子书，更多的开发者能够利用HarmonyOS的优势，开发出更好的移动应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值