当前位置：首页 > article >正文

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

article 2025/1/3 10:20:33

在完成了数字版权管理（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);
    }
});