• 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      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)。该方法需要先导入\@kit.CoreFileKit模块。
24
25      ```ts
26      import { fileIo } from '@kit.CoreFileKit';
27      ```
28
29      然后调用fileIo.openSync()获取文件描述符。
30
31      ```ts
32      const context = getContext(this);
33      const filePath = context.cacheDir + '/test.jpg';
34      const file : fileIo.File = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE);
35      const fd : number = file?.fd;
36      ```
37
38   - 方法三：通过资源管理器获取资源文件的ArrayBuffer。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfilecontent9-1)。
39
40      ```ts
41      const context : Context = getContext(this);
42      // 获取resourceManager资源管理器。
43      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
44      ```
45
46      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。
47
48      ```ts
49      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
50         console.log("Succeeded in getting RawFileContent")
51         // 获取图片的ArrayBuffer。
52         const buffer = fileData.buffer.slice(0);
53      }).catch((err : BusinessError) => {
54         console.error("Failed to get RawFileContent")
55      });
56
57      ```
58
59   - 方法四：通过资源管理器获取资源文件的RawFileDescriptor。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfd9-1)。
60
61      ```ts
62      const context : Context = getContext(this);
63      // 获取resourceManager资源管理器。
64      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
65      ```
66
67      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。
68
69      ```ts
70
71      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
72         console.log("Succeeded in getting RawFileDescriptor")
73      }).catch((err : BusinessError) => {
74         console.error("Failed to get RawFileDescriptor")
75      });
76      ```
77
783. 创建ImageSource实例。
79
80   - 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
81
82      ```ts
83      // path为已获得的沙箱路径。
84      const imageSource : image.ImageSource = image.createImageSource(filePath);
85      ```
86
87   - 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
88
89      ```ts
90      // fd为已获得的文件描述符。
91      const imageSource : image.ImageSource = image.createImageSource(fd);
92      ```
93
94   - 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
95
96      ```ts
97      const imageSource : image.ImageSource = image.createImageSource(buffer);
98      ```
99
100   - 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方法四获取。
101
102      ```ts
103      const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
104      ```
105
1064. 设置解码参数DecodingOptions，解码获取picture多图对象。
107
108   设置期望的format进行解码：
109      ```ts
110      import { BusinessError } from '@kit.BasicServicesKit';
111      import image from '@kit.ImageKit';
112      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.picture'));
113      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
114      let options: image.DecodingOptionsForPicture = {
115         desiredAuxiliaryPictures: [image.AuxiliaryPictureType.GAINMAP] // GAINMAP为需要解码的辅助图类型。
116      };
117      // 创建picture。
118      imageSource.createPicture(options).then((picture: image.Picture) => {
119         console.log("Create picture succeeded.")
120      }).catch((err: BusinessError) => {
121         console.error("Create picture failed.")
122      });
123      ```
124
1255. 对picture进行操作，如获取辅助图等。对于picture和辅助图的操作具体请参考[Image API参考文档](../../reference/apis-image-kit/js-apis-image.md#picture13)。
126
127   ```ts
128   // 获取辅助图对象。
129   let type: image.AuxiliaryPictureType = image.AuxiliaryPictureType.GAINMAP;
130   let auxPicture: image.AuxiliaryPicture | null = picture.getAuxiliaryPicture(type);
131   // 获取辅助图信息。
132   let auxinfo: image.AuxiliaryPictureInfo = auxPicture.getAuxiliaryPictureInfo();
133   console.info('GetAuxiliaryPictureInfo Type: ' + auxinfo.auxiliaryPictureType +
134      ' height: ' + auxinfo.size.height + ' width: ' + auxinfo.size.width +
135      ' rowStride: ' +  auxinfo.rowStride +  ' pixelFormat: ' + auxinfo.pixelFormat +
136      ' colorSpace: ' +  auxinfo.colorSpace);
137   // 将辅助图数据读到ArrayBuffer。
138   auxPicture.readPixelsToBuffer().then((pixelsBuffer: ArrayBuffer) => {
139      console.info('Read pixels to buffer success.');
140   }).catch((error: BusinessError) => {
141      console.error('Read pixels to buffer failed error.code: ' + JSON.stringify(error.code) + ' ,error.message:' + JSON.stringify(error.message));
142   });
143   auxPicture.release();
144   ```
145
1466. 释放picture。
147
148   ```ts
149   picture.release();
150   ```