• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用ImageSource完成多图对象解码
2
3图片解码指将所支持格式的存档图片解码成统一的[Picture](image-overview.md)。当前支持的存档图片格式包括JPEG、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 } from '@kit.CoreFileKit';
37      ```
38
39      然后调用fileIo.openSync()获取文件描述符。
40
41      ```ts
42      // Stage模型参考如下代码
43      const context = getContext(this);
44      const filePath = context.cacheDir + '/test.jpg';
45      const file : fileIo.File = fileIo.openSync(filePath, fileIo.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      const context : Context = getContext(this);
64      // 获取resourceManager资源管理器
65      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
66      ```
67
68      ```ts
69      // FA模型
70      // 导入resourceManager资源管理器
71      import { resourceManager } from '@kit.LocalizationKit';
72      import { BusinessError } from '@kit.BasicServicesKit';
73      resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
74         console.log("Succeeded in getting resourceManager")
75      }).catch((err : BusinessError) => {
76         console.error("Failed to get resourceManager")
77      });
78      ```
79
80      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。
81
82      ```ts
83      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
84         console.log("Succeeded in getting RawFileContent")
85         // 获取图片的ArrayBuffer
86         const buffer = fileData.buffer.slice(0);
87      }).catch((err : BusinessError) => {
88         console.error("Failed to get RawFileContent")
89      });
90
91      ```
92
93   - 方法四：通过资源管理器获取资源文件的RawFileDescriptor。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfd9-1)。
94
95      ```ts
96      // Stage模型
97      const context : Context = getContext(this);
98      // 获取resourceManager资源管理器
99      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
100      ```
101
102      ```ts
103      // FA模型
104      // 导入resourceManager资源管理器
105      import { resourceManager } from '@kit.LocalizationKit';
106      import { BusinessError } from '@kit.BasicServicesKit';
107      resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
108         console.log("Succeeded in getting resourceManager")
109      }).catch((err : BusinessError) => {
110         console.error("Failed to get resourceManager")
111      });
112      ```
113
114      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。
115
116      ```ts
117
118      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
119         console.log("Succeeded in getting RawFileDescriptor")
120      }).catch((err : BusinessError) => {
121         console.error("Failed to get RawFileDescriptor")
122      });
123      ```
124
1253. 创建ImageSource实例。
126
127   - 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
128
129      ```ts
130      // path为已获得的沙箱路径
131      const imageSource : image.ImageSource = image.createImageSource(filePath);
132      ```
133
134   - 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
135
136      ```ts
137      // fd为已获得的文件描述符
138      const imageSource : image.ImageSource = image.createImageSource(fd);
139      ```
140
141   - 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
142
143      ```ts
144      const imageSource : image.ImageSource = image.createImageSource(buffer);
145      ```
146
147   - 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方法四获取。
148
149      ```ts
150      const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
151      ```
152
1534. 设置解码参数DecodingOptions，解码获取picture多图对象。
154
155   设置期望的format进行解码：
156      ```ts
157      import { BusinessError } from '@kit.BasicServicesKit';
158      import image from '@kit.ImageKit';
159      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.picture'));
160      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
161      let options: image.DecodingOptionsForPicture = {
162         desiredAuxiliaryPictures: [image.AuxiliaryPictureType.GAINMAP] // GAINMAP为需要解码的辅助图类型
163      };
164      // 创建picture
165      imageSource.createPicture(options).then((picture: image.Picture) => {
166         console.log("Create picture succeeded.")
167      }).catch((err: BusinessError) => {
168         console.error("Create picture failed.")
169      });
170      ```
171
1725. 释放picture。
173
174   ```ts
175   picture.release();
176   ```
177
178## 开发示例-解码资源文件中的图片
179
1801. 获取resourceManager资源管理。
181
182   ```ts
183   const context : Context = getContext(this);
184   // 获取resourceManager资源管理
185   const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
186   ```
187
1882. 创建ImageSource。
189   - 通过rawfile文件夹下test.jpg的ArrayBuffer创建。
190
191     ```ts
192      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
193         console.log("Succeeded in getting RawFileContent")
194         // 获取图片的ArrayBuffer
195         const buffer = fileData.buffer.slice(0);
196         const imageSource : image.ImageSource = image.createImageSource(buffer);
197      }).catch((err : BusinessError) => {
198         console.error("Failed to get RawFileContent")
199      });
200     ```
201
202   - 通过rawfile文件夹下test.jpg的RawFileDescriptor创建。
203
204     ```ts
205      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
206         console.log("Succeeded in getting RawFd")
207         const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
208      }).catch((err : BusinessError) => {
209         console.error("Failed to get RawFd")
210      });
211     ```
212
2133. 创建picture。
214
215   ```ts
216   let options: image.DecodingOptionsForPicture = {
217      desiredAuxiliaryPictures: [image.AuxiliaryPictureType.GAINMAP] // GAINMAP为需要解码的辅助图类型
218   };
219   imageSource.createPicture(options).then((picture: image.Picture) => {
220      console.log("Create picture succeeded.")
221   }).catch((err : BusinessError) => {
222      console.error("Create picture failed.")
223   });
224   ```
225
2264. 释放picture。
227
228   ```ts
229   picture.release();
230   ```