鸿蒙5.0版开发：图片开发(ArkTS)-使用ImageSource完成图片解码

最新推荐文章于 2025-03-26 21:23:27 发布
最新推荐文章于 2025-03-26 21:23:27 发布
阅读量1.2k 收藏 8
点赞数 14
分类专栏： 鸿蒙5.0开发 ArkTS组件 文章标签： harmonyos 华为 数码相机 音视频 c++ ArkTS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/143019754
版权

 往期鸿蒙全套实战文章必看：

使用ImageSource完成图片解码

图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG、HEIF(不同硬件设备支持情况不同)。

开发步骤

图片解码相关API的详细介绍。

  1. 全局导入Image模块。

    import { image } from '@kit.ImageKit';

  2. 获取图片。

    • 方法一：获取沙箱路径。应用沙箱的介绍及如何向应用沙箱推送文件。

      // Stage模型参考如下代码
const context : Context = getContext(this);
const filePath : string = context.cacheDir + '/test.jpg';
      // FA模型参考如下代码
import { featureAbility } from '@kit.AbilityKit';

const context = featureAbility.getContext();
const filePath = context.getCacheDir() + "/test.jpg";

    • 方法二：通过沙箱路径获取图片的文件描述符。

      该方法需要先导入@kit.CoreFileKit模块。

      import { fileIo as fs } from '@kit.CoreFileKit';

      然后调用fs.openSync()获取文件描述符。

      // Stage模型参考如下代码
const context = getContext(this);
const filePath = context.cacheDir + '/test.jpg';
const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
const fd : number = file?.fd;
      // FA模型参考如下代码
import { featureAbility } from '@kit.AbilityKit';

const context = featureAbility.getContext();
const filePath = context.getCacheDir() + "/test.jpg";
const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
const fd : number = file?.fd;

    • 方法三：通过资源管理器获取资源文件的ArrayBuffer。

      // Stage模型
const context : Context = getContext(this);
// 获取resourceManager资源管理器
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
      // FA模型
// 导入resourceManager资源管理器
import { resourceManager } from '@kit.LocalizationKit';
import { BusinessError } from '@kit.BasicServicesKit';
resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
   console.log("Succeeded in getting resourceManager")
}).catch((err : BusinessError) => {
   console.error("Failed to get resourceManager")
});

      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。

      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
   console.log("Succeeded in getting RawFileContent")
   // 获取图片的ArrayBuffer
   const buffer = fileData.buffer.slice(0);
}).catch((err : BusinessError) => {
   console.error("Failed to get RawFileContent")
});

    • 方法四：通过资源管理器获取资源文件的RawFileDescriptor。

      // Stage模型
const context : Context = getContext(this);
// 获取resourceManager资源管理器
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
      // FA模型
// 导入resourceManager资源管理器
import { resourceManager } from '@kit.LocalizationKit';
import { BusinessError } from '@kit.BasicServicesKit';
resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
   console.log("Succeeded in getting resourceManager")
}).catch((err : BusinessError) => {
   console.error("Failed to get resourceManager")
});

      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。

      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
   console.log("Succeeded in getting RawFileDescriptor")
}).catch((err : BusinessError) => {
   console.error("Failed to get RawFileDescriptor")
});

  3. 创建ImageSource实例。

    • 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。

      // path为已获得的沙箱路径
const imageSource : image.ImageSource = image.createImageSource(filePath);

    • 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。

      // fd为已获得的文件描述符
const imageSource : image.ImageSource = image.createImageSource(fd);

    • 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。

      const imageSource : image.ImageSource = image.createImageSource(buffer);

    • 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方法四获取。

      const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);

  4. 设置解码参数DecodingOptions，解码获取pixelMap图片对象。

    • 设置期望的format进行解码： 
      import { BusinessError } from '@kit.BasicServicesKit';
import image from '@ohos.multimedia.image';
let img = await getContext(this).resourceManager.getMediaContent($r('app.media.image'));
let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
let decodingOptions : image.DecodingOptions = {
   editable: true,
   desiredPixelFormat: 3,
}
// 创建pixelMap
imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
}).catch((err : BusinessError) => {
   console.error("Failed to create PixelMap")
});
    • HDR图片解码 
      import { BusinessError } from '@kit.BasicServicesKit';
