鸿蒙应用中图片的显示（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文件夹）。

Image('images/view.jpg')
.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。 
    import picker from '@ohos.file.picker';
import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';@Entry
@Component
struct ImageSelectPage {@State imgDatas: string[] = [];@State image: PixelMap = null// 获取照片url集getAllImg() {let result = new Array<string>();try {let PhotoSelectOptions = new picker.PhotoSelectOptions();PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;PhotoSelectOptions.maxSelectNumber = 5;let photoPicker = new picker.PhotoViewPicker();photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {this.imgDatas = PhotoSelectResult.photoUris;console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));}).catch((err) => {console.error(`PhotoViewPicker.select failed with. Code: ${err.code}, message: ${err.message}`);});} catch (err) {console.error(`PhotoViewPicker failed with. Code: ${err.code}, message: ${err.message}`);    }}// aboutToAppear中调用上述函数，获取图库的所有图片url，存在imgDatas中async aboutToAppear() {this.getAllImg();}// 使用imgDatas的url加载图片。build() {Column() {if (null != this.image) {Image(this.image)}Grid() {ForEach(this.imgDatas, item => {GridItem() {Image(item).width(200)}}, item => JSON.stringify(item))}}.width('100%').height('100%')}
}

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

e.base64 

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

1.2、多媒体像素图片

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

