自学记录HarmonyOS Next Image API 13:图像处理与传输的开发实践

简介: 在完成数字版权管理(DRM)项目后,我决定挑战HarmonyOS Next的图像处理功能,学习Image API和SendableImage API。这两个API支持图像加载、编辑、存储及跨设备发送共享。我计划开发一个简单的图像编辑与发送工具,实现图像裁剪、缩放及跨设备共享功能。通过研究,我深刻体会到HarmonyOS的强大设计,未来这些功能可应用于照片编辑、媒体共享等场景。如果你对图像处理感兴趣,不妨一起探索更多高级特性,共同进步。

在完成了数字版权管理(DRM)的项目后,我对HarmonyOS Next的API设计和功能深度有了更多的信心。这次,我决定挑战图像处理相关的功能,学习一下Image API和SendableImage API。当然依然是最新的API 13。

这两个API提供了处理和发送图像的强大能力,支持图像的加载、编辑、存储以及通过跨设备发送共享。我决定实现一个简单的图像编辑与发送工具,包括图像的裁剪、缩放以及通过SendableImage在设备之间共享的功能。


第一步:理解Image API和SendableImage API

Image API

Image API 主要用于图像的加载、编辑和格式转换。它允许开发者对图像进行操作,例如:

  • 裁剪
  • 缩放
  • 转换为不同格式(如PNG、JPEG等)


SendableImage API

SendableImage API 是为图像的跨设备传输设计的。它支持:

  • 将图像数据打包成可发送的格式
  • 通过鸿蒙的跨设备能力进行图像共享

结合这两个API,我计划开发一个包含图像编辑和发送功能的应用。


第二步:项目初始化与配置

在HarmonyOS Next中,确保应用拥有所需权限。

配置权限

在config.json中添加以下内容:

{
  "module": {
    "abilities": [
      {
        "name": "ImageAppAbility",
        "permissions": [
          "ohos.permission.READ_MEDIA",
          "ohos.permission.WRITE_MEDIA",
          "ohos.permission.DISTRIBUTED_DATASYNC"
        ]
      }
    ]
  }
}


第三步:图像加载与编辑

图像加载

首先,通过Image API加载图像。

import image from '@ohos.image';
async function loadImage(filePath: string) {
    try {
        const img = await image.createImageSource(filePath);
        console.info('图像加载成功:', filePath);
        return img;
    } catch (error) {
        console.error('图像加载失败:', error);
    }
}

图像裁剪与缩放

使用Image API对图像进行裁剪和缩放:

async function editImage(imgSource, cropRect, scaleFactor) {
    try {
        const croppedImg = await imgSource.crop(cropRect);
        console.info('图像裁剪成功');
        const scaledImg = await croppedImg.scale(scaleFactor);
        console.info('图像缩放成功');
        return scaledImg;
    } catch (error) {
        console.error('图像编辑失败:', error);
    }
}


第四步:图像保存

编辑完成的图像可以通过Image API保存为指定格式。

async function saveImage(imgSource, outputPath: string, format: string) {
    try {
        await imgSource.save(outputPath, format);
        console.info('图像保存成功:', outputPath);
    } catch (error) {
        console.error('图像保存失败:', error);
    }
}


第五步:通过SendableImage API实现图像发送

创建可发送图像

通过SendableImage API将图像包装成可发送格式。

import sendableImage from '@ohos.sendableimage';
async function createSendableImage(filePath: string) {
    try {
        const sendableImg = await sendableImage.createSendableImage(filePath);
        console.info('SendableImage创建成功');
        return sendableImg;
    } catch (error) {
        console.error('SendableImage创建失败:', error);
    }
}

跨设备发送图像

利用鸿蒙分布式能力将图像发送到其他设备。

async function sendImage(sendableImg, targetDeviceId: string) {
    try {
        await sendableImg.send(targetDeviceId);
        console.info('图像发送成功');
    } catch (error) {
        console.error('图像发送失败:', error);
    }
}


第六步:构建用户界面

在HarmonyOS Next中,界面通过ArkTS和ArkUI实现。

界面布局