import image from '@ohos.multimedia.image';
let img = await getContext(this).resourceManager.getMediaContent($r('app.media.CUVAHdr'));
let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
let decodingOptions : image.DecodingOptions = {
   //设置为AUTO会根据图片资源格式解码，如果图片资源为HDR资源则会解码为HDR的pixelmap。
   desiredDynamicRange: image.DecodingDynamicRange.AUTO,
}
// 创建pixelMap
imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
   // 判断pixelmap是否为hdr内容
   let info = pixelMap.getImageInfoSync();
   console.log("pixelmap isHdr:" + info.isHdr);
}).catch((err : BusinessError) => {
   console.error("Failed to create PixelMap")
});

    解码完成，获取到pixelMap对象后，可以进行后续图片处理。

  5. 释放pixelMap。

    pixelMap.release();

开发示例-对资源文件中的图片进行解码

  1. 获取resourceManager资源管理。

    const context : Context = getContext(this);
// 获取resourceManager资源管理
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

  2. 创建ImageSource。

    • 通过rawfile文件夹下test.jpg的ArrayBuffer创建。

       resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
    console.log("Succeeded in getting RawFileContent")
    // 获取图片的ArrayBuffer
    const buffer = fileData.buffer.slice(0);
    const imageSource : image.ImageSource = image.createImageSource(buffer);
 }).catch((err : BusinessError) => {
    console.error("Failed to get RawFileContent")
 });

    • 通过rawfile文件夹下test.jpg的RawFileDescriptor创建。

       resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
    console.log("Succeeded in getting RawFd")
    const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
 }).catch((err : BusinessError) => {
    console.error("Failed to get RawFd")
 });

  3. 创建pixelMap。

    imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
}).catch((err : BusinessError) => {
   console.error("Failed to creating PixelMap")
});

  4. 释放pixelMap。

    pixelMap.release();

