自学记录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
166
分享
相关文章
|
28天前
|
鸿蒙开发:资讯项目实战之项目初始化搭建
目前来说,我们的资讯项目只是往前迈了很小的一步,仅仅实现了项目创建,步虽小,但概念性的知识很多,这也是这个项目的初衷,让大家不仅仅可以掌握日常的技术开发,也能让大家理解实际的项目开发知识。
鸿蒙开发:资讯项目实战之项目初始化搭建
鸿蒙开发:基于最新API,如何实现组件化运行
手动只是让大家了解切换的原理,在实际开发中,可不推荐手动,下篇文章,我们将通过脚本或者插件,快速实现组件化模块之间的切换,实现独立运行,敬请期待!
鸿蒙开发:基于最新API,如何实现组件化运行
HarmonyOS Next快速入门:了解项目工程目录结构
本教程旨在帮助开发者快速上手HarmonyOS应用开发,涵盖从环境搭建到工程创建的全流程。通过DevEco Studio创建首个项目时,选择“Application”与“Empty Ability”,配置项目名称、包名、保存路径等关键信息后完成创建。代码示例展示了基本UI组件的使用,如`Hello World`文本显示与交互逻辑。此外,详细解析了工程目录结构,包括AppScope自动生成规则、主模块(entry)的功能划分、依赖配置文件(oh-package.json5)的作用,以及app.json5中包名、版本号等全局配置项的含义。
70 5
|
22天前
|
HarmonyOS Next快速入门:通用属性
本教程以《HarmonyOS Next快速入门》为基础,涵盖应用开发核心技能。通过代码实例讲解尺寸、位置、布局约束、Flex布局、边框、背景及图像效果等属性设置方法。如`.width()`调整宽度,`.align()`设定对齐方式,`.border()`配置边框样式,以及模糊、阴影等视觉效果的实现。结合实际案例,帮助开发者掌握HarmonyOS组件属性的灵活运用,提升开发效率与用户体验。适合初学者及进阶开发者学习。
64 0
|
22天前
|
HarmonyOS Next快速入门:通用事件
本教程聚焦HarmonyOS应用开发,涵盖事件处理的核心内容。包括事件分发、触屏事件、键鼠事件、焦点事件及拖拽事件等。通过代码实例讲解点击事件、触控事件(Down/Move/Up)、获焦与失焦事件的处理逻辑,以及气泡弹窗的应用。适合开发者快速掌握HarmonyOS Next中通用事件的使用方法,提升应用交互体验。
60 0
|
23天前
|
HarmonyOS Next快速入门:Button组件
本教程摘自《HarmonyOS Next快速入门》,聚焦HarmonyOS应用开发中的Button组件。Button支持胶囊、圆形和普通三种类型,可通过子组件实现复杂功能,如嵌入图片或文字。支持自定义样式(边框弧度、文本样式、背景色等)及点击事件处理。示例代码展示了不同类型按钮的创建与交互逻辑,助开发者快速上手。适合HarmonyOS初学者及对UI组件感兴趣的开发者学习。
67 0
|
23天前
|
HarmonyOS Next快速入门:Image组件
本教程摘自《HarmonyOS Next快速入门》,专注于HarmonyOS应用开发中的Image组件使用。Image组件支持多种图片格式(如png、jpg、svg等),可渲染本地资源、网络图片、媒体库文件及PixelMap像素图。通过设置`objectFit`属性,实现不同缩放类型;利用`fillColor`属性调整矢量图颜色。示例代码涵盖本地、网络及资源图片的加载与样式设置,同时需在`module.json5`中声明网络权限以加载外部资源。适合开发者快速掌握HarmonyOS图像展示功能。
75 0
淘宝商品评论API接口,json数据示例参考
淘宝开放平台提供了多种API接口来获取商品评论数据,其中taobao.item.reviews.get是一个常用的接口,用于获取指定商品的评论信息。以下是关于该接口的详细介绍和使用方法:
1688API最新指南:商品详情接口接入与应用
本指南介绍1688商品详情接口的接入与应用,该接口可获取商品标题、价格、规格、库存等详细信息,适用于电商平台开发、数据分析等场景。接口通过商品唯一标识查询,支持HTTP GET/POST请求,返回JSON格式数据,助力开发者高效利用1688海量商品资源。
京东API接口最新指南:店铺所有商品接口的接入与使用
本文介绍京东店铺商品数据接口的应用与功能。通过该接口,商家可自动化获取店铺内所有商品的详细信息,包括基本信息、销售数据及库存状态等,为营销策略制定提供数据支持。此接口采用HTTP请求(GET/POST),需携带店铺ID和授权令牌等参数,返回JSON格式数据,便于解析处理。这对于电商运营、数据分析及竞品研究具有重要价值。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问