IT评测·应用市场-qidao123.com

标题: 鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Image） [打印本页]

---

作者: 梦见你的名字    时间: 2024-7-17 15:30
标题: 鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Image）
Image为图片组件，常用于在应用中表现图片。Image支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源，支持png、jpg、jpeg、bmp、svg、webp和gif类型的图片格式。
   说明：
  该组件从API Version 7开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  需要权限

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

无
接口

Image(src: PixelMap | ResourceStr | DrawableDescriptor)
通过图片数据源获取图片，用于后续渲染展示。
Image组件加载图片失败或图片尺寸为0时，图片组件大小自动为0，不跟随父组件的结构约束。
从API version 9开始，该接口支持在ArkTS卡片中利用。
参数：
参数名参数类型必填参数形貌srcPixelMap | ResourceStr| DrawableDescriptor是图片的数据源，支持本舆图片和网络图片，引用方式请参考加载图片资源。
1. PixelMap格式为像素图，常用于图片编辑的场景。
2. ResourceStr包罗Resource和string格式。
string格式可用于加载网络图片和本舆图片，常用于加载网络图片。当利用相对路径引用本舆图片时，比方Image("common/test.jpg")，不支持跨包/跨模块调用该Image组件，发起利用Resource格式来管理需全局利用的图片资源。
- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp];base64,[base64 data], 其中[base64 data]为Base64字符串数据。
- 支持file://路径前缀的字符串，应用沙箱URI：file://<bundleName>/<sandboxPath>。用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。
Resource格式可以跨包/跨模块访问资源文件，是访问本舆图片的保举方式。
3. 当传入资源id或name为普通图片时，生成DrawableDescriptor对象。
说明：
- ArkTS卡片上支持gif图片格式动效，但仅在表现时播放一次。
- ArkTS卡片上不支持http://等网络相关路径前缀和file://路径前缀的字符串。
- ArkTS卡片上不支持 PixelMap类型。
- 加载本舆图片过程中，如果对图片进行修改或者更换，大概会引起应用崩溃。因此需要覆盖图片文件时，应该先删除该文件再重新创建一个同名文件。
- 网络图片必须支持RFC 9113尺度，否则会导致加载失败。 属性

属性的具体利用指导请参考添加属性。除支持通用属性外，还支持以下属性：
名称参数类型形貌altstring | Resource加载时表现的占位图，支持本舆图片（png、jpg、bmp、svg和gif类型），不支持网络图片。
默认值：null
从API version 9开始，该接口支持在ArkTS卡片中利用。objectFitImageFit设置图片的填充结果。
默认值：ImageFit.Cover
从API version 9开始，该接口支持在ArkTS卡片中利用。objectRepeatImageRepeat设置图片的重复样式。从中心点向双方重复，剩余空间不足放下一张图片时会截断。
默认值：ImageRepeat.NoRepeat
从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
svg类型图源不支持该属性。interpolationImageInterpolation设置图片的插值结果，即缓解图片在缩放时的锯齿问题。
默认值：ImageInterpolation.None
从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
svg类型图源不支持该属性。renderModeImageRenderMode设置图片的渲染模式为原色或好坏。
默认值：ImageRenderMode.Original
从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
svg类型图源不支持该属性。sourceSize{
width: number,
height: number
}设置图片解码尺寸，降低图片的分辨率，常用于需要让图片表现尺寸比组件尺寸更小的场景。和ImageFit.None配合利用时可在组件内表现小图。
单位：vp
从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
仅在目标尺寸小于图源尺寸时生效。
svg类型图源不支持该属性。
PixelMap资源不支持该属性。matchTextDirectionboolean设置图片是否跟随体系语言方向，在RTL语言环境下表现镜像翻转表现结果。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中利用。fitOriginalSizeboolean图片组件尺寸未设置时，其表现尺寸是否跟随图源尺寸。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中利用。fillColorResourceColor设置填充颜色，设置后填充颜色会覆盖在图片上。
从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
仅对svg图源生效，设置后会更换svg图片的填充颜色。autoResizeboolean设置图片解码过程中是否对图源自动缩放。设置为true时，组件会根据表现地区的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。如原图大小为1920x1080，而表现地区大小为200x200，则图片会降采样解码到200x200的尺寸，大幅度节流图片占用的内存。
默认值：true
从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
降采样解码时图片的部分信息丢失，因此大概会导致图片质量的下降（如：出现锯齿），这时可以选择把autoResize设为false，按原图尺寸解码，提拔表现结果。syncLoad8+boolean设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会表现占位图。
默认值：false
从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
发起加载尺寸较小的本舆图片时将syncLoad设为true，由于耗时较短，在主线程上执行即可。copyOption9+CopyOptions设置图片是否可复制。
当copyOption设置为非CopyOptions.None时，支持利用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。
默认值：CopyOptions.None
从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
svg图片不支持复制。colorFilter9+ColorFilter给图像设置颜色滤镜结果，入参为一个的4x5的RGBA转换矩阵。
矩阵第一行表示R（红色）的向量值，第二行表示G（绿色）的向量值，第三行表示B（蓝色）的向量值，第四行表示A（透明度）的向量值，4行分别代表不同的RGBA的向量值。
当矩阵对角线值为1，其余值为0时，保持图片原有色彩。
计算规则：
如果输入的滤镜矩阵为：

