图形图像开发场景实践

图形图像开发场景实践

HarmonyOS
2024-05-26 16:05:07
浏览
收藏 0
回答 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();
分享
微博
QQ
微信
回复
2024-05-27 21:23:26
相关问题
本地收发消息实践,谁有好的方案?
252浏览 • 1回复 待解决
Swiper轮播图带放大缩小动效实践
566浏览 • 1回复 待解决
使用Drawing进行2d图像绘制
449浏览 • 1回复 待解决
使用Drawing实现图形绘制与显示
401浏览 • 1回复 待解决
分组列表实践(嵌套列表)
481浏览 • 1回复 待解决
隐私安全页面跳转实践
1156浏览 • 1回复 待解决
XComponent、NativeDrawing实现2D图形绘制
465浏览 • 1回复 待解决
XComponent、openGL实现3D图形绘制
512浏览 • 1回复 待解决
如何获取前置摄像头的预览图像
1000浏览 • 1回复 待解决
使用Native、XComponent和EGL绘制图形
494浏览 • 1回复 待解决
ListItemGroup 和Lazyforeach结合场景
406浏览 • 1回复 待解决