鸿蒙（API 12 Beta3版）【使用Image完成图像变换】图片开发指导依赖JS对象

开发步骤

添加依赖

在进行应用开发之前，开发者需要打开native工程的src/main/cpp/CMakeLists.txt，在target_link_libraries依赖中添加image的libace_napi.z.so libpixelmap_ndk.z.so以及日志依赖libhilog_ndk.z.so。

target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so libpixelmap_ndk.z.so)

添加接口映射

打开src/main/cpp/hello.cpp文件，在Init函数中添加接口映射如下：

EXTERN_C_START
static napi_value Init(napi_env env, napi_value exports)
{
    napi_property_descriptor desc[] = {
        { "testGetImageInfo", nullptr, TestGetImageInfo, nullptr, nullptr, nullptr, napi_default, nullptr },
        { "testAccessPixels", nullptr, TestAccessPixels, nullptr, nullptr, nullptr, napi_default, nullptr },
        { "testUnAccessPixels", nullptr, TestUnAccessPixels, nullptr, nullptr, nullptr, napi_default, nullptr },
    };

    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
    return exports;
}
EXTERN_C_END

Native接口调用

在hello.cpp文件中获取JS的资源对象，并转为Native的资源对象，即可调用Native接口，调用方式示例代码如下：

打开src/main/cpp/hello.cpp，添加引用文件

#include<multimedia/image_framework/image_pixel_map_napi.h>

1. 获取PixelMap的信息，并记录信息到OhosPixelMapInfo结构中。

static napi_value TestGetImageInfo(napi_env env, napi_callback_info info)
 {
     napi_value result = nullptr;
     napi_get_undefined(env, &result);

     napi_value thisVar = nullptr;
     napi_value argValue[1] = {0};
     size_t argCount = 1;

     napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);
     
     OHOS::Media::OhosPixelMapInfo pixelMapInfo;
     OHOS::Media::OH_GetImageInfo(env, argValue[0], &pixelMapInfo);
     return result;
 }

1. 获取PixelMap对象数据的内存地址，并锁定该内存。

static napi_value TestAccessPixels(napi_env env, napi_callback_info info)
{
    napi_value result = nullptr;
    napi_get_undefined(env, &result);

    napi_value thisVar = nullptr;
    napi_value argValue[1] = {0};
    size_t argCount = 1;

    napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);

    void* addrPtr = nullptr;
    OHOS::Media::OH_AccessPixels(env, argValue[0], &addrPtr);
    return result;
}

1. 释放PixelMap对象数据的内存锁。

static napi_value TestUnAccessPixels(napi_env env, napi_callback_info info)
{
    napi_value result = nullptr;
    napi_get_undefined(env, &result);

    napi_value thisVar = nullptr;
    napi_value argValue[1] = {0};
    size_t argCount = 1;

    napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);

    OHOS::Media::OH_UnAccessPixels(env, argValue[0]);
    return result;
}

JS侧调用

1. 打开src\main\cpp\types\libentry\index.d.ts(其中libentry根据工程名生成)，导入如下引用文件:

import { image } from '@kit.ImageKit';
export const add:(a: number, b: number) => image.PixelMap;
export const transform: (a: image.PixelMap) => image.PixelMap;
export const testGetImageInfo: (a: image.PixelMap) => image.PixelMap;
export const testAccessPixels: (a: image.PixelMap) => image.PixelMap;
export const testUnAccessPixels: (a: image.PixelMap) => image.PixelMap;

1. 打开src\main\ets\pages\index.ets, 导入"libentry.so"(根据工程名生成)；调用Native接口，传入JS的资源对象。示例如下:

import testNapi from 'libentry.so'
import { image } from '@kit.ImageKit';

@Entry
@Component
struct Index {
@State message: string = 'IMAGE'
@State _PixelMap : image.PixelMap | undefined = undefined;

build() {
    Row() {
    Column() {
        Button(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
            const color : ArrayBuffer = new ArrayBuffer(96);
            let opts: image.InitializationOptions = { alphaType: 0, editable: true, pixelFormat: 4, scaleMode: 1, size: { height: 4, width: 6 } }
            image.createPixelMap(color, opts)
            .then( (pixelmap : image.PixelMap) => {
                this._PixelMap = pixelmap;
                testNapi.testGetImageInfo(this._PixelMap);
                console.info("Test GetImageInfo success");

                testNapi.testAccessPixels(this._PixelMap);
                console.info("Test AccessPixels success");

                testNapi.testUnAccessPixels(this._PixelMap);
                console.info("Test UnAccessPixels success");
            })
        })
    }
    .width('100%')
    }
    .height('100%')
}
}

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
• 《鸿蒙生态应用开发V2.0白皮书》
• 《鸿蒙 (OpenHarmony)开发基础到实战手册》
• OpenHarmony北向、南向开发环境搭建
• 《鸿蒙开发基础》
• 《鸿蒙开发进阶》
• 《鸿蒙开发实战》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