• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 图像变换
2<!--Kit: Image Kit-->
3<!--Subsystem: Multimedia-->
4<!--Owner: @yaozhupeng-->
5<!--Designer: @yaozhupeng-->
6<!--Tester: @zhaoxiaoguang2-->
7<!--Adviser: @zengyawen-->
8
9> **说明：**
10>
11> 当前开发指导使用的接口为[Image](../../reference/apis-image-kit/capi-image.md)模块下的C API，可完成图片编解码，图片接收器，处理图像数据等功能。这部分API在API 11之前发布，在后续的版本不再增加新功能，**不再推荐使用**。<br>
12> 开发者可使用[Image_NativeModule](../../reference/apis-image-kit/capi-image-nativemodule.md)模块下的C API，不仅提供上述图片框架基础功能，还可以完成多图编解码等新特性，相关开发指导请参考[图片开发指导(C/C++)](image-source-c.md)节点下的内容。这部分API从API 12开始支持，并将持续演进，**推荐开发者使用**。<br>
13> 两套C API不建议同时使用，在部分场景下存在不兼容的问题。
14
15开发者可以通过本指导了解如何使用Native Image的接口完成图像变换。
16
17## 开发步骤
18
19**添加依赖**
20
21在进行应用开发之前，开发者需要打开native工程的src/main/cpp/CMakeLists.txt，在target_link_libraries依赖中添加image的libace_napi.z.so、libpixelmap_ndk.z.so以及日志依赖libhilog_ndk.z.so。
22
23```txt
24target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so libpixelmap_ndk.z.so)
25```
26
27**添加接口映射**
28
29打开src/main/cpp/hello.cpp文件，在Init函数中添加接口映射如下：
30
31```c++
32EXTERN_C_START
33static napi_value Init(napi_env env, napi_value exports)
34{
35    napi_property_descriptor desc[] = {
36        { "testGetImageInfo", nullptr, TestGetImageInfo, nullptr, nullptr, nullptr, napi_default, nullptr },
37        { "testAccessPixels", nullptr, TestAccessPixels, nullptr, nullptr, nullptr, napi_default, nullptr },
38        { "testUnAccessPixels", nullptr, TestUnAccessPixels, nullptr, nullptr, nullptr, napi_default, nullptr },
39    };
40
41    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
42    return exports;
43}
44EXTERN_C_END
45```
46
47**Native接口调用**
48
49具体接口说明请参考[API文档](../../reference/apis-image-kit/capi-image.md)。
50
51在hello.cpp文件中获取JS的资源对象，并转为Native的资源对象，即可调用Native接口，调用方式示例代码如下：
52
53打开src/main/cpp/hello.cpp，添加引用文件。
54
55```c++
56#include<multimedia/image_framework/image_pixel_map_napi.h>
57```
58
591. 获取**PixelMap**的信息，并记录信息到**OhosPixelMapInfo**结构中。
60
61   ```c++
62   static napi_value TestGetImageInfo(napi_env env, napi_callback_info info)
63    {
64        napi_value result = nullptr;
65        napi_get_undefined(env, &result);
66
67        napi_value thisVar = nullptr;
68        napi_value argValue[1] = {0};
69        size_t argCount = 1;
70
71        napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);
72
73        OHOS::Media::OhosPixelMapInfo pixelMapInfo;
74        OHOS::Media::OH_GetImageInfo(env, argValue[0], &pixelMapInfo);
75        return result;
76    }
77    ```
78
792. 获取**PixelMap**对象数据的内存地址，并锁定该内存。
80
81    ```c++
82    static napi_value TestAccessPixels(napi_env env, napi_callback_info info)
83    {
84        napi_value result = nullptr;
85        napi_get_undefined(env, &result);
86
87        napi_value thisVar = nullptr;
88        napi_value argValue[1] = {0};
89        size_t argCount = 1;
90
91        napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);
92
93        void* addrPtr = nullptr;
94        OHOS::Media::OH_AccessPixels(env, argValue[0], &addrPtr);
95        return result;
96    }
97    ```
98
993. 释放**PixelMap**对象数据的内存锁。
100
101    ```c++
102    static napi_value TestUnAccessPixels(napi_env env, napi_callback_info info)
103    {
104        napi_value result = nullptr;
105        napi_get_undefined(env, &result);
106
107        napi_value thisVar = nullptr;
108        napi_value argValue[1] = {0};
109        size_t argCount = 1;
110
111        napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr);
112
113        OHOS::Media::OH_UnAccessPixels(env, argValue[0]);
114        return result;
115    }
116    ```
117
118**JS侧调用**
119
1201. 打开src\main\cpp\types\libentry\index.d.ts(其中libentry根据工程名生成)，导入如下引用文件：
121
122    ```js
123    import { image } from '@kit.ImageKit';
124    export const add:(a: number, b: number) => image.PixelMap;
125    export const transform: (a: image.PixelMap) => image.PixelMap;
126    export const testGetImageInfo: (a: image.PixelMap) => image.PixelMap;
127    export const testAccessPixels: (a: image.PixelMap) => image.PixelMap;
128    export const testUnAccessPixels: (a: image.PixelMap) => image.PixelMap;
129    ```
130
1312. 打开src\main\ets\pages\index.ets, 导入"libentry.so"(根据工程名生成)；调用Native接口，传入JS的资源对象。示例如下：
132
133    ```js
134    import testNapi from 'libentry.so';
135    import { image } from '@kit.ImageKit';
136
137    @Entry
138    @Component
139    struct Index {
140    @State message: string = 'IMAGE';
141    @State _PixelMap : image.PixelMap | undefined = undefined;
142
143    build() {
144        Row() {
145        Column() {
146            Button(this.message)
147            .fontSize(50)
148            .fontWeight(FontWeight.Bold)
149            .onClick(() => {
150                const color : ArrayBuffer = new ArrayBuffer(96);
151                let opts: image.InitializationOptions = { alphaType: 0, editable: true, pixelFormat: 4, scaleMode: 1, size: { height: 4, width: 6 } };
152                image.createPixelMap(color, opts)
153                .then( (pixelmap : image.PixelMap) => {
154                    this._PixelMap = pixelmap;
155                    testNapi.testGetImageInfo(this._PixelMap);
156                    console.info("Test GetImageInfo success");
157
158                    testNapi.testAccessPixels(this._PixelMap);
159                    console.info("Test AccessPixels success");
160
161                    testNapi.testUnAccessPixels(this._PixelMap);
162                    console.info("Test UnAccessPixels success");
163                })
164            })
165        }
166        .width('100%')
167        }
168        .height('100%')
169    }
170    }
171    ```
172