自学记录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的设计精妙。

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

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

目录
相关文章
|
29天前
|
缓存 API 数据安全/隐私保护
自学记录:学习HarmonyOS Location Kit构建智能定位服务
作为一名对新技术充满好奇心的开发者,我选择了HarmonyOS Next 5.0.1(API 13)作为挑战对象,深入研究其强大的定位服务API——Location Kit。从权限管理、获取当前位置、逆地理编码到地理围栏,最终成功开发了一款智能定位应用。本文将结合代码和开发过程,详细讲解如何实现这些功能,并分享遇到的挫折与兴奋时刻。希望通过我的经验,能帮助其他开发者快速上手HarmonyOS开发,共同探索更多可能性。
116 5
|
28天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
90 47
Harmony OS开发-ArkTS语言速成二
|
3天前
|
监控 Cloud Native 安全
基于 API 网关践行 API First 开发实践
API First 开发模式的核心在于:以 API 为先,将其视为“头等公民”,在构建应用、服务及集成之前,应优先定义并设计 API 及其配套。API First 作为一种相对较新的开发模式,它已逐渐流行并获得业内的广泛认可。
|
29天前
|
索引 API
鸿蒙开发:自定义一个股票代码选择键盘
金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。
鸿蒙开发:自定义一个股票代码选择键盘
|
29天前
|
API
鸿蒙开发:自定义一个英文键盘
实现方式呢,有很多种,目前采用了比较简单的一种,如果大家采用网格Grid组件实现方式,也是可以的,但是需要考虑每行的边距以及数据,还有最后两行的格子占位问题。
鸿蒙开发:自定义一个英文键盘
|
29天前
|
前端开发 API 数据库
鸿蒙开发:异步并发操作
在结合async/await进行使用的时候,有一点需要注意,await关键字必须结合async,这两个是搭配使用的,缺一不可,同步风格在使用的时候,如何获取到错误呢,毕竟没有catch方法,其实,我们可以自己创建try/catch来捕获异常。
鸿蒙开发:异步并发操作
|
29天前
|
API
鸿蒙开发:实现popup弹窗
目前提供了两种方式实现popup弹窗,主推系统实现的方式,几乎能满足我们常见的所有场景,当然了,文章毕竟有限,尽量还是以官网为主。
鸿蒙开发:实现popup弹窗
|
29天前
|
API
鸿蒙开发:自定义一个车牌字母键盘
车牌字母键盘和一般的键盘还有很大区别的,大家可以发现,键盘上是少一个字母的,因为I字母具有混淆性,所以这个字母是不在车牌键盘内的。
鸿蒙开发:自定义一个车牌字母键盘
|
20天前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
41 5
|
20天前
|
开发工具 开发者 容器
【HarmonyOS NEXT开发——ArkTS语言】欢迎界面(启动加载页)的实现【合集】
从ArkTS代码架构层面而言,@Entry指明入口、@Component助力复用、@Preview便于预览,只是初窥门径,为开发流程带来些许便利。尤其动画回调与Blank组件,细节粗糙,后续定当潜心钻研,力求精进。”,字体颜色为白色,字体大小等设置与之前类似,不过动画配置有所不同,时长为。,不过这里没有看到额外的动画效果添加到这个特定的图片元素上(与前面带动画的元素对比而言)。这是一个显示文本的视图,文本内容为“奇怪的知识”,设置了字体颜色为灰色(的结构体,它代表了整个界面组件的逻辑和视图结构。
35 1