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