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      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 } from '@kit.CoreFileKit';
28      ```
29
30      然后调用fileIo.openSync()获取文件描述符。
31
32      ```ts
33      const context = getContext(this);
34      const filePath = context.cacheDir + '/test.jpg';
35      const file : fileIo.File = fileIo.openSync(filePath, fileIo.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      const context : Context = getContext(this);
43      // 获取resourceManager资源管理器
44      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
45      ```
46
47      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。
48
49      ```ts
50      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
51         console.log("Succeeded in getting RawFileContent")
52         // 获取图片的ArrayBuffer
53         const buffer = fileData.buffer.slice(0);
54      }).catch((err : BusinessError) => {
55         console.error("Failed to get RawFileContent")
56      });
57
58      ```
59
60   - 方法四：通过资源管理器获取资源文件的RawFileDescriptor。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfd9-1)。
61
62      ```ts
63      const context : Context = getContext(this);
64      // 获取resourceManager资源管理器
65      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
66      ```
67
68      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。
69
70      ```ts
71
72      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
73         console.log("Succeeded in getting RawFileDescriptor")
74      }).catch((err : BusinessError) => {
75         console.error("Failed to get RawFileDescriptor")
76      });
77      ```
78
793. 创建ImageSource实例。
80
81   - 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
82
83      ```ts
84      // path为已获得的沙箱路径
85      const imageSource : image.ImageSource = image.createImageSource(filePath);
86      ```
87
88   - 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
89
90      ```ts
91      // fd为已获得的文件描述符
92      const imageSource : image.ImageSource = image.createImageSource(fd);
93      ```
94
95   - 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
96
97      ```ts
98      const imageSource : image.ImageSource = image.createImageSource(buffer);
99      ```
100
101   - 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方法四获取。
102
103      ```ts
104      const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
105      ```
106
1074. 设置解码参数DecodingOptions，解码获取picture多图对象。
108
109   设置期望的format进行解码：
110      ```ts
111      import { BusinessError } from '@kit.BasicServicesKit';
112      import image from '@kit.ImageKit';
113      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.picture'));
114      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
115      let options: image.DecodingOptionsForPicture = {
116         desiredAuxiliaryPictures: [image.AuxiliaryPictureType.GAINMAP] // GAINMAP为需要解码的辅助图类型
117      };
118      // 创建picture
119      imageSource.createPicture(options).then((picture: image.Picture) => {
120         console.log("Create picture succeeded.")
121      }).catch((err: BusinessError) => {
122         console.error("Create picture failed.")
123      });
124      ```
125
1265. 对picture进行操作，如获取辅助图等。对于picture和辅助图的操作具体请参考[Image API参考文档](../../reference/apis-image-kit/js-apis-image.md#picture13)。
127
128   ```ts
129   // 获取辅助图对象
130   let type: image.AuxiliaryPictureType = image.AuxiliaryPictureType.GAINMAP;
131   let auxPicture: image.AuxiliaryPicture | null = picture.getAuxiliaryPicture(type);
132   // 获取辅助图信息
133   let auxinfo: image.AuxiliaryPictureInfo = auxPicture.getAuxiliaryPictureInfo();
134   console.info('GetAuxiliaryPictureInfo Type: ' + auxinfo.auxiliaryPictureType +
135      ' height: ' + auxinfo.size.height + ' width: ' + auxinfo.size.width +
136      ' rowStride: ' +  auxinfo.rowStride +  ' pixelFormat: ' + auxinfo.pixelFormat +
137      ' colorSpace: ' +  auxinfo.colorSpace);
138   // 将辅助图数据读到ArrayBuffer
139   auxPicture.readPixelsToBuffer().then((pixelsBuffer: ArrayBuffer) => {
140      console.info('Read pixels to buffer success.');
141   }).catch((error: BusinessError) => {
142      console.error('Read pixels to buffer failed error.code: ' + JSON.stringify(error.code) + ' ,error.message:' + JSON.stringify(error.message));
143   });
144   auxPicture.release();
145   ```
146
1476. 释放picture。
148
149   ```ts
150   picture.release();
151   ```
152
153## 开发示例-解码资源文件中的图片
154
1551. 获取resourceManager资源管理。
156
157   ```ts
158   const context : Context = getContext(this);
159   // 获取resourceManager资源管理
160   const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
161   ```
162
1632. 创建ImageSource。
164   - 通过rawfile文件夹下test.jpg的ArrayBuffer创建。
165
166     ```ts
167      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
168         console.log("Succeeded in getting RawFileContent")
169         // 获取图片的ArrayBuffer
170         const buffer = fileData.buffer.slice(0);
171         const imageSource : image.ImageSource = image.createImageSource(buffer);
172      }).catch((err : BusinessError) => {
173         console.error("Failed to get RawFileContent")
174      });
175     ```
176
177   - 通过rawfile文件夹下test.jpg的RawFileDescriptor创建。
178
179     ```ts
180      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
181         console.log("Succeeded in getting RawFd")
182         const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
183      }).catch((err : BusinessError) => {
184         console.error("Failed to get RawFd")
185      });
186     ```
187
1883. 创建picture。
189
190   ```ts
191   let options: image.DecodingOptionsForPicture = {
192      desiredAuxiliaryPictures: [image.AuxiliaryPictureType.GAINMAP] // GAINMAP为需要解码的辅助图类型
193   };
194   imageSource.createPicture(options).then((picture: image.Picture) => {
195      console.log("Create picture succeeded.")
196   }).catch((err : BusinessError) => {
197      console.error("Create picture failed.")
198   });
199   ```
200
2014. 对picture进行操作，如获取辅助图等。对于picture和辅助图的操作具体请参考[Image API参考文档](../../reference/apis-image-kit/js-apis-image.md#picture13)。
202
203   ```ts
204   // 获取辅助图对象
205   let type: image.AuxiliaryPictureType = image.AuxiliaryPictureType.GAINMAP;
206   let auxPicture: image.AuxiliaryPicture | null = picture.getAuxiliaryPicture(type);
207   // 获取辅助图信息
208   let auxinfo: image.AuxiliaryPictureInfo = auxPicture.getAuxiliaryPictureInfo();
209   console.info('GetAuxiliaryPictureInfo Type: ' + auxinfo.auxiliaryPictureType +
210      ' height: ' + auxinfo.size.height + ' width: ' + auxinfo.size.width +
211      ' rowStride: ' +  auxinfo.rowStride +  ' pixelFormat: ' + auxinfo.pixelFormat +
212      ' colorSpace: ' +  auxinfo.colorSpace);
213   // 将辅助图数据写入ArrayBuffer
214   auxPicture.readPixelsToBuffer().then((pixelsBuffer: ArrayBuffer) => {
215      console.info('Read pixels to buffer success.');
216   }).catch((error: BusinessError) => {
217      console.error('Read pixels to buffer failed error.code: ' + JSON.stringify(error.code) + ' ,error.message:' + JSON.stringify(error.message));
218   });
219   auxPicture.release();
220   ```
221
2225. 释放picture。
223
224   ```ts
225   picture.release();
226   ```