【HarmonyOS】笔记八-图片处理

概念

开发者经常需要在应用中显示一些图片,例如:按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现,Image支持多种图片格式,包括png、jpg、bmp、svg和gif,该接口通过图片数据源获取图片,支持本地图片和网络图片的渲染展示。其中,src是图片的数据源,加载方式请参考加载图片资源

本地资源

创建文件夹,将本地图片放入ets文件夹下的任意位置。

Image组件引入本地图片路径,即可显示图片(根目录为ets文件夹)。

TypeScript 复制代码
@Entry
@Component
struct Eight_1{
  build(){
    Column(){
      //图片存储在ets文件夹下的子文件夹中
      Image("images/image1.jpg").width("100%")
    }.width("100%")
  }
}

网络资源

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

TypeScript 复制代码
@Entry
@Component
struct Eight_2{
  build(){
    Column(){
      //加载网络图片,前提是需要添加网络权限
      Image("https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280").width("100%")
    }.width("100%")
  }
}

Resource资源

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

TypeScript 复制代码
@Entry
@Component
struct Eight_3{
  build(){
    Column(){
      //图片存储在resources文件夹下的media或者profile子文件夹中
      Image($r("app.media.image2")).width("100%")
    }.width("100%")
  }
}

媒体库file://data/storage

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

  1. 调用接口获取图库的照片url。
TypeScript 复制代码
import picker from '@ohos.file.picker';

@Entry
@Component
struct Eight_4 {
  @State imgDatas: string[] = [];
  // 获取照片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() {
      Grid() {
        ForEach(this.imgDatas, item => {
          GridItem() {
            Image(item)
              .width(200)
          }
        }, item => JSON.stringify(item))
      }
    }.width('100%').height('100%')
  }
}

请求网络图片请求,解码编码PixelMap。

TypeScript 复制代码
//请求网络图片请求,解码编码PixelMap
import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';
@Entry
@Component
struct Eight_5{
  //创建PixelMap状态变量
  @State image: PixelMap = undefined;

  httpRequest(){
    //填写网络图片地址
    http.createHttp().request("https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280",
      (error, data) => {
        if (error){
          console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
        } else {
          //将网络地址成功返回的数据,编码转码成pixelMap的图片格式
          let code = data.responseCode;
          if (ResponseCode.ResponseCode.OK === code) {
            let res: any = data.result
            let 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
            })
          }
        }
      }
    )
  }
  build(){
    Column(){
      //显示图片
      Button("获取网络图片")
        .onClick(() => {
          this.httpRequest()
        }).margin(10)
      Image(this.image).width("100%")
    }.width("100%")
  }
}

Image组件可显示矢量图(svg格式的图片),支持的svg标签为:svg、rect、circle、ellipse、path、line、polyline、polygon和animate。

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

TypeScript 复制代码
@Entry
@Component
struct Eight_7 {
  scroller: Scroller = new Scroller()

  build() {
    Scroll(this.scroller) {

      Column(){

          Image($r('app.media.image2')).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.image2')).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.image2')).width(200).height(150)
            .border({ width: 1 })
              // 自适应显示。
            .objectFit(ImageFit.Auto).margin(15)
            .overlay('Auto', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })


          Image($r('app.media.image2')).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.image2')).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.image2')).width(200).height(150)
            .border({ width: 1 })
              // 保持原有尺寸显示。
            .objectFit(ImageFit.None).margin(15)
            .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })

      }.width("100%")

    }
  }
}
相关推荐
SuperHeroWu71 小时前
【HarmonyOS】HarmonyOS和React Native混合开发 (一)之环境安装
react native·harmonyos·鸿蒙·开发环境·环境安装·rn·混合开发
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
无处安放的波澜1 小时前
【HarmonyOS 5.0】第十二篇-ArkUI公共属性(一)
华为·harmonyos·arkts·鸿蒙·鸿蒙系统
李洋-蛟龙腾飞公司2 小时前
HarmonyOS Next 应用元服务开发-分布式数据对象迁移数据文件资产迁移
分布式·华为·harmonyos
大土豆的bug记录2 小时前
鸿蒙历史搜索功能:tag标签根据文字宽度自动换行 展示更多
华为·harmonyos
轻口味3 小时前
【每日学点鸿蒙知识】Charles抓包、lock文件处理、WebView组件、NFC相关、CallMethod失败等
华为·harmonyos
一个处女座的程序猿O(∩_∩)O4 小时前
开源鸿蒙 5.0 正式版发布
华为·harmonyos
程序猿会指北5 小时前
【鸿蒙(HarmonyOS)性能优化指南】内存分析器Allocation Profiler
性能优化·移动开发·harmonyos·openharmony·arkui·组件化·鸿蒙开发
程序猿会指北8 小时前
【鸿蒙(HarmonyOS)性能优化指南】启动分析工具Launch Profiler
c++·性能优化·harmonyos·openharmony·arkui·启动优化·鸿蒙开发
鸿蒙程序媛8 小时前
2024最新鸿蒙开发面试题合集-HarmonyOS NEXT Release(API 12 Release)
harmonyos·harmonyos面试题