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