import { View, Text, Button, Image } from '@ohos.arkui';
export default View.create({
    build() {
        return (
            {
                type: "flex",
                flexDirection: "column",
                children: [
                    {
                        type: Text,
                        content: "图像处理与发送",
                        style: { height: "50vp", fontSize: "20vp", textAlign: "center" },
                    },
                    {
                        type: Button,
                        content: "加载图像",
                        style: { height: "50vp", marginTop: "20vp" },
                        onClick: this.onLoadImage
                    },
                    {
                        type: Button,
                        content: "编辑图像",
                        style: { height: "50vp", marginTop: "10vp" },
                        onClick: this.onEditImage
                    },
                    {
                        type: Button,
                        content: "发送图像",
                        style: { height: "50vp", marginTop: "10vp" },
                        onClick: this.onSendImage
                    }
                ]
            }
        );
    },
    async onLoadImage() {
        const filePath = '/data/media/sample.jpg';
        this.imgSource = await loadImage(filePath);
    },
    async onEditImage() {
        const cropRect = { x: 10, y: 10, width: 100, height: 100 };
        const scaleFactor = 2.0;
        this.editedImage = await editImage(this.imgSource, cropRect, scaleFactor);
        await saveImage(this.editedImage, '/data/media/edited.jpg', 'jpeg');
    },
    async onSendImage() {
        const sendableImg = await createSendableImage('/data/media/edited.jpg');
        const targetDeviceId = 'device123';
        await sendImage(sendableImg, targetDeviceId);
    }
});


最后的小感悟

通过自己的研究,还是发现了其强大的能力。从图像加载到编辑,再到分布式传输,每一个环节都体现了HarmonyOS的设计精妙。

未来,这些功能可以广泛应用于照片编辑、媒体共享和分布式协作场景。如果你也对图像处理感兴趣,不妨从这些基础功能开始,探索更多高级特性,打造属于自己的创新应用。

当然如果你也在这一领域研究,不妨关注我,我们一起进步~!

