1# Using Image to Transform Images
2
3You will learn how to use native image APIs to process images.
4
5## How to Develop
6
7**Adding Dependencies**
8
9Open the **src/main/cpp/CMakeLists.txt** file of the native project, add **libace_napi.z.so** and **libpixelmap_ndk.z.so** (on both of which the image APIs depend) and **libhilog_ndk.z.so** (on which the log APIs depend) to the **target_link_libraries** dependency.
10
11```txt
12target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so libpixelmap_ndk.z.so)
13```
14
15**Adding API Mappings**
16
17Open the **src/main/cpp/hello.cpp** file and add the following API mappings to the **Init** function:
18
19```c++
20EXTERN_C_START
21static napi_value Init(napi_env env, napi_value exports)
22{
23    napi_property_descriptor desc[] = {
24        { "testGetImageInfo", nullptr, TestGetImageInfo, nullptr, nullptr, nullptr, napi_default, nullptr },
25        { "testAccessPixels", nullptr, TestAccessPixels, nullptr, nullptr, nullptr, napi_default, nullptr },
26        { "testUnAccessPixels", nullptr, TestUnAccessPixels, nullptr, nullptr, nullptr, napi_default, nullptr },
27    };
28
29    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
30    return exports;
31}
32EXTERN_C_END
33```
34
35**Calling the Native APIs**
36
37For details about the APIs, see [Image](../../reference/apis-image-kit/image.md).
38
39Obtain the JS resource object from the **hello.cpp** file and convert it to a native resource object. Then you can call native APIs. The sample code is as follows:
40
41Open **src/main/cpp/hello.cpp**, and add the reference file.
42
43```c++
44#include<multimedia/image_framework/image_pixel_map_napi.h>
45```
46
471. Obtain the **PixelMap** information and store the information to the **OhosPixelMapInfo** struct.
48
49   ```c++
50   static napi_value TestGetImageInfo(napi_env env, napi_callback_info info)
51    {
52        napi_value result = nullptr;
53        napi_get_undefined(env, &result);
54
55        napi_value thisVar = nullptr;
56        napi_value argValue[1] = {0};
57        size_t argCount = 1;
58
59        napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);
60
61        OHOS::Media::OhosPixelMapInfo pixelMapInfo;
62        OHOS::Media::OH_GetImageInfo(env, argValue[0], &pixelMapInfo);
63        return result;
64    }
65    ```
66
672. Obtain the memory address of a **PixelMap** object and lock the memory.
68
69    ```c++
70    static napi_value TestAccessPixels(napi_env env, napi_callback_info info)
71    {
72        napi_value result = nullptr;
73        napi_get_undefined(env, &result);
74
75        napi_value thisVar = nullptr;
76        napi_value argValue[1] = {0};
77        size_t argCount = 1;
78
79        napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);
80
81        void* addrPtr = nullptr;
82        OHOS::Media::OH_AccessPixels(env, argValue[0], &addrPtr);
83        return result;
84    }
85    ```
86
873. Unlock the memory of the **PixelMap** object.
88
89    ```c++
90    static napi_value TestUnAccessPixels(napi_env env, napi_callback_info info)
91    {
92        napi_value result = nullptr;
93        napi_get_undefined(env, &result);
94
95        napi_value thisVar = nullptr;
96        napi_value argValue[1] = {0};
97        size_t argCount = 1;
98
99        napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);
100
101        OHOS::Media::OH_UnAccessPixels(env, argValue[0]);
102        return result;
103    }
104    ```
105
106**Calling APIs on the JS Side**
107
1081. Open **src\main\cpp\types\*libentry*\index.d.ts** (where **libentry** varies according to the project name), and import the following files:
109
110    ```js
111    import { image } from '@kit.ImageKit';
112    export const add:(a: number, b: number) => image.PixelMap;
113    export const transform: (a: image.PixelMap) => image.PixelMap;
114    export const testGetImageInfo: (a: image.PixelMap) => image.PixelMap;
115    export const testAccessPixels: (a: image.PixelMap) => image.PixelMap;
116    export const testUnAccessPixels: (a: image.PixelMap) => image.PixelMap;
117    ```
118
1192. Open **src\main\ets\pages\index.ets**, import ***libentry*.so** (where **libentry** varies according to the project name), call the native APIs, and pass in the JS resource object. The sample code is as follows:
120
121    ```js
122    import testNapi from 'libentry.so'
123    import { image } from '@kit.ImageKit';
124
125    @Entry
126    @Component
127    struct Index {
128    @State message: string = 'IMAGE'
129    @State _PixelMap : image.PixelMap | undefined = undefined;
130
131    build() {
132        Row() {
133        Column() {
134            Button(this.message)
135            .fontSize(50)
136            .fontWeight(FontWeight.Bold)
137            .onClick(() => {
138                const color : ArrayBuffer = new ArrayBuffer(96);
139                let opts: image.InitializationOptions = { alphaType: 0, editable: true, pixelFormat: 4, scaleMode: 1, size: { height: 4, width: 6 } }
140                image.createPixelMap(color, opts)
141                .then( (pixelmap : image.PixelMap) => {
142                    this._PixelMap = pixelmap;
143                    testNapi.testGetImageInfo(this._PixelMap);
144                    console.info("Test GetImageInfo success");
145
146                    testNapi.testAccessPixels(this._PixelMap);
147                    console.info("Test AccessPixels success");
148
149                    testNapi.testUnAccessPixels(this._PixelMap);
150                    console.info("Test UnAccessPixels success");
151                })
152            })
153        }
154        .width('100%')
155        }
156        .height('100%')
157    }
158    }
159    ```
160