图像变换
====

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/24/v3/sy8nggsWQWOjEa06iTIqCQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073521Z&HW-CC-Expire=86400&HW-CC-Sign=8149D83D619C73C9C4E7C597976510C182B5379E996B3FA2DC1D4BCAE68A2C80)

当前开发指导使用的接口为[Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-image)模块下的C API，可完成图片编解码，图片接收器，处理图像数据等功能。这部分API在API version 11之前发布，在后续的版本不再增加新功能，**不再推荐使用**。

开发者可使用[Image\_NativeModule](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-image-nativemodule)模块下的C API，不仅提供上述图片框架基础功能，还可以完成多图编解码等新特性，相关开发指导请参考[图片开发指导(C/C++)](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-source-c)节点下的内容。这部分API从API version 12开始支持，并将持续演进，**推荐开发者使用**。

两套C API不建议同时使用，在部分场景下存在不兼容的问题。

开发者可以通过本指导了解如何使用Native Image的接口完成图像变换。

#### 开发步骤

**添加依赖**

在进行应用开发之前，开发者需要打开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接口调用**

具体接口说明请参考[Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-image)。

在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;
     }
    
2.  获取**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;
    }
    
3.  释放**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;
    
2.  打开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%')
    }
    }