1# Using Image to Process PixelMap Data
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 native image APIs depend) and **libhilog_ndk.z.so** (on which the native 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        { "createPixelMapTest", nullptr, CreatePixelMapTest, nullptr, nullptr, nullptr, napi_default, nullptr },
25        { "createAlphaPixelMap", nullptr, CreateAlphaPixelMap, nullptr, nullptr, nullptr, napi_default, nullptr },
26        { "transform", nullptr, Transform, 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 API Reference](../../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.
40
41**Adding Reference Files**
42
43```c++
44#include <multimedia/image_framework/image_mdk_common.h>
45#include <multimedia/image_framework/image_pixel_map_mdk.h>
46#include <stdlib.h>
47```
48
491. Create a **PixelMap** object.
50
51    ```c++
52    napi_value CreatePixelMapTest(napi_env env, napi_callback_info info) {
53        napi_value udfVar = nullptr;
54        napi_value pixelMap = nullptr;
55
56        struct OhosPixelMapCreateOps createOps;
57        createOps.width = 4;
58        createOps.height = 6;
59        createOps.pixelFormat = 4;
60        createOps.alphaType = 0;
61        size_t bufferSize = createOps.width * createOps.height * 4;
62        void *buff = malloc(bufferSize);
63
64        char *cc = (char *)buff;
65        for (int i = 0; i < 96; i++) {
66            *(cc++) = (char)i;
67        }
68        int32_t res = OH_PixelMap_CreatePixelMap(env, createOps, (uint8_t *)buff, bufferSize, &pixelMap);
69        if (res != IMAGE_RESULT_SUCCESS || pixelMap == nullptr) {
70            return udfVar;
71        }
72        return pixelMap;
73    }
74    ```
75
762. Create a **PixelMap** object that contains only alpha channel information.
77
78    ```c++
79    napi_value CreateAlphaPixelMap(napi_env env, napi_callback_info info) {
80        napi_value udfVar = nullptr;
81        napi_value thisVar = nullptr;
82        napi_value argValue[1] = {0};
83        size_t argCount = 1;
84
85        napi_value alphaPixelMap = nullptr;
86
87        napi_get_undefined(env, &udfVar);
88
89        if (napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr) != napi_ok || argCount < 1 ||
90            argValue[0] == nullptr) {
91            return udfVar;
92        }
93        int32_t res = OH_PixelMap_CreateAlphaPixelMap(env, argValue[0], &alphaPixelMap);
94        if (res != IMAGE_RESULT_SUCCESS || alphaPixelMap == nullptr) {
95            return udfVar;
96        }
97        return alphaPixelMap;
98    }
99    ```
100
1013. Process the **PixelMap** object.
102
103    ```c++
104    napi_value Transform(napi_env env, napi_callback_info info) {
105        napi_value thisVar = nullptr;
106        napi_value argValue[1] = {0};
107        size_t argCount = 1;
108
109        if (napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr) != napi_ok || argCount < 1 ||
110            argValue[0] == nullptr) {
111            return nullptr;
112        }
113        napi_value result = nullptr;
114        napi_get_undefined(env, &result);
115        
116        // Initialize the PixelMap object.
117        NativePixelMap *native = OH_PixelMap_InitNativePixelMap(env, argValue[0]);
118        if (native == nullptr) {
119            return result;
120        }
121
122        // Obtain image information.
123        struct OhosPixelMapInfos pixelMapInfo;
124        OH_PixelMap_GetImageInfo(native, &pixelMapInfo);
125
126        // Obtain the number of bytes per row of the PixelMap object.
127        int32_t rowBytes;
128        OH_PixelMap_GetBytesNumberPerRow(native, &rowBytes);
129
130        // Check whether the PixelMap object is editable.
131        int32_t editable = 0;
132        OH_PixelMap_GetIsEditable(native, &editable);
133
134        // Check whether the PixelMap object supports alpha channels.
135        int32_t supportAlpha = 0;
136        OH_PixelMap_IsSupportAlpha(native, &supportAlpha);
137
138        // Set an alpha channel for the PixelMap object.
139        int32_t alphaAble = 0;
140        OH_PixelMap_SetAlphaAble(native, alphaAble);
141
142        // Obtain the pixel density of the PixelMap object.
143        int32_t densityG;
144        OH_PixelMap_GetDensity(native, &densityG);
145
146        // Set the pixel density for the PixelMap object.
147        int32_t densityS = 100;
148        OH_PixelMap_SetDensity(native, densityS);
149
150        // Set the opacity for the PixelMap object.
151        float opacity = 0.5;
152        OH_PixelMap_SetOpacity(native, opacity);
153
154        // Scale the image.
155        // scaleX: The width of the image after scaling is 0.5 of the original width.
156        // scaleY: The height of the image after scaling is 0.5 of the original height.
157        float scaleX = 0.5;
158        float scaleY = 0.5;
159        OH_PixelMap_Scale(native, scaleX, scaleY);
160
161        // Translate the image.
162        // translateX: Translate the image by 50 units downwards.
163        // translateY: Translate the image by 50 units rightwards.
164        float translateX = 50;
165        float translateY = 50;
166        OH_PixelMap_Translate(native, translateX, translateY);
167
168        // Rate the image clockwise by 90°.
169        float angle = 90;
170        OH_PixelMap_Rotate(native, angle);
171
172        // Flip the image.
173        // flipX: whether to flip the image horizontally. The value 1 means to flip the image and 0 means the opposite.
174        // flipY: whether to flip the image vertically. The value 1 means to flip the image and 0 means the opposite.
175        int32_t flipX = 0;
176        int32_t flipY = 1;
177        OH_PixelMap_Flip(native, flipX, flipY);
178
179        // Crop the image.
180        // cropX: x-axis coordinate of the start point for cropping.
181        // cropY: y-axis coordinate of the start point for cropping.
182        // cropH: height after cropping (10), cropping from top to bottom.
183        // cropW: width after cropping (10), cropping from left to right.
184        int32_t cropX = 1;
185        int32_t cropY = 1;
186        int32_t cropW = 10;
187        int32_t cropH = 10;
188        OH_PixelMap_Crop(native, cropX, cropY, cropW, cropH);
189
190        // Obtain the memory address of the PixelMap object and lock the memory.
191        void *pixelAddr = nullptr;
192        OH_PixelMap_AccessPixels(native, &pixelAddr);
193
194        // Unlock the memory of the PixelMap object.
195        OH_PixelMap_UnAccessPixels(native);
196
197        return result;
198    }
199    ```
200
201**Calling APIs on the JS Side**
202
2031. Open **src\main\cpp\types\*libentry*\index.d.ts** (where **libentry** varies according to the project name), and import the following files:
204
205    ```js
206    import { image } from '@kit.ImageKit';
207
208    export const createPixelMapTest: () => image.PixelMap;
209    export const transform: (a: image.PixelMap) => image.PixelMap;
210    ```
211
2122. 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:
213
214    ```js
215    import testNapi from 'libentry.so'
216    import { image } from '@kit.ImageKit';
217
218    @Entry
219    @Component
220    struct Index {
221    @State _PixelMap : image.PixelMap | undefined = undefined;
222
223    build() {
224        Row() {
225            Column() {
226                Button("PixelMap")
227                .width(100)
228                .height(100)
229                .onClick(() => {
230                    console.log("com.example.native_ndk_api10 button click in");
231                    this._pixelMap = testNapi.createPixelMapTest();
232                    testNapi.transform(this._pixelMap);
233                })
234                Image(this._pixelMap)
235                .width(500)
236                .height(500)
237                .objectFit(ImageFit.Cover)
238                .border({width: 1, color: Color.Blue})
239                }
240                .width('100%')
241            }
242            .height('100%')
243        }
244    }
245    ```
246