import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';@Entry
@Component
struct ShowNetworkImagePage {@State image: PixelMap = undefined;aboutToAppear() {}build() {Row() {Stack() {Column() {Image(this.image)}.width('100%')Text('点击加载网络图片').onClick(() => {this.httpRequest()}).fontSize(32)}}.height('100%').backgroundColor('#8067c8ff')}httpRequest() {http.createHttp().request('https://lmg.jj20.com/up/allimg/1112/04051Z03929/1Z405003929-4-1200.jpg',(error, data) => {if (error) {console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);} else {let code = data.responseCode;if (http.ResponseCode.OK === data.responseCode) {let res: any = data.resultlet imageSource = image.createImageSource(res);let options = {alphaType: 0,    // 透明度editable: false, // 是否可编辑pixelFormat: 3,  // 像素格式scaleMode: 1,    // 缩略值size: { height: 100, width: 100 }} // 创建图片大小imageSource.createPixelMap(options).then((pixelMap) => {this.image = pixelMap})}}})}
}

2、显示矢量图

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

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

@Entry
@Component
struct SVGImageTestPage {@State message: string = 'Hello World'build() {Row() {Column() {Image($r('app.media.smile_beam')).width(200).height(200).backgroundColor('#8067c8ff').fillColor(Color.Red)}.width('100%')}.height('100%')}
}

        说明：

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

3、添加属性

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

3.1、设置图片缩放类型

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

@Entry
@Component
struct MyComponent {scroller: Scroller = new Scroller()build() {Scroll(this.scroller) {Row() {Image($r('app.media.img_2')).width(200).height(150).border({ width: 1 }).objectFit(ImageFit.Contain).margin(15) // 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。.overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.ic_img_2')).width(200).height(150).border({ width: 1 }).objectFit(ImageFit.Cover).margin(15)// 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。.overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.img_2')).width(200).height(150).border({ width: 1 })// 自适应显示。.objectFit(ImageFit.Auto).margin(15).overlay('Auto', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })}Row() {Image($r('app.media.img_2')).width(200).height(150).border({ width: 1 }).objectFit(ImageFit.Fill).margin(15)// 不保持宽高比进行放大缩小，使得图片充满显示边界。.overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.img_2')).width(200).height(150).border({ width: 1 })// 保持宽高比显示，图片缩小或者保持不变。.objectFit(ImageFit.ScaleDown).margin(15).overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.img_2')).width(200).height(150).border({ width: 1 })// 保持原有尺寸显示。.objectFit(ImageFit.None).margin(15).overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })}}}
}

        运行效果如下：

3.2、图片插值

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

@Entry
@Component
struct ImageInterpolationPage {@State message: string = 'Hello World'build() {Column() {Row() {Image($r('app.media.wrench_simple_20')).width('40%').interpolation(ImageInterpolation.None).borderWidth(1).overlay("Interpolation.None", { align: Alignment.Bottom, offset: { x: 0, y: 20 } }).margin(10)Image($r('app.media.wrench_simple_20')).width('40%').interpolation(ImageInterpolation.Low).borderWidth(1).overlay("Interpolation.Low", { align: Alignment.Bottom, offset: { x: 0, y: 20 } }).margin(10)}.width('100%').justifyContent(FlexAlign.Center)Row() {Image($r('app.media.wrench_simple_20')).width('40%').interpolation(ImageInterpolation.Medium).borderWidth(1).overlay("Interpolation.Medium", { align: Alignment.Bottom, offset: { x: 0, y: 20 } }).margin(10)Image($r('app.media.wrench_simple_20')).width('40%').interpolation(ImageInterpolation.High).borderWidth(1).overlay("Interpolation.High", { align: Alignment.Bottom, offset: { x: 0, y: 20 } }).margin(10)}.width('100%').justifyContent(FlexAlign.Center)}.height('100%')}
}

         效果如下：

3.2、设置图片重复样式

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

@Entry
@Component
struct ImageRepeatTestPage {@State message: string = 'Hello World'build() {Column({ space: 10 }) {Column({ space: 5 }) {Image($r('app.media.wrench_simple_20')).width('60%').height(300).border({ width: 1 }).objectRepeat(ImageRepeat.XY).objectFit(ImageFit.ScaleDown).margin({top: 48})// 在水平轴和竖直轴上同时重复绘制图片.overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.wrench_simple_20')).width('60%').height(300).border({ width: 1 }).objectRepeat(ImageRepeat.Y).objectFit(ImageFit.ScaleDown).margin({top: 40})// 只在竖直轴上重复绘制图片.overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.wrench_simple_20')).width('60%').height(300).border({ width: 1 }).objectRepeat(ImageRepeat.X).objectFit(ImageFit.ScaleDown).margin({top: 40})// 只在水平轴上重复绘制图片.overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })}}.height(150).width('100%').padding(8)}
}

        效果如下：

3.3、设置图片渲染模式 

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

@Entry
@Component
struct RenderModePage {@State message: string = 'Hello World'build() {Row() {Column({ space: 10 }) {Row({ space: 50 }) {Image($r('app.media.girl9'))// 设置图片的渲染模式为原色.renderMode(ImageRenderMode.Original).width(100).height(100).border({ width: 1 })// overlay是通用属性，用于在组件上显示说明文字.overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })Image($r('app.media.girl9'))// 设置图片的渲染模式为黑白.renderMode(ImageRenderMode.Template).width(100).height(100).border({ width: 1 }).overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })}}.height(150).width('100%').padding({ top: 20, right: 10 })}}
}

        效果如下：

3.4、设置图片解码尺寸

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

 

@Entry
@Component
struct ImageSourceSizePage {@State message: string = 'Hello World'private imagrUrl:string = 'https://10wallpaper.com/wallpaper/1280x960/1605/Asian_fashion_beauty_model_photo_HD_Wallpapers_06_1280x960.jpg'build() {Column() {Row({ space: 20 }) {Image(this.imagrUrl).sourceSize({width: 150,height: 150}).objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1).border({ width: 1 }).overlay('width:150 height:150', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })Image(this.imagrUrl).sourceSize({width: 400,height: 400}).objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1).border({ width: 1 }).overlay('width:400 height:400', { align: Alignment.Bottom, offset: { x: 0, y: 40 } })}.height(150).width('100%').padding(20).justifyContent(FlexAlign.Center).backgroundColor("#dfaaaa")}}
}

        效果如下：

3.5、添加滤镜效果

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

@Entry
@Component
struct ImageColorFilterPage {@State message: string = 'Hello World'build() {Column() {Row() {Image($r('app.media.girl16')).width('40%').margin(10)Image($r('app.media.girl16')).width('40%').colorFilter([1, 1, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 1, 0]).margin(10)}.width('100%').justifyContent(FlexAlign.Center)}}
}

        效果如下：

3.6、同步加载图片

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

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

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

@Entry
@Component
struct ImageLoadEventPage {@State widthValue: number = 0@State heightValue: number = 0@State componentWidth: number = 0@State componentHeight: number = 0build() {Column() {Row() {Image($r('app.media.girl6')).width(200).height(150).margin(15).objectFit(ImageFit.Contain).onComplete((msg: {width: number,height: number,componentWidth: number,componentHeight: number}) => {this.widthValue = msg.widththis.heightValue = msg.heightthis.componentWidth = msg.componentWidththis.componentHeight = msg.componentHeight})// 图片获取失败，打印结果.onError(() => {console.info('load image fail')}).overlay('\nwidth: ' + String(this.widthValue) + ', height: ' + String(this.heightValue) + '\ncomponentWidth: ' + String(this.componentWidth) + '\ncomponentHeight: ' + String(this.componentHeight), {align: Alignment.Bottom,offset: { x: 0, y: 60 }})}}.justifyContent(FlexAlign.Center).backgroundColor('#777').width('100%')}
}

        效果如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/595809.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Go语言基本数据类型

Go语言基本数据类型

Go语言基本数据类型 1.整型2.浮点型3.复数4.布尔型5.字符串窥探字符串类型字符串内建函数UTF-8编码字符串处理相关的四个包字符串和数字的转换 6.常量 1.整型 Go语言同时提供了有符号和无符号类型的整数运算。这里有int8、int16、int32和int64四种截然不同大小的有符号整数类型…
阅读更多...
基于springboot公租房申请管理系统

基于springboot公租房申请管理系统

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven…
阅读更多...
柯桥小语种学习，留学韩语 生活日常口语 语法

柯桥小语种学习，留学韩语 生活日常口语 语法

① N이다/A/V/았ㄹ/을지도 모르다 说不定 이미 도착했을 지도 모르니까 전화해 봐요 说不定已经到了&#xff0c;打电话试试 주말에 세일이 있을지도 모르니까 주말에 가 보자 周末说不定会搞活动&#xff0c;我们周末去吧 ② ㄴ/은/는/았었는/ㄹ/을지 모르다 不知道 처음이…
阅读更多...
【webstorm中通过附加方式打开一个项目，这个项目本身有git，但是却看不到git的解决方法】

【webstorm中通过附加方式打开一个项目，这个项目本身有git，但是却看不到git的解决方法】

1、如图所示 设置-》版本控制-》未注册的根&#xff0c;选中后&#xff0c;再点加号&#xff0c;就可以了 2、如图所示 版本控制-》直接点加号-》选中项目路径&#xff0c;vcs选择git&#xff0c;点击确定就可以了
阅读更多...
prometheus grafana mysql监控配置使用

prometheus grafana mysql监控配置使用

文章目录 前传bitnami/mysqld-exporter:0.15.1镜像出现了问题.my.cnf可以用这个"prom/mysqld-exporter:v0.15.0"镜像重要的事情mysql监控效果外传 前传 prometheus grafana的安装使用&#xff1a;https://nanxiang.blog.csdn.net/article/details/135384541 本文说…
阅读更多...
【电商项目实战】沙箱支付模拟支付功能

【电商项目实战】沙箱支付模拟支付功能

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《电商项目实战》。&#x1f3af;&#x1f3af; &am…
阅读更多...
芯片SIC8833可开发打气泵方案

芯片SIC8833可开发打气泵方案

无线车载打气泵方案由一块PCBA板集成其所需的功能&#xff0c;其充气原理是发动机通过两根三角带驱动气泵曲轴&#xff0c;进而驱动活塞进行打气&#xff0c;打出的气体通过导气管导入储气筒。另一方面储气筒又通过一根导气管将储气筒内的气体导入固定在气泵上的调压阀内&#…
阅读更多...
ClickHouse基础知识（四）：ClickHouse 引擎详解

ClickHouse基础知识（四）：ClickHouse 引擎详解

1. 表引擎的使用 表引擎是 ClickHouse 的一大特色。可以说&#xff0c; 表引擎决定了如何存储表的数据。包括&#xff1a; ➢ 数据的存储方式和位置&#xff0c;写到哪里以及从哪里读取数据。 默认存放在/var/lib/clickhouse/data ➢ 支持哪些查询以及如何支持。 ➢ 并发数…
阅读更多...
6.vue学习笔记(style绑定+监听器+表单的输入绑定)

6.vue学习笔记(style绑定+监听器+表单的输入绑定)

文章目录 1.style绑定2.监听器3.表单的输入绑定3.1.复选框3.2.修饰符3.2.1 .lazy 1.style绑定 数据绑定的一个常见需求场景是操纵元素的 CSS style列表&#xff0c;因为style是attribute&#xff0c;我们可以和其他attribute一样使用v-bind将它们和动态字符串绑定。 但是&…
阅读更多...
vue-cli创建项目时由esLint校验导致报错或警告的问题及解决

vue-cli创建项目时由esLint校验导致报错或警告的问题及解决

vue-cli创建项目时由esLint校验导致报错或警告的问题及解决 一、万能办法 一、万能办法 //就是在报错的JS文件中第一行写上 /* eslint-disable */链接: https://www.yii666.com/blog/288808.html 其它的方法我遇见了再补充
阅读更多...
快速搭建知识付费小程序，3分钟即可开启知识变现之旅

快速搭建知识付费小程序，3分钟即可开启知识变现之旅

产品服务 线上线下课程传播 线上线下活动管理 项目撮合交易 找商机找合作 一对一线下交流 企业文化宣传 企业产品销售 更多服务 实时行业资讯 动态学习交流 分销代理推广 独立知识店铺 覆盖全行业 个人IP打造 独立小程序 私域运营解决方案 公域引流 营销转化 …
阅读更多...
深度学习基础知识神经网络

深度学习基础知识神经网络

神经网络 1. 感知机 感知机&#xff08;Perceptron&#xff09;是 Frank Rosenblatt 在1957年提出的概念&#xff0c;其结构与MP模型类似&#xff0c;一般被视为最简单的人工神经网络&#xff0c;也作为二元线性分类器被广泛使用。通常情况下指单层的人工神经网络&#xff0c…
阅读更多...
ModuleNotFoundError: No module named ‘numpy.testing.decorators‘

ModuleNotFoundError: No module named ‘numpy.testing.decorators‘

文章目录 报错信息报错原因解决方案 关注公众号&#xff1a;『AI学习星球』 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或➕v&#xff1a;codebiubiubiu滴滴我 报错信息 ModuleNotFoundError: No module named numpy.testing.decorators 报错原因 新版本已经去…
阅读更多...
how2heap-2.23-03-fastbin_dup_consolidate

how2heap-2.23-03-fastbin_dup_consolidate

#include <stdio.h> #include <stdint.h> #include <stdlib.h> #include <string.h>int main() {void* p1 malloc(0x10);strcpy(p1, "AAAAAAAA");void* p2 malloc(0x10);strcpy(p2, "BBBBBBBB");fprintf(stderr, "申请两个…
阅读更多...
手机怎么边看视频边记笔记或备忘录？

手机怎么边看视频边记笔记或备忘录？

在这个信息爆炸的时代&#xff0c;我们经常需要通过看培训视频、听网课来不断充实自己。但是&#xff0c;手机屏幕那么小&#xff0c;如何才能在做笔记的同时&#xff0c;又不错过视频的每一个细节呢&#xff1f; 以前&#xff0c;我总是为此头疼。一手拿着手机看视频&#xf…
阅读更多...
【嵌入式】About USB Powering

【嵌入式】About USB Powering

https://www.embedded.com/usb-type-c-and-power-delivery-101-power-delivery-protocol/https://www.embedded.com/usb-type-c-and-power-delivery-101-power-delivery-protocol/ Type-C接口有多强&#xff1f;PD协议又是什么&#xff1f;-电子发烧友网由于Type-C接口自身的强…
阅读更多...
c++牛客总结

c++牛客总结

一、c/c语言基础 1、基础 1、指针和引用的区别 指针是一个新的变量&#xff0c;指向另一个变量的地址&#xff0c;我们可以通过这个地址来修改该另一个变量&#xff1b; 引用是一个别名&#xff0c;对引用的操作就是对变量本身进行操作&#xff1b;指针可以有多级 引用只有一…
阅读更多...
Linux Perf 介绍

Linux Perf 介绍

文章目录 前言 二、安装Perf三、二级命令3.1 perf list3.2 perf record/report3.3 perf stat3.4 perf top 四、使用火焰图进行性能分析4.1 下载火焰图可视化生成器4.2 使用perf采集数据4.3 生成火焰图参考资料 前言 perf是一款Linux性能分析工具&#xff0c;内置在Linux内核的…
阅读更多...
virtualbox新建Ubuntu虚拟机

virtualbox新建Ubuntu虚拟机

1、下载virtualbox 2、下载Ubuntu镜像 https://ubuntu.com/blog/desktop virtualbox安装好后&#xff0c;点击新建 选择linux类型 选择内存2~4G都行 选择先不添加虚拟硬盘 创建硬盘&#xff0c;管理点击虚拟介质管理 点击创建&#xff0c;选择创建类型为vmdk&#xff0…
阅读更多...
xshell配色

xshell配色

xshell-设置命令行提示符&配色方案 更换配色&#xff1a; Protect Eyes.xcs [Protect Eyes] text00ff40 cyan(bold)93a1a1 text(bold)839496 magentadd3682 green80ff80 green(bold)859900 background042028 cyan2aa198 red(bold)cb4b16 yellowb58900 magenta(bold)6c71c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023