图形图像开发场景实践

HarmonyOS

pfuchenlu

2024-05-26 16:05:07

浏览

回答 1

待解决

回答 1

按赞同

按时间

janux

显示图片

开发中一般使用Image组件显示图片，接口格式为Image(src: PixelMap | ResourceStr | DrawableDescriptor),可分为三类，图片资源、经过图片编码后得到的PixelMap以及API 10新增的DrawableDescriptor。

支持的图片格式包括png、jpg、bmp、svg和gif。
ArkTS卡片上支持gif图片格式动效，但仅在显示时播放一次。
ArkTS卡片上不支持http://等网络相关路径前缀、datashare://路径前缀以及file://data/storage路径前缀的字符串。
ArkTS卡片上不支持 PixelMap类型。

图片资源

存档图类型数据源

存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库datashare资源和base64。

本地资源创建文件夹，将本地图片放入ets文件夹下的任意位置。Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）。

Image('images/view.jpg') 
.width(200)

网络资源引入网络图片需申请权限ohos.permission.INTERNET，此时，Image组件的src参数为网络图片的链接。

Image('https://www.example.com/example.JPG') // 实际使用时请替换为真实地址

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

1. 图片路径为resources/base/media

Image($r('app.media.cat'))

2. 还可以将图片放在rawfile文件夹下，此时图片需要加后缀名

Image($rawfile('cat.jpg'))

媒体库datashare

使用picker模块可选择图库中的图片，返回图片url，用于界面上的显示

1. 调用接口获取图库照片的url

import picker from '@ohos.file.picker'; 
  
@Entry 
@Component 
struct Index { 
  @State imgDatas: string[] = []; 
  // 获取照片url集 
  getAllImg() { 
    let photoPicker = new picker.PhotoViewPicker(); 
    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%') 
  } 
}

2. 从媒体库获取的url格式通常如下。

Image('file://media/5') 
.width(200)

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

多媒体像素图

PixelMap是图片解码后的像素图，以下示例将本地rawfile文件夹下的图片解码成PixelMap格式，再显示在Image组件上。

1. 解码

  const context = getContext(this); 
    const resourceMgr = context.resourceManager; 
    resourceMgr.getRawFileContent(this.rawImageName).then(data => { 
      const buffer = data.buffer; 
      const imageSource = image.createImageSource(buffer); 
      let decodingOptions = { 
        sampleSize:16, // 缩略图采样大小 
        editable: true, // 是否可编辑 
        desiredSize:{ width:1, height:2}, // 期望输出大小 
        rotateDegrees:10, // 旋转角度 
        desiredPixelFormat:2, // 解码的像素格式 
        desiredRegion: { size: { height: 1, width: 2 }, x: 0, y: 0 }, // 解码的区域 
        index:0 // 图片序号 
      }; 
  
      imageSource.createPixelMap(decodingOptions, (err, pixelmap) => { 
        if (err) { 
          console.log('pixelMapExample: ' + JSON.stringify(err)); 
          return; 
        } 
        this.processedMap = pixelmap; 
        console.log('pixelMapExample: success') 
        callback(); 
      })

2. 显示

Image(this.processedMap)

图片的一些属性

alt: string | Resource 加载时显示的占位图，支持本地图片。

objectFit: ImageFit 设置图片的缩放类型。

名称	描述
Contain	保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
Cover	保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
Auto	自适应显示
Fill	不保持宽高比进行放大缩小，使得图片充满显示边界。
ScaleDown	保持宽高比显示，图片缩小或者保持不变。
None	保持原有尺寸显示。

opacity: number | Resource 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。默认值：1

blur: number 取值范围大于等于0，为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

grayscale: 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。

brightness: 为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑，大于1时亮度增加，数值越大亮度越大。

图片解码

解码支持的文件包括png,jpeg,bmp,gif,webp,RAW。

1. 导入image模块

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

2. 创建ImageSource 使用image.createImageSource(src: urlString | fdNumber | arrayBuffer)创建ImageSource

const resourceMgr = getContext(this).resourceManager; 
resourceMgr.getRawFileContent('decode.png').then(data => { 
      const imageSource = image.createImageSource(buffer); 
  }

3. 创建PixekMap

 let decodingOptions = { 
        sampleSize:16, // 缩略图采样大小 
        editable: true, // 是否可编辑 
        desiredSize:{ width:1, height:2}, // 期望输出大小 
        rotateDegrees:10, // 旋转角度 
        desiredPixelFormat:2, // 解码的像素格式 
        desiredRegion: { size: { height: 1, width: 2 }, x: 0, y: 0 }, // 解码的区域 
        index:0 // 图片序号 
      }; 
  
      imageSource.createPixelMap(decodingOptions, (err, pixelmap) => { 
        //其他操作 
      })

图片处理

利用之前解码出来的pixelMap，我们可以对图片进行一些效果处理，例如旋转、缩放、翻转等。

接口功能	API名称
设置透明度	opacity(rate: number)
缩放	scale(x: number, y: number)
平移	translate(x: number, y: number)
旋转	rotate(angle: number)
翻转	flip(horizontal: boolean, vertical: boolean)
裁剪	crop(region: Region)

示例

pixelMap.flip(false, true)

图片编码

1. 导入image模块

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

2. 打包PixelMap

const imagePcaker = image.createImagePacker(); 
const packOptions: image.PackingOption = { 
  format: 'image/jpeg', 
  quality: 100 
} 
const imageData = imagePacker.packing(pixelMap, packOptions);

生成图片

1. 导入mediaLibrary和fs模块

import mediaLibrary from '@ohos.multimedia.mediaLibrary'; 
import fs from '@ohos.file.fs';

2. 创建图片资源需要申请‘ohos.permission.READ_MEDIA’，‘ohos.permission.WRITE_MEDIA’，'ohos.permission.MEDIA_LOCATION’权限

const media = mediaLibrary.getMediaLibrary(getContext(this)); 
//获取图库路径 
const path = await media.getPublicDirectory(mediaLibrary.DirectoryType.DIR_IMAGE); 
//创建图片资源 
cosnt imageAsset = await media.createAsset( 
mediaLibrary.MediaType.IMAGE, 
'test.jpg', 
path);

3. 写入数据

const imageFd = await imageAsset.open('rw'); 
await fs.write(imageFd, imageData); 
await imageAssetInfo.close(imageFd); 
imagePacker.release(); 
await media.release();

2024-05-27 21:23:26

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

图形图像开发场景实践

订阅鸿蒙技术特刊，精选内容抢先看