• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Image Decoding (C/C++)
2
3Image decoding refers to the process of decoding an archived image in a supported format into a [pixel map](image-overview.md) for image display or [processing](image-transformation.md). Currently, the following image formats are supported: JPEG, PNG, GIF, WebP, BMP, SVG, and ICO.
4
5## How to Develop
6
7Read [Image](../reference/apis-image-kit/js-apis-image.md#imagesource) for APIs related to image decoding.
8
9### Adding Dependencies
10
11Open the **src/main/cpp/CMakeLists.txt** file of the native project, add **libpixelmap_ndk.z.so**, **libimage_source_ndk.z.so**, **librawfile.z.so**, and **libhilog_ndk.z.so** (on which the native log APIs depend) to the **target_link_libraries** dependency.
12
13```txt
14target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so libpixelmap_ndk.z.so libimage_source_ndk.z.so librawfile.z.so)
15```
16
17### Adding API Mappings
18
19Open the **src/main/cpp/hello.cpp** file and add the following API mappings to the **Init** function:
20
21```c++
22EXTERN_C_START
23static napi_value Init(napi_env env, napi_value exports)
24{
25    napi_property_descriptor desc[] = {
26        { "getSyncPixelMap", nullptr, getSyncPixelMap, 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 APIs on the JS Side
36
371.  Open **src\main\cpp\types\*libentry*\index.d.ts** (where **libentry** varies according to the project name), and import the following files:
38
39    ```js
40    import image from '@ohos.multimedia.image'
41    import resourceManager from '@ohos.resourceManager'
42
43    export const getSyncPixelMap: (resMgr: resourceManager.ResourceManager, src: string) => image.PixelMap;
44    ```
452. Prepare an image resource file, named **example.jpg** in this example, and import it to **src\main\resources\rawfile\**.
46
473. 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 following is an example:
48
49    ```js
50    import testNapi from 'libentry.so'
51    import image from '@ohos.multimedia.image'
52
53    @Entry
54    @Component
55    struct Index {
56      @State pixelMap : PixelMap | undefined = undefined;
57      aboutToAppear() {
58         this.pixelMap = testNapi.getSyncPixelMap(getContext(this).resourceManager, "example.jpg")
59      }
60
61      build() {
62         Row() {
63            Column() {
64            Image(this.pixelMap)
65               .width(100)
66               .height(100)
67            }
68            .width('100%')
69         }
70         .height('100%')
71      }
72   }
73    ```
74
75
76### Calling the Native APIs
77
78For details about the APIs, see [Image API Reference](../reference/apis-image-kit/image.md).
79
80Obtain the JS resource object from the **hello.cpp** file and convert it to a native resource object. Then you can call native APIs.
81
82**Adding Reference Files**
83
84   ```c++
85      #include <multimedia/image_framework/image_source_mdk.h>
86      #include <multimedia/image_framework/image_pixel_map_mdk.h>
87      #include <rawfile/raw_file.h>
88      #include <rawfile/raw_file_manager.h>
89      #include <hilog/log.h>
90
91      static napi_value getSyncPixelMap(napi_env env, napi_callback_info info)
92      {
93         size_t argc = 2;
94         napi_value args[2] = {nullptr};
95
96         napi_get_cb_info(env, info, &argc, args , nullptr, nullptr);
97
98         napi_valuetype srcType;
99         napi_typeof(env, args[0], &srcType);
100
101         NativeResourceManager * mNativeResMgr = OH_ResourceManager_InitNativeResourceManager(env, args[0]);
102
103         size_t strSize;
104         char srcBuf[2048];
105         napi_get_value_string_utf8(env, args[1], srcBuf, sizeof(srcBuf), &strSize);
106
107         RawFile * rawFile = OH_ResourceManager_OpenRawFile(mNativeResMgr, srcBuf);
108         if (rawFile != NULL) {
109            long len = OH_ResourceManager_GetRawFileSize(rawFile);
110            uint8_t * data = static_cast<uint8_t *>(malloc(len));
111            int res = OH_ResourceManager_ReadRawFile(rawFile, data, len);
112
113            OhosImageSource imageSource_c;
114            imageSource_c.buffer = data;
115            imageSource_c.bufferSize = len;
116
117            OhosImageSourceOps ops{};
118            napi_value imageSource;
119            napi_value pixelMap;
120
121            int32_t ret = OH_ImageSource_Create(env, &imageSource_c, &ops, &imageSource);
122
123            ImageSourceNative * imageSourceNative_c = OH_ImageSource_InitNative(env, imageSource);
124            OhosImageDecodingOps decodingOps{};
125            OH_ImageSource_CreatePixelMap(imageSourceNative_c, &decodingOps, &pixelMap);
126
127            // The following APIs are used for the GIF format.
128            // napi_value pixelMapList;
129            // OH_ImageSource_CreatePixelMapList(imageSourceNative_c, &decodingOps, &pixelMapList);
130            // OhosImageSourceDelayTimeList list{};
131            // OH_ImageSource_GetDelayTime(imageSourceNative_c, &list);
132            // uint32_t count;
133            // OH_ImageSource_GetFrameCount(imageSourceNative_c, &count);
134
135            OhosImageSourceInfo info{};
136            OH_ImageSource_GetImageInfo(imageSourceNative_c, 0, &info);
137            OH_LOG_Print(LOG_APP, LOG_INFO, 0xFF00, "[decode]", "imageInfo width:%{public}d , height:%{public}d", info.size.width, info.size.height);
138
139            OhosImageSourceProperty target;
140            char exifKey_c[] = "ImageWidth";
141            target.size = strlen(exifKey_c);
142            target.value = exifKey_c;
143
144            OhosImageSourceProperty dstValue;
145            char dstValue_c[] = "2000";
146            dstValue.size = strlen(dstValue_c);
147            dstValue.value = dstValue_c;
148            OH_ImageSource_ModifyImageProperty(imageSourceNative_c, &target, &dstValue);
149
150            OhosImageSourceProperty response{};
151            response.size = 20;
152            response.value = static_cast<char *>(malloc(20));
153            OH_ImageSource_GetImageProperty(imageSourceNative_c, &target, &response);
154            OH_LOG_Print(LOG_APP, LOG_INFO, 0xFF00, "[decode]", "ImageProperty width after modify:%{public}s", response.value);
155
156            OH_ImageSource_Release(imageSourceNative_c);
157            OH_ResourceManager_CloseRawFile(rawFile);
158            return pixelMap;
159         }
160         OH_ResourceManager_ReleaseNativeResourceManager(mNativeResMgr);
161         return nullptr;
162      }
163   ```
164
165The image framework supports incremental decoding. The method is as follows:
166   ```c++
167      #include <multimedia/image_framework/image_source_mdk.h>
168      #include <multimedia/image_framework/image_pixel_map_mdk.h>
169      #include <rawfile/raw_file.h>
170      #include <rawfile/raw_file_manager.h>
171      #include <hilog/log.h>
172
173      static napi_value getSyncPixelMap(napi_env env, napi_callback_info info)
174      {
175         size_t argc = 2;
176         napi_value args[2] = {nullptr};
177
178         napi_get_cb_info(env, info, &argc, args , nullptr, nullptr);
179
180         napi_valuetype srcType;
181         napi_typeof(env, args[0], &srcType);
182
183         NativeResourceManager * mNativeResMgr = OH_ResourceManager_InitNativeResourceManager(env, args[0]);
184
185         size_t strSize;
186         char srcBuf[2048];
187         napi_get_value_string_utf8(env, args[1], srcBuf, sizeof(srcBuf), &strSize);
188
189         RawFile * rawFile = OH_ResourceManager_OpenRawFile(mNativeResMgr, srcBuf);
190         if (rawFile != NULL) {
191            long len = OH_ResourceManager_GetRawFileSize(rawFile);
192            if (len > 2048) {
193               uint8_t * data = static_cast<uint8_t *>(malloc(len));
194               int res = OH_ResourceManager_ReadRawFile(rawFile, data, len);
195
196               uint8_t * holderdata = static_cast<uint8_t *>(malloc(len));
197
198               OhosImageSource imageSource_c;
199               imageSource_c.buffer = holderdata;
200               imageSource_c.bufferSize = len;
201               OhosImageSourceOps ops{};
202               napi_value imageSource;
203               OH_ImageSource_CreateIncremental(env, &imageSource_c, &ops, &imageSource);
204
205               ImageSourceNative * imageSourceNative_c = OH_ImageSource_InitNative(env, imageSource);
206
207               // The following simulates the segment loading scenario.
208               OhosImageSourceUpdateData firstData{};
209               firstData.buffer = data;
210               firstData.bufferSize = len;
211               firstData.isCompleted = false;
212               firstData.offset = 0;
213               firstData.updateLength = 2048;
214               OH_ImageSource_UpdateData(imageSourceNative_c, &firstData);
215
216               OhosImageSourceUpdateData secondData{};
217               secondData.buffer = data;
218               secondData.bufferSize = len;
219               secondData.isCompleted = true;
220               secondData.offset = 2048;
221               secondData.updateLength = len - 2048;
222               OH_ImageSource_UpdateData(imageSourceNative_c, &secondData);
223
224               napi_value pixelMap;
225               OhosImageDecodingOps decodingOps{};
226               decodingOps.index = 0;
227               OH_ImageSource_CreatePixelMap(imageSourceNative_c, &decodingOps, &pixelMap);
228
229               OH_ImageSource_Release(imageSourceNative_c);
230               OH_ResourceManager_CloseRawFile(rawFile);
231               return pixelMap;
232            }
233            uint8_t * data = static_cast<uint8_t *>(malloc(len));
234            int res = OH_ResourceManager_ReadRawFile(rawFile, data, len);
235
236            OhosImageSource imageSource_c;
237            imageSource_c.buffer = data;
238            imageSource_c.bufferSize = len;
239
240            OhosImageSourceOps ops{};
241            napi_value imageSource;
242            napi_value pixelMap;
243
244            int32_t ret = OH_ImageSource_Create(env, &imageSource_c, &ops, &imageSource);
245
246            ImageSourceNative * imageSourceNative_c = OH_ImageSource_InitNative(env, imageSource);
247            OhosImageDecodingOps decodingOps{};
248            OH_ImageSource_CreatePixelMap(imageSourceNative_c, &decodingOps, &pixelMap);
249
250            OH_ImageSource_Release(imageSourceNative_c);
251            OH_ResourceManager_CloseRawFile(rawFile);
252            return pixelMap;
253         }
254         OH_ResourceManager_ReleaseNativeResourceManager(mNativeResMgr);
255         return nullptr;
256      }
257   ```
258