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