• 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        { "createPixelMapTest", nullptr, CreatePixelMapTest, nullptr, nullptr, nullptr, napi_default, nullptr },
37        { "createAlphaPixelMap", nullptr, CreateAlphaPixelMap, nullptr, nullptr, nullptr, napi_default, nullptr },
38        { "transform", nullptr, Transform, 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**添加引用文件**
54
55```c++
56#include <multimedia/image_framework/image_mdk_common.h>
57#include <multimedia/image_framework/image_pixel_map_mdk.h>
58#include <stdlib.h>
59```
60
611. 创建一个 **PixelMap** 对象。
62
63    ```c++
64    napi_value CreatePixelMapTest(napi_env env, napi_callback_info info) {
65        napi_value udfVar = nullptr;
66        napi_value pixelMap = nullptr;
67
68        struct OhosPixelMapCreateOps createOps;
69        createOps.width = 4;
70        createOps.height = 6;
71        createOps.pixelFormat = 4;
72        createOps.alphaType = 0;
73        size_t bufferSize = createOps.width * createOps.height * 4;
74        void *buff = malloc(bufferSize);
75        if (buff == nullptr) {
76            return udfVar;
77        }
78
79        char *cc = (char *)buff;
80        for (int i = 0; i < 96; i++) {
81            *(cc++) = (char)i;
82        }
83        int32_t res = OH_PixelMap_CreatePixelMap(env, createOps, (uint8_t *)buff, bufferSize, &pixelMap);
84        free(buff);
85        if (res != IMAGE_RESULT_SUCCESS || pixelMap == nullptr) {
86            return udfVar;
87        }
88        return pixelMap;
89    }
90    ```
91
922. 根据Alpha通道的信息，来生成一个仅包含Alpha通道信息的 **PixelMap** 对象。
93
94    ```c++
95    napi_value CreateAlphaPixelMap(napi_env env, napi_callback_info info) {
96        napi_value udfVar = nullptr;
97        napi_value thisVar = nullptr;
98        napi_value argValue[1] = {0};
99        size_t argCount = 1;
100
101        napi_value alphaPixelMap = nullptr;
102
103        napi_get_undefined(env, &udfVar);
104
105        if (napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr) != napi_ok || argCount < 1 ||
106            argValue[0] == nullptr) {
107            return udfVar;
108        }
109        int32_t res = OH_PixelMap_CreateAlphaPixelMap(env, argValue[0], &alphaPixelMap);
110        if (res != IMAGE_RESULT_SUCCESS || alphaPixelMap == nullptr) {
111            return udfVar;
112        }
113        return alphaPixelMap;
114    }
115    ```
116
1173. 对 **PixelMap** 数据进行处理。
118
119    ```c++
120    napi_value Transform(napi_env env, napi_callback_info info) {
121        napi_value thisVar = nullptr;
122        napi_value argValue[1] = {0};
123        size_t argCount = 1;
124
125        if (napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr) != napi_ok || argCount < 1 ||
126            argValue[0] == nullptr) {
127            return nullptr;
128        }
129        napi_value result = nullptr;
130        napi_get_undefined(env, &result);
131
132        // 初始化NativePixelMap对象。
133        NativePixelMap *native = OH_PixelMap_InitNativePixelMap(env, argValue[0]);
134        if (native == nullptr) {
135            return result;
136        }
137
138        // 获取图片信息。
139        struct OhosPixelMapInfos pixelMapInfo;
140        OH_PixelMap_GetImageInfo(native, &pixelMapInfo);
141
142        // 获取PixelMap对象每行字节数。
143        int32_t rowBytes;
144        OH_PixelMap_GetBytesNumberPerRow(native, &rowBytes);
145
146        // 获取PixelMap对象是否可编辑的状态。
147        int32_t editable = 0;
148        OH_PixelMap_GetIsEditable(native, &editable);
149
150        // 获取PixelMap对象是否支持Alpha通道。
151        int32_t supportAlpha = 0;
152        OH_PixelMap_IsSupportAlpha(native, &supportAlpha);
153
154        // 设置PixelMap对象的Alpha通道。
155        int32_t alphaAble = 0;
156        OH_PixelMap_SetAlphaAble(native, alphaAble);
157
158        // 获取PixelMap对象像素密度。
159        int32_t densityG;
160        OH_PixelMap_GetDensity(native, &densityG);
161
162        // 设置PixelMap对象像素密度。
163        int32_t densityS = 100;
164        OH_PixelMap_SetDensity(native, densityS);
165
166        // 设置PixelMap对象的透明度。
167        float opacity = 0.5;
168        OH_PixelMap_SetOpacity(native, opacity);
169
170        // 设置缩放比例。
171        // scaleX: 宽为原来的0.5。
172        // scaleY: 高为原来的0.5。
173        float scaleX = 0.5;
174        float scaleY = 0.5;
175        OH_PixelMap_Scale(native, scaleX, scaleY);
176
177        // 设置偏移。
178        // translateX: 向下偏移50。
179        // translateY: 向右偏移50。
180        float translateX = 50;
181        float translateY = 50;
182        OH_PixelMap_Translate(native, translateX, translateY);
183
184        // 设置顺时针旋转90度。
185        float angle = 90;
186        OH_PixelMap_Rotate(native, angle);
187
188        // 设置翻转
189        // flipX: 水平翻转，0为不翻转，1为翻转。
190        // flipY: 垂直翻转，0为不翻转，1为翻转。
191        int32_t flipX = 0;
192        int32_t flipY = 1;
193        OH_PixelMap_Flip(native, flipX, flipY);
194
195        // 设置裁剪区域。
196        // cropX: 裁剪起始点横坐标。
197        // cropY: 裁剪起始点纵坐标。
198        // cropH: 裁剪高度10，方向为从上往下（裁剪后的图片高度为10）。
199        // cropW: 裁剪宽度10，方向为从左到右（裁剪后的图片宽度为10）。
200        int32_t cropX = 1;
201        int32_t cropY = 1;
202        int32_t cropW = 10;
203        int32_t cropH = 10;
204        OH_PixelMap_Crop(native, cropX, cropY, cropW, cropH);
205
206        // 获取PixelMap对象数据的内存地址，并锁定该内存。
207        void *pixelAddr = nullptr;
208        OH_PixelMap_AccessPixels(native, &pixelAddr);
209
210        // 释放PixelMap对象数据的内存锁。
211        OH_PixelMap_UnAccessPixels(native);
212
213        return result;
214    }
215    ```
216
217**JS侧调用**
218
2191. 打开src\main\cpp\types\libentry\index.d.ts（其中libentry根据工程名生成），导入如下引用文件：
220
221    ```js
222    import { image } from '@kit.ImageKit';
223
224    export const createPixelMapTest: () => image.PixelMap;
225    export const transform: (a: image.PixelMap) => void;
226    ```
227
2282. 打开src\main\ets\pages\index.ets, 导入"libentry.so"(根据工程名生成)，调用Native接口，传入JS的资源对象。示例如下：
229
230    ```js
231    import testNapi from 'libentry.so';
232    import { image } from '@kit.ImageKit';
233
234    @Entry
235    @Component
236    struct Index {
237    @State _pixelMap : image.PixelMap | undefined = undefined;
238
239    build() {
240        Row() {
241            Column() {
242                Button("PixelMap")
243                .width(100)
244                .height(100)
245                .onClick(() => {
246                    console.info("com.example.native_ndk_api10 button click in");
247                    this._pixelMap = testNapi.createPixelMapTest();
248                    testNapi.transform(this._pixelMap);
249                })
250                Image(this._pixelMap)
251                .width(500)
252                .height(500)
253                .objectFit(ImageFit.Cover)
254                .border({width: 1, color: Color.Blue})
255                }
256                .width('100%')
257            }
258            .height('100%')
259        }
260    }
261    ```
262