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

2024-12-27
北京
本文字数：2627 字
阅读完需：约 9 分钟

在完成了数字版权管理（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 的设计精妙。

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

当然如果你也在这一领域研究，不妨关注我，我们一起进步～！

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/33abe145bb2964c3b73e144ad】。文章转载请联系作者。

李游Leo

关注

全栈开发工程师、全栈讲师、华为HDE 2022-07-14 加入

原百度、时趣互动、乐视高级前端（软件）开发工程师。后在北京一所当地大学任教，主要职务是教学主任，也为网易云课堂微专业的前端课程负责人。

发布

暂无评论

创作场景

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

第一步：理解 Image API 和 SendableImage API

Image API

SendableImage API

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

配置权限

第三步：图像加载与编辑

图像加载

图像裁剪与缩放

第四步：图像保存

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

创建可发送图像

跨设备发送图像

第六步：构建用户界面

界面布局

最后的小感悟

李游Leo

评论