1# 使用ImageSource完成图片解码
2
3图片解码指将所支持格式的存档图片解码成统一的[PixelMap](image-overview.md)，以便在应用或系统中进行图片显示或[图片处理](image-transformation.md)。当前支持的存档图片格式包括JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG、HEIF(不同硬件设备支持情况不同)。
4
5## 开发步骤
6
7图片解码相关API的详细介绍请参见：[图片解码接口说明](../../reference/apis-image-kit/js-apis-image.md#imagesource)。
8
91. 全局导入Image模块。
10
11   ```ts
12   import { image } from '@kit.ImageKit';
13   ```
14
152. 获取图片。
16   - 方法一：获取沙箱路径。具体请参考[获取应用文件路径](../../application-models/application-context-stage.md#获取应用文件路径)。应用沙箱的介绍及如何向应用沙箱推送文件，请参考[文件管理](../../file-management/app-sandbox-directory.md)。
17
18      ```ts
19      const context : Context = getContext(this);
20      const filePath : string = context.cacheDir + '/test.jpg';
21      ```
22
23   - 方法二：通过沙箱路径获取图片的文件描述符。具体请参考[file.fs API参考文档](../../reference/apis-core-file-kit/js-apis-file-fs.md)。
24      该方法需要先导入\@kit.CoreFileKit模块。
25
26      ```ts
27      import { fileIo as fs } from '@kit.CoreFileKit';
28      ```
29
30      然后调用fs.openSync()获取文件描述符。
31
32      ```ts
33      const context = getContext(this);
34      const filePath = context.cacheDir + '/test.jpg';
35      const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
36      const fd : number = file?.fd;
37      ```
38
39   - 方法三：通过资源管理器获取资源文件的ArrayBuffer。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfilecontent9-1)。
40
41      ```ts
42      // 导入resourceManager资源管理器
43      import { resourceManager } from '@kit.LocalizationKit';
44
45      const context : Context = getContext(this);
46      // 获取resourceManager资源管理器
47      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
48      ```
49
50      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。
51
52      ```ts
53      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
54         console.log("Succeeded in getting RawFileContent")
55         // 获取图片的ArrayBuffer
56         const buffer = fileData.buffer.slice(0);
57      }).catch((err : BusinessError) => {
58         console.error("Failed to get RawFileContent")
59      });
60
61      ```
62
63   - 方法四：通过资源管理器获取资源文件的RawFileDescriptor。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfd9-1)。
64
65      ```ts
66      // 导入resourceManager资源管理器
67      import { resourceManager } from '@kit.LocalizationKit';
68
69      const context : Context = getContext(this);
70      // 获取resourceManager资源管理器
71      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
72      ```
73
74      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。
75
76      ```ts
77
78      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
79         console.log("Succeeded in getting RawFileDescriptor")
80      }).catch((err : BusinessError) => {
81         console.error("Failed to get RawFileDescriptor")
82      });
83      ```
84
853. 创建ImageSource实例。
86
87   - 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
88
89      ```ts
90      // path为已获得的沙箱路径
91      const imageSource : image.ImageSource = image.createImageSource(filePath);
92      ```
93
94   - 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
95
96      ```ts
97      // fd为已获得的文件描述符
98      const imageSource : image.ImageSource = image.createImageSource(fd);
99      ```
100
101   - 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
102
103      ```ts
104      const imageSource : image.ImageSource = image.createImageSource(buffer);
105      ```
106
107   - 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方法四获取。
108
109      ```ts
110      const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
111      ```
112
1134. 设置解码参数DecodingOptions，解码获取pixelMap图片对象。
114   - 设置期望的format进行解码：
115      ```ts
116      import { BusinessError } from '@kit.BasicServicesKit';
117      import { image } from '@kit.ImageKit';
118
119      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.image'));
120      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
121      let decodingOptions : image.DecodingOptions = {
122         editable: true,
123         desiredPixelFormat: 3,
124      }
125      // 创建pixelMap
126      imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
127         console.log("Succeeded in creating PixelMap")
128      }).catch((err : BusinessError) => {
129         console.error("Failed to create PixelMap")
130      });
131      ```
132   - HDR图片解码
133      ```ts
134      import { BusinessError } from '@kit.BasicServicesKit';
135      import { image } from '@kit.ImageKit';
136
137      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.CUVAHdr'));
138      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
139      let decodingOptions : image.DecodingOptions = {
140         //设置为AUTO会根据图片资源格式解码，如果图片资源为HDR资源则会解码为HDR的pixelmap。
141         desiredDynamicRange: image.DecodingDynamicRange.AUTO,
142      }
143      // 创建pixelMap
144      imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
145         console.log("Succeeded in creating PixelMap")
146         // 判断pixelmap是否为hdr内容
147         let info = pixelMap.getImageInfoSync();
148         console.log("pixelmap isHdr:" + info.isHdr);
149      }).catch((err : BusinessError) => {
150         console.error("Failed to create PixelMap")
151      });
152      ```
153   解码完成，获取到pixelMap对象后，可以进行后续[图片处理](image-transformation.md)。
154
1555. 释放pixelMap和imageSource。
156
157   需确认pixelMap和imageSource异步方法已经执行完成，不再使用该变量后可按需手动调用下面方法释放。
158   ```ts
159   pixelMap.release();
160   imageSource.release();
161   ```
162
163## 开发示例-对资源文件中的图片进行解码
164
1651. 获取resourceManager资源管理。
166
167   ```ts
168   // 导入resourceManager资源管理器
169   import { resourceManager } from '@kit.LocalizationKit';
170
171   const context : Context = getContext(this);
172   // 获取resourceManager资源管理
173   const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
174   ```
175
1762. 创建ImageSource。
177   - 方式一：通过rawfile文件夹下test.jpg的ArrayBuffer创建。
178
179     ```ts
180      import { BusinessError } from '@kit.BasicServicesKit';
181
182      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
183         console.log("Succeeded in getting RawFileContent")
184         // 获取图片的ArrayBuffer
185         const buffer = fileData.buffer.slice(0);
186         const imageSource : image.ImageSource = image.createImageSource(buffer);
187      }).catch((err : BusinessError) => {
188         console.error("Failed to get RawFileContent")
189      });
190     ```
191
192   - 方式二：通过rawfile文件夹下test.jpg的RawFileDescriptor创建。
193
194     ```ts
195      import { BusinessError } from '@kit.BasicServicesKit';
196
197      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
198         console.log("Succeeded in getting RawFd")
199         const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
200      }).catch((err : BusinessError) => {
201         console.error("Failed to get RawFd")
202      });
203     ```
204
2053. 创建pixelMap。
206
207   ```ts
208   imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
209      console.log("Succeeded in creating PixelMap")
210   }).catch((err : BusinessError) => {
211      console.error("Failed to creating PixelMap")
212   });
213   ```
214
2154. 释放pixelMap和imageSource。
216
217   需确认pixelMap和imageSource异步方法已经执行完成，不再使用该变量后可按需手动调用下面方法释放。
218   ```ts
219   pixelMap.release();
220   imageSource.release();
221   ```
222
223## 相关实例
224
225针对图片解码开发，有以下相关实例可供参考：
226
227- [图片编辑（ArkTS）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEdit)
228
229- [图片编辑（JS）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate)
230
231<!--RP1-->
232<!--RP1End-->