1# 使用Image完成图像变换 2 3开发者可以通过本指导了解如何使用Native Image的接口。 4 5## 开发步骤 6 7**添加依赖** 8 9在进行应用开发之前,开发者需要打开native工程的src/main/cpp/CMakeLists.txt,在target_link_libraries依赖中添加image的libace_napi.z.so、libpixelmap_ndk.z.so以及日志依赖libhilog_ndk.z.so。 10 11```txt 12target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so libpixelmap_ndk.z.so) 13``` 14 15**添加接口映射** 16 17打开src/main/cpp/hello.cpp文件,在Init函数中添加接口映射如下: 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**Native接口调用** 36 37具体接口说明请参考[API文档](../../reference/apis-image-kit/image.md)。 38 39在hello.cpp文件中获取JS的资源对象,并转为Native的资源对象,即可调用Native接口,调用方式示例代码如下: 40 41打开src/main/cpp/hello.cpp,添加引用文件。 42 43```c++ 44#include<multimedia/image_framework/image_pixel_map_napi.h> 45``` 46 471. 获取**PixelMap**的信息,并记录信息到**OhosPixelMapInfo**结构中。 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. 获取**PixelMap**对象数据的内存地址,并锁定该内存。 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. 释放**PixelMap**对象数据的内存锁。 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**JS侧调用** 107 1081. 打开src\main\cpp\types\libentry\index.d.ts(其中libentry根据工程名生成),导入如下引用文件: 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. 打开src\main\ets\pages\index.ets, 导入"libentry.so"(根据工程名生成);调用Native接口,传入JS的资源对象。示例如下: 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