像素点为[R, G, B, A]
则过滤后的颜色为 [R’, G’, B’, A’]

从API version 9开始，该接口支持在ArkTS卡片中利用。
说明：
svg类型图源不支持该属性。draggable9+boolean设置组件默认拖拽结果，设置为true时，组件可拖拽。
不能和onDragStart事故同时利用。
默认值：false
说明：
API version 9的默认值为false，API version 10的默认值为true。enableAnalyzer11+boolean设置组件支持AI分析，设置为true时，组件可进行AI分析。
不能和overlay属性同时利用，两者同时设置时overlay中CustomBuilder属性将失效。
默认值：false
说明：
该特性依赖设备能力。
分析图像要求是静态非矢量图，即svg、gif等图像类型不支持分析，支持传入PixelMap进行分析，目前仅支持RGBA_8888类型，利用方式见示例。
alt占位图不支持分析，objectRepeat属性仅在ImageRepeat.NoRepeat下支持分析，隐私遮罩属性obscured打开时不支持分析。
基于完备原始图像进行分析，设置clip、margin、borderRadius、position和objectFit属性导致图像表现不完备，或利用renderMode设置蒙层，仍基于完备原始图像进行分析。
copyOption属性不影响AI分析功能。analyzerConfig11+ImageAnalyzerConfig设置AI分析类型，包括主体识别和文字识别功能，默认全部开启。
说明：
分析类型不支持动态修改。
体系接口：
此接口为体系接口。edgeAntialiasing11+number设置SVG图源抗锯齿结果，仅对svg图源生效。
取值范围：[0.333,1.333][0.333,1.333]，有效数字保留小数点后3位。
默认值：00。   说明：
  

• 利用快捷组合键对Image组件复制时，Image组件必须处于获焦状态。Image组件默认不获焦，需将focusable属性设置为true，即可利用TAB键将焦点切换到组件上，再将focusOnTouch属性设置为true，即可实现点击获焦。
  
• 图片设置为svg图源时，当前支持的标签是svg、rect、circle、ellipse、path、line、polyline和polygon。
  

  ImageInterpolation

从API version 9开始，该接口支持在ArkTS卡片中利用。
名称形貌None不利用图片插值。High高图片插值，插值质量最高，大概会影响图片渲染的速度。Medium中图片插值。Low低图片插值。 ImageRenderMode

从API version 9开始，该接口支持在ArkTS卡片中利用。
名称形貌Original原色渲染模式。Template好坏渲染模式。 ImageAnalyzerConfig11+

从API version 11开始，该接口支持在ArkTS卡片中利用。
图片AI分析类型设置。
体系接口： 此接口为体系接口。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称形貌SUBJECT主体识别功能。TEXT文字识别功能。 事故

除支持通用事故外，还支持以下事故：
onComplete

onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number,contentWidth: number, contentHeight: number, contentOffsetX: number, contentOffsetY: number}) => void) }) => void)
图片数据加载成功息争码成功时均触发该回调，返回成功加载的图片尺寸。
从API version 9开始，该接口支持在ArkTS卡片中利用。
参数：
参数名类型说明widthnumber图片的宽。
单位：像素heightnumber图片的高。
单位：像素componentWidthnumber组件的宽。
单位：像素componentHeightnumber组件的高。
单位：像素loadingStatusnumber图片加载成功的状态值。
说明：
返回的状态值为0时，表示图片数据加载成功。返回的状态值为1时，表示图片解码成功。contentWidth10+number图片实际绘制的宽度。
单位：像素
说明：
仅在loadingStatus返回1时有效。contentHeight10+number图片实际绘制的高度。
单位：像素
说明：
仅在loadingStatus返回1时有效。contentOffsetX10+number实际绘制内容相对于组件自身的x轴偏移。
单位：像素
说明：
仅在loadingStatus返回1时有效。contentOffsetY10+number实际绘制内容相对于组件自身的y轴偏移。
单位：像素
说明：
仅在loadingStatus返回1时有效。 onError

onError(callback: ImageErrorCallback)
图片加载非常时触发该回调。
从API version 9开始，该接口支持在ArkTS卡片中利用。
参数：
参数名类型说明callbackImageErrorCallback图片加载非常时触发的回调。 onFinish

onFinish(event: () => void)
当加载的源文件为带动效的svg格式图片时，svg动效播放完成时会触发这个回调。如果动效为无限循环动效，则不会触发这个回调。
仅支持svg格式的图片。
从API version 9开始，该接口支持在ArkTS卡片中利用。
ImageErrorCallback11+

type ImageErrorCallback = (error: ImageError) => void
图片加载非常时触发的回调。
参数名类型说明errorImageError图片加载非常时触发回调的返回对象。 ImageError11+