OpenHarmony实战开发-图片解码(ArkTS)如何实现图片显示或图片处理。
2401_82546228的博客
05-15 1981
图片解码指将所支持格式的存档图片解码成统一的PixelMap，以便在应用或系统中进行图片显示或图片处理。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG、ICO。
第20讲 arkts 如何读取图片资源
m0_60889254的博客
11-08 764
这种方式需要注意的是，绝对路径可能会因设备和环境的不同而有所变化，可能会导致在不同设备。这种方式需要先获取资源管理器实例，然后使用资源管理器的方法来获取图片资源的源，再将其传。这里假设使用了相应的模块加载器和配置，使得能够以这种方式导入图片资源。中读取图片资源的常见方法，具体使用哪种方法可以根据项目的需求和实际情况来选。中，可以通过资源管理器来获取和引用图片资源。将图片文件放置在项目的合适目录下，通常可以放在。组件中，使用相对路径来引用图片。文件中，然后使用导入的模块来显示图片。上无法正确加载图片。
基础ArkTS组件：图片（HarmonyOS学习第三课【3.2】）
qq_58213084的博客
05-07 4639
srcFlex() {Flex() {: {alt：设置占位图，图片显示之前先显示占位图，比如在加载网络图片或者图片加载失败时的场景。objectFit：设置图片的放缩类型，当Image组件大小和图片大小不同时指定图片的放缩类型，ImageFitCover（默认值）：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界外。Contain：保持图片宽高比进行放缩显示，使得图片完全显示在显示边界内。Fill：不保持图片宽高比显示，是图片完全充满显示边界。
HarmonyOS NEXT鸿蒙中选择相册的一张图片并展示到界面
最新发布
weixin_50513060的博客
03-26 446
我们使用photoAccessHelper中的PhotoSelectOptions先创建一个图片参数类型，给图片选择制定规则，然后创建图片选择器，传入选择图片的规则，会返回一个图片的路径数组。在很多时候，我们都会在应用中用到系统相册选择功能，可能选择一张或多张图片，用于不同的业务功能。那么我们怎么唤起图片选择界面呢？当我们得到图片的具体uri路径的时候，我们需要先把图片转为buffer数据流。点击打开图片选择，选择完成后就会打印出图片的uri路径。直接复制到页面可用，无需权限配置。
【鸿蒙应用ArkTS开发系列】- 选择图片、文件和拍照功能实现
枫的专栏
11-28 7202
在使用App的时候，我们经常会在一些社交软件中聊天时发一些图片或者文件之类的多媒体文件，那在鸿蒙原生应用中，我们怎么开发这样的功能呢？本文会给大家对这个功能点进行讲解，我们采用的是拉起系统组件来进行图片、文件的选择，拉起系统相机进行拍照的这样一种实现方式。
鸿蒙（API 12 Beta3版）【使用ImageSource完成图片解码】图片开发指导
鸿蒙的技术博客
08-21 1258
图片解码指将所支持格式的存档图片解码成统一的[PixelMap]，以便在应用或系统中进行图片显示或[图片处理]。当前支持的存档图片格式包括JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG。
鸿蒙应用开发--将图像转换成pixelMap并且用Image组件展示: [图像源] → ImageSource → PixelMap → Image组件 → 渲染管线
2401_88846919的博客
03-08 514
在鸿蒙（HarmonyOS）的 ArkUI 框架中，Image。，这是其核心能力之一。数据，兼顾性能和用户体验。组件正确、高效地呈现。通过上述方案，可确保。
鸿蒙5.0版开发：ArkTS组件-基础组件（Image）
m0_69424697的博客
09-13 1449
Image为图片组件，常用于在应用中显示图片。
鸿蒙5.0版开发：ArkTS组件-Image
m0_69424697的博客
11-14 1157
Image为图片组件，常用于在应用中显示图片。
鸿蒙5.0开发进阶：UI框架-ArkTS组件（Image）
Androidbye的博客
01-16 857
Image为图片组件，常用于在应用中显示图片。
鸿蒙5.0版开发：ArkTS组件-ImageBitmap
m0_69424697的博客
11-20 800
ImageBitmap对象可以存储canvas渲染的像素数据。
鸿蒙5.0版开发：ArkTS组件-基础组件（ImageAnimator）
m0_69424697的博客
09-13 1117
提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。
鸿蒙HarmonyOS开发实战—多媒体开发（图像开发 一）
2301_78399616的博客
04-12 690
/ 不通过SourceOptions指定数据源格式信息。// 数据全部更新完成时需要传入isFinal为true。// 更新数据再次解码，重复调用直到数据全部更新完成。// 传入本地图片路径作为图像数据源。// 此处传入用户自定义的图像路径。// 普通解码叠加缩放、裁剪、旋转。// 获取到一定的数据时尝试解码。
鸿蒙HarmonyOS实战开发：使用ImageSource完成多图对象解码场景
m0_67143533的博客
11-27 942
​ 图片解码指将所支持格式的存档图片解码成统一的Picture。当前支持的存档图片格式包括JPEG、HEIF。 ​
OpenHarmony开发实战：图片编辑（ArkTS）
shudaoshanQAQ的博客
04-09 1779
本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了图片编辑实现过程
四、ArkTS 常用组件-图片（Image）
Harry的博客
12-10 1428
Image为图片组件，用于在应用中显示图片。显示图片 (Image): https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-image-V13。
鸿蒙arkts的图片资源引入方式和样式的复用方式
weixin_63448554的博客
12-23 3953
组件内的样式不需要使用function 关键字声明，而组件外的样式需要function声明，需要在加上@style修饰符。关于arkts语言的图片资源引入方式目前有下面三种，大家随意选用就好，都可以实现效果。大家好我是海岛，分享一下在传智博学谷学习的一些知识技术。
鸿蒙系统图像解码,#2020征文-手机#获取系统照片并解码渲染显示（附完整demo）...
weixin_31935149的博客
06-04 699
声明一下哦，这是我看了夏曹俊老师在周六的直播预习材料的加持下所写的一个小demo，大家记得都去看夏老师的直播哦，入口主页就有显示。不多说，先上demo的跑起来的效果，如下两张图：点击显示图片的按钮之后就会显示出一张图片(图片是个什么玩意，知足吧，我拿远程模拟机拍摄的)完整demo在附件中进行下载PS说一下操作步骤吧，把demo烧进手机，记住此时候的手机是没有图片的，先打开照相机拍摄一张图片，然后你...
华为 鸿蒙开发 ArkTS 怎么实现一行或者多行展示之后超出省略号（超出...）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
12-07 3001
【代码】华为 鸿蒙开发 ArkTS 怎么实现一行或者多行展示之后超出省略号（超出...）
vue打包：使用image-webpack-loader优化图片压缩
首先，你需要在项目中安装image-webpack-loader作为开发依赖，这将帮助你在编译过程中自动处理图片压缩。使用以下命令： ```bash npm install image-webpack-loader --save-dev ``` 接着，我们需要在项目的构建配置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值