鸿蒙（API 12 Beta3版）【使用ImageSource完成图片解码】图片开发指导

Android技术栈2024-08-21 21:45

图片解码指将所支持格式的存档图片解码成统一的[PixelMap]，以便在应用或系统中进行图片显示或[图片处理]。当前支持的存档图片格式包括JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG。

开发步骤

  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 } from '@kit.CoreFileKit';

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

// Stage模型参考如下代码
const context = getContext(this);
const filePath = context.cacheDir + '/test.jpg';
const file : fileIo.File = fileIo.openSync(filePath, fileIo.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。具体请参考[ResourceManager API参考文档]

    // 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")
});
  1. 创建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);

  1. 设置解码参数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对象后，可以进行后续[图片处理]

  1. 释放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")
    });

  1. 创建pixelMap。

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

  2. 释放pixelMap。

    pixelMap.release();

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档 》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

  • 《鸿蒙 (OpenHarmony)开发学习视频》
  • 《鸿蒙生态应用开发V2.0白皮书》
  • 《鸿蒙 (OpenHarmony)开发基础到实战手册》
  • OpenHarmony北向、南向开发环境搭建
  • 《鸿蒙开发基础》
  • 《鸿蒙开发进阶》
  • 《鸿蒙开发实战》

总结

鸿蒙---作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿

相关推荐
AORO_BEIDOU1 小时前
单北斗+鸿蒙系统+国产芯片，遨游防爆手机自主可控“三保险”
华为·智能手机·harmonyos
博览鸿蒙2 小时前
鸿蒙操作系统（HarmonyOS）的应用开发入门
华为·harmonyos
Damon小智9 小时前
HarmonyOS NEXT 技术实践-基于基础视觉服务的多目标识别
华为·harmonyos
璀璨星輝1 天前
安全删除硬件并弹出媒体（弹出显卡）问题处理
媒体
爱笑的眼睛111 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
K.P1 天前
鸿蒙元服务从0到上架【第三篇】（第二招有捷径）
华为·harmonyos·鸿蒙系统
K.P1 天前
鸿蒙元服务从0到上架【第二篇】
华为·harmonyos·鸿蒙系统
敲代码的小强1 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
程序猿会指北1 天前
纯血鸿蒙APP实战开发——Text实现部分文本高亮和超链接样式
移动开发·harmonyos·arkts·openharmony·arkui·组件化·鸿蒙开发
鸿蒙自习室1 天前
鸿蒙开发——关系型数据库的基本使用与跨设备同步
前端·数据库·华为·harmonyos·鸿蒙
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）