图片加载非常时触发回调的返回对象。
参数名类型说明componentWidthnumber组件的宽。
单位：像素componentHeightnumber组件的高。
单位：像素messagestring报错信息。 示例

加载根本类型图片

1. @Entry
2. @Component
3. struct ImageExample1 {
4.   build() {
5.     Column() {
6.       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
7.         Row() {
8.           // 加载png格式图片
9.           Image($r('app.media.ic_camera_master_ai_leaf'))
10.             .width(110).height(110).margin(15)
11.             .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
12.           // 加载gif格式图片
13.           Image($r('app.media.loading'))
14.             .width(110).height(110).margin(15)
15.             .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
16.         }
17.         Row() {
18.           // 加载svg格式图片
19.           Image($r('app.media.ic_camera_master_ai_clouded'))
20.             .width(110).height(110).margin(15)
21.             .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
22.           // 加载jpg格式图片
23.           Image($r('app.media.ic_public_favor_filled'))
24.             .width(110).height(110).margin(15)
25.             .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
26.         }
27.       }
28.     }.height(320).width(360).padding({ right: 10, top: 10 })
29.   }
30. }

复制代码

加载网络图片

加载网络图片时，默认网络超时是5分钟，发起利用alt设置加载时的占位图。如果需要更灵活的网络设置，可以利用HTTP工具包发送网络哀求，接着将返回的数据解码为Image组件中的PixelMap，图片开发可参考图片处理。
利用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考声明权限。

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

复制代码

为图片添加事故

1. @Entry
2. @Component
3. struct ImageExample3 {
4.   private imageOne: Resource = $r('app.media.earth');
5.   private imageTwo: Resource = $r('app.media.star');
6.   private imageThree: Resource = $r('app.media.moveStar');
7.   @State src: Resource = this.imageOne
8.   @State src2: Resource = this.imageThree
9.   build(){
10.     Column(){
11.       //为图片添加点击事件，点击完成后加载特定图片
12.       Image(this.src)
13.         .width(100)
14.         .height(100)
15.         .onClick(() => {
16.           this.src = this.imageTwo
17.         })
19.       //当加载图片为SVG格式时
20.       Image(this.src2)
21.         .width(100)
22.         .height(100)
23.         .onClick(() => {
24.           //SVG动效播放完成时加载另一张图片
25.           this.src2 = this.imageOne
26.         })
27.     }.width('100%').height('100%')
28.   }
29. }

复制代码

利用PixelMap开启图像分析

1. import image from '@ohos.multimedia.image'
2. @Entry
3. @Component
4. struct ImageExample4 {
5.   @State imagePixelMap: image.PixelMap | undefined = undefined
7.   async aboutToAppear() {
8.     this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.app_icon'))
9.   }
11.   build() {
12.     Column() {
13.       Image(this.imagePixelMap)
14.         .enableAnalyzer(true)
15.         .width(200)
16.         .height(200)
17.     }
18.   }
19.   private async getPixmapFromMedia(resource: Resource) {
20.     let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
21.       bundleName: resource.bundleName,
22.       moduleName: resource.moduleName,
23.       id: resource.id
24.     })
25.     let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
26.     let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
27.       desiredPixelFormat: image.PixelMapFormat.RGBA_8888
28.     })
29.     await imageSource.release()
30.     return createPixelMap
31.   }
32. }

复制代码

末了，有很多小同伴不知道学习哪些鸿蒙开发技能？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频仍踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有须要的。 
这份鸿蒙（Harmony NEXT）资料包罗了鸿蒙开发必掌握的核心知识要点，内容包罗了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技能知识点。
希望这一份鸿蒙学习资料可以或许给各人带来帮助，有需要的小同伴自行领取，限时开源，先到先得~无套路领取！！
 获取这份完备版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（Harmony NEXT）最新学习路线

•  HarmonOS基础技能
  

• HarmonOS就业必备技能 
  
  
  
•  HarmonOS多媒体技能
  

• 鸿蒙NaPi组件进阶
  

• HarmonOS高级技能
  

• 初识HarmonOS内核 
  
  
  
• 实战就业级设备开发
  

有了路线图，怎么能没有学习资料呢，小编也准备了一份团结鸿蒙官方发布笔记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包罗：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完备版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

 《鸿蒙开发基础》

• ArkTS语言
  
• 安装DevEco Studio
  
• 运用你的第一个ArkTS应用
  
• ArkUI声明式UI开发
  
• .……
  

 《鸿蒙开发进阶》

• Stage模型入门
  
• 网络管理
  
• 数据管理
  
• 电话服务
  
• 分布式应用开发
  
• 关照与窗口管理
  
• 多媒体技能
  
• 安全技能
  
• 使命管理
  
• WebGL
  
• 国际化开发
  
• 应用测试
  
• DFX面向将来设计
  
• 鸿蒙体系移植和裁剪定制
  
• ……
  

《鸿蒙进阶实战》

• ArkTS实践
  
• UIAbility应用
  
• 网络案例
  
• ……
  

 获取以上完备鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变革，不断学习和提拔自己，他们才气在这个变革的时代中立于不败之地。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4