目录
打赏
0
9
11
0
163
分享
相关文章
HarmonyOS Next 简单上手元服务开发
本文介绍了 HarmonyOS Next 中元服务的开发流程与关键特性。元服务是一种轻量级应用程序形态,支持免安装、秒开直达,适用于听音乐、打车等场景,大幅提升服务获取效率。文章详细讲解了元服务的开发旅程,包括在 AGC 平台上新建项目、修改名称与图标、新增卡片等内容,并提供了代码示例,如 AtomicServiceTabs 的 tab 切换和标题设置、AtomicServiceNavigation 的路由管理等。此外,还探讨了 AtomicServiceWeb 的使用方法,涵盖鸿蒙页面与 h5 页面的数据传递及方法调用。
52 19
HarmonyOS Next 简单上手元服务开发
|
21小时前
HarmonyOS NEXT - ArkUI: Text组件
Text组件用于展示文本信息并支持子组件Span,可配置多种样式属性。包括设置文本颜色(.fontColor)、尺寸(.fontSize)、字体样式(.fontStyle)、粗细(.fontWeight)、主题(.fontFamily)等。此外,还支持文本对齐(.textAlign)、超长处理(.textOverflow与.maxLines配合)、装饰线(.decoration)等功能。示例代码展示了如何应用这些属性实现丰富的文本效果。
95 71
|
1天前
|
HarmonyOS NEXT条件语句和循环迭代
本内容介绍了条件语句、循环迭代和`switch...case`语句的使用规则与示例。条件语句支持`if`、`else if`和`else`,可结合状态变量或常规变量实现动态UI渲染,并在容器组件中构建不同子组件。`switch...case`用于多分支判断,简化复杂逻辑。循环迭代部分展示了`while`、`do while`、`for`、`for in`和`for of`等语法,适用于数组、字符串等可迭代对象的遍历操作。这些基础语法是构建高效程序的核心工具。
21 11
|
1天前
|
HarmonyOS NEXT数据类型和类
本内容介绍了 TypeScript 的核心概念与语法,包括数据类型(布尔、数字、字符串、数组、元组、枚举、联合类型等)、类的定义与继承、模块的导入与导出,以及接口的使用。通过示例展示了如何声明变量、定义类及其方法、实现继承关系,并利用 `export` 和 `import` 进行模块化开发。此外,还通过接口规范了对象的行为,确保代码的可维护性和扩展性。这些功能共同构成了 TypeScript 强大的类型检查与面向对象编程基础。
20 11
了解HarmonyOS NEXT IDE: DevEco Studio
HUAWEI DevEco Studio 是基于 IntelliJ IDEA Community 开源版本打造的 HarmonyOS 应用开发平台,支持 ArkTS、JS、C/C++ 等语言。它提供高效智能代码编辑、多端双向实时预览、多端设备模拟仿真及性能调优功能,助力开发者快速构建应用。IDE 界面分为四部分,包含工具栏、预览器等功能;支持快捷键操作,如代码查找 (双击 Shift)、格式化 (Ctrl+Alt+L) 等,提升开发效率。选择“Help”→“Quick Start”可快速入门,帮助开发者熟悉 HarmonyOS 应用开发流程。
29 11
了解HarmonyOS NEXT工程目录结构
本指南介绍了如何在DevEco Studio中创建第一个HarmonyOS工程,包括项目配置(如项目名称、包名、模块名称等)、设备类型选择以及工程同步。同时展示了基本代码示例,实现“Hello World”功能,并详细解析了工程目录结构。其中,`AppScope`为自动生成目录,`entry`为主模块,包含代码与资源文件;`oh_modules`存放依赖包,`app.json5`和`module.json5`分别用于全局和模块配置。此外,还说明了`ets`目录下的Ability逻辑管理、UI页面代码组织及资源文件存储方式,帮助开发者快速了解HarmonyOS应用开发基础。
80 60
|
22小时前
|
API
HarmonyOS NEXT - 页面路由
在HarmonyOS应用开发中,项目创建时会自动生成入口文件`EntryAbility.ts`和首页`Index`。通过`@ohos.router`模块,可实现页面间的灵活跳转。常用方法包括:`pushUrl`(跳转新页面)、`replaceUrl`(替换当前页面)、`back`(返回上一页)和`clear`(清空历史记录)。示例演示了从首页到登录页再到个人中心页的跳转逻辑,结合条件判断与路由方法,展示了实际应用场景下的页面导航功能。
21 10
|
23小时前
|
HarmonyOS NEXT - Stage模型和应用/组件级配置
HarmonyOS 的 Stage 模型从 API 9 开始引入,是当前主推的应用模型。它通过 AbilityStage 和 WindowStage 等类为应用组件和窗口提供“舞台”。UIAbility 是包含用户界面的应用组件,用于与用户交互。 配置文件中,`AppScope/app.json5` 定义应用级图标和标签,而 `module.json5` 配置入口图标和标签。若配置了入口图标和标签,则会覆盖应用图标和标签,且未配置入口图标和标签会导致报错。JSON5 文件还定义了模块类型、设备支持、页面及能力(如 EntryAbility 和扩展能力 EntryBackupAbility)。
22 10
|
23小时前
|
HarmonyOS NEXT函数和自定义构建函数
本内容分为两部分:第一部分介绍了TypeScript中的函数用法,包括有名函数、匿名函数(lambda表达式)、类型检查、可选参数和剩余参数等特性,并通过代码示例展示了其功能与限制。第二部分讲解了ArkUI框架中的自定义构建函数(@Builder),说明了其作为轻量级UI复用机制的作用,支持私有和全局两种定义方式,并详细描述了参数传递规则,包括按值传递和按引用传递的条件及约束。
21 12
为什么学习HarmonyOS NEXT?
HarmonyOS NEXT是华为推出的下一代操作系统,采用分布式架构,支持跨设备协同与全场景覆盖,包括智能手机、智能家居等多类型终端。其统一开发框架和API简化了跨平台开发流程,同时在安全性、性能优化方面表现突出。学习HarmonyOS NEXT,不仅能掌握前沿技术,还能把握物联网时代的发展机遇,融入华为生态,拓展教育、智能家居等领域的应用前景。开发者可通过DevEco Studio官网下载工具,开启HarmonyOS开发之旅。
75 56