• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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      // Stage模型参考如下代码
20      const context : Context = getContext(this);
21      const filePath : string = context.cacheDir + '/test.jpg';
22      ```
23
24      ```ts
25      // FA模型参考如下代码
26      import { featureAbility } from '@kit.AbilityKit';
27
28      const context = featureAbility.getContext();
29      const filePath = context.getCacheDir() + "/test.jpg";
30      ```
31
32   - 方法二：通过沙箱路径获取图片的文件描述符。具体请参考[file.fs API参考文档](../../reference/apis-core-file-kit/js-apis-file-fs.md)。
33      该方法需要先导入\@kit.CoreFileKit模块。
34
35      ```ts
36      import { fileIo as fs } from '@kit.CoreFileKit';
37      ```
38
39      然后调用fs.openSync()获取文件描述符。
40
41      ```ts
42      // Stage模型参考如下代码
43      const context = getContext(this);
44      const filePath = context.cacheDir + '/test.jpg';
45      const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
46      const fd : number = file?.fd;
47      ```
48
49      ```ts
50      // FA模型参考如下代码
51      import { featureAbility } from '@kit.AbilityKit';
52
53      const context = featureAbility.getContext();
54      const filePath = context.getCacheDir() + "/test.jpg";
55      const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
56      const fd : number = file?.fd;
57      ```
58
59   - 方法三：通过资源管理器获取资源文件的ArrayBuffer。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfilecontent9-1)。
60
61      ```ts
62      // Stage模型
63      // 导入resourceManager资源管理器
64      import { resourceManager } from '@kit.LocalizationKit';
65
66      const context : Context = getContext(this);
67      // 获取resourceManager资源管理器
68      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
69      ```
70
71      ```ts
72      // FA模型
73      // 导入resourceManager资源管理器
74      import { resourceManager } from '@kit.LocalizationKit';
75      import { BusinessError } from '@kit.BasicServicesKit';
76
77      resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
78         console.log("Succeeded in getting resourceManager")
79      }).catch((err : BusinessError) => {
80         console.error("Failed to get resourceManager")
81      });
82      ```
83
84      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。
85
86      ```ts
87      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
88         console.log("Succeeded in getting RawFileContent")
89         // 获取图片的ArrayBuffer
90         const buffer = fileData.buffer.slice(0);
91      }).catch((err : BusinessError) => {
92         console.error("Failed to get RawFileContent")
93      });
94
95      ```
96
97   - 方法四：通过资源管理器获取资源文件的RawFileDescriptor。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfd9-1)。
98
99      ```ts
100      // Stage模型
101      // 导入resourceManager资源管理器
102      import { resourceManager } from '@kit.LocalizationKit';
103
104      const context : Context = getContext(this);
105      // 获取resourceManager资源管理器
106      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
107      ```
108
109      ```ts
110      // FA模型
111      // 导入resourceManager资源管理器
112      import { resourceManager } from '@kit.LocalizationKit';
113      import { BusinessError } from '@kit.BasicServicesKit';
114
115      resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
116         console.log("Succeeded in getting resourceManager")
117      }).catch((err : BusinessError) => {
118         console.error("Failed to get resourceManager")
119      });
120      ```
121
122      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。
123
124      ```ts
125
126      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
127         console.log("Succeeded in getting RawFileDescriptor")
128      }).catch((err : BusinessError) => {
129         console.error("Failed to get RawFileDescriptor")
130      });
131      ```
132
1333. 创建ImageSource实例。
134
135   - 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
136
137      ```ts
138      // path为已获得的沙箱路径
139      const imageSource : image.ImageSource = image.createImageSource(filePath);
140      ```
141
142   - 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
143
144      ```ts
145      // fd为已获得的文件描述符
146      const imageSource : image.ImageSource = image.createImageSource(fd);
147      ```
148
149   - 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
150
151      ```ts
152      const imageSource : image.ImageSource = image.createImageSource(buffer);
153      ```
154
155   - 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方法四获取。
156
157      ```ts
158      const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
159      ```
160
1614. 设置解码参数DecodingOptions，解码获取pixelMap图片对象。
162   - 设置期望的format进行解码：
163      ```ts
164      import { BusinessError } from '@kit.BasicServicesKit';
165      import { image } from '@kit.ImageKit';
166
167      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.image'));
168      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
169      let decodingOptions : image.DecodingOptions = {
170         editable: true,
171         desiredPixelFormat: 3,
172      }
173      // 创建pixelMap
174      imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
175         console.log("Succeeded in creating PixelMap")
176      }).catch((err : BusinessError) => {
177         console.error("Failed to create PixelMap")
178      });
179      ```
180   - HDR图片解码
181      ```ts
182      import { BusinessError } from '@kit.BasicServicesKit';
183      import { image } from '@kit.ImageKit';
184
185      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.CUVAHdr'));
186      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
187      let decodingOptions : image.DecodingOptions = {
188         //设置为AUTO会根据图片资源格式解码，如果图片资源为HDR资源则会解码为HDR的pixelmap。
189         desiredDynamicRange: image.DecodingDynamicRange.AUTO,
190      }
191      // 创建pixelMap
192      imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
193         console.log("Succeeded in creating PixelMap")
194         // 判断pixelmap是否为hdr内容
195         let info = pixelMap.getImageInfoSync();
196         console.log("pixelmap isHdr:" + info.isHdr);
197      }).catch((err : BusinessError) => {
198         console.error("Failed to create PixelMap")
199      });
200      ```
201   解码完成，获取到pixelMap对象后，可以进行后续[图片处理](image-transformation.md)。
202
2035. 释放pixelMap。
204
205   ```ts
206   pixelMap.release();
207   ```
208
209## 开发示例-对资源文件中的图片进行解码
210
2111. 获取resourceManager资源管理。
212
213   ```ts
214   // 导入resourceManager资源管理器
215   import { resourceManager } from '@kit.LocalizationKit';
216
217   const context : Context = getContext(this);
218   // 获取resourceManager资源管理
219   const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
220   ```
221
2222. 创建ImageSource。
223   - 方式一：通过rawfile文件夹下test.jpg的ArrayBuffer创建。
224
225     ```ts
226      import { BusinessError } from '@kit.BasicServicesKit';
227
228      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
229         console.log("Succeeded in getting RawFileContent")
230         // 获取图片的ArrayBuffer
231         const buffer = fileData.buffer.slice(0);
232         const imageSource : image.ImageSource = image.createImageSource(buffer);
233      }).catch((err : BusinessError) => {
234         console.error("Failed to get RawFileContent")
235      });
236     ```
237
238   - 方式二：通过rawfile文件夹下test.jpg的RawFileDescriptor创建。
239
240     ```ts
241      import { BusinessError } from '@kit.BasicServicesKit';
242
243      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
244         console.log("Succeeded in getting RawFd")
245         const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
246      }).catch((err : BusinessError) => {
247         console.error("Failed to get RawFd")
248      });
249     ```
250
2513. 创建pixelMap。
252
253   ```ts
254   imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
255      console.log("Succeeded in creating PixelMap")
256   }).catch((err : BusinessError) => {
257      console.error("Failed to creating PixelMap")
258   });
259   ```
260
2614. 释放pixelMap。
262
263   ```ts
264   pixelMap.release();
265   ```
266
267## 相关实例
268
269针对图片解码开发，有以下相关实例可供参考：
270
271- [图片编辑（ArkTS）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEdit)
272
273- [图片编辑（JS）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate)
274
275<!--RP1-->
276<!--RP1End-->