• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用ImageSource完成多图对象解码
2<!--Kit: Image Kit-->
3<!--Subsystem: Multimedia-->
4<!--Owner: @aulight02-->
5<!--Designer: @liyang_bryan-->
6<!--Tester: @xchaosioda-->
7<!--Adviser: @zengyawen-->
8
9将所支持格式的图片文件解码成[Picture](image-overview.md#基础概念)。当前支持的图片文件格式包括JPEG、HEIF。
10
11## 开发步骤
12
13图片解码相关API的详细介绍请参见：[图片解码接口说明](../../reference/apis-image-kit/arkts-apis-image-ImageSource.md)。
14
151. 全局导入Image模块。
16
17   ```ts
18   import { image } from '@kit.ImageKit';
19   ```
20
212. 获取图片。
22   - 方法一：通过沙箱路径直接获取。该方法仅适用于应用沙箱中的图片。更多细节请参考[获取应用文件路径](../../application-models/application-context-stage.md#获取应用文件路径)。应用沙箱的介绍及如何向应用沙箱推送文件，请参考[文件管理](../../file-management/app-sandbox-directory.md)。
23
24      ```ts
25      function getFilePath(context: Context): string {
26        const filePath: string = context.cacheDir + '/test.jpg';
27        return filePath;
28      }
29      ```
30
31   - 方法二：通过沙箱路径获取图片的文件描述符。具体请参考[file.fs API参考文档](../../reference/apis-core-file-kit/js-apis-file-fs.md)。该方法需要导入\@kit.CoreFileKit模块。
32
33      ```ts
34      import { fileIo as fs } from '@kit.CoreFileKit';
35
36      function getFileFd(context: Context): number | undefined {
37        const filePath: string = context.filesDir + '/test.jpg';
38        const file: fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
39        if (file != undefined) {
40          const fd: number = file.fd;
41          return fd;
42        }
43        return undefined;
44      }
45      ```
46
47   - 方法三：通过资源管理器获取资源文件的ArrayBuffer。具体请参考[资源管理器API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfilecontent9-1)。该方法需要导入\@kit.LocalizationKit模块。
48
49      ```ts
50      import { resourceManager } from '@kit.LocalizationKit';
51
52      async function getFileBuffer(context: Context): Promise<ArrayBuffer | undefined> {
53        try {
54          const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
55          // 获取资源文件内容，返回Uint8Array。
56          const fileData: Uint8Array = await resourceMgr.getRawFileContent('test.jpg');
57          console.info('Successfully got RawFileContent');
58          // 转为ArrayBuffer并返回。
59          const buffer: ArrayBuffer = fileData.buffer.slice(0);
60          return buffer;
61        } catch (error) {
62          console.error("Failed to get RawFileContent");
63          return undefined;
64        }
65      }
66      ```
67
68   - 方法四：通过资源管理器获取资源文件的RawFileDescriptor。具体请参考[资源管理器API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfd9-1)。该方法需要导入\@kit.LocalizationKit模块。
69      ```ts
70      import { resourceManager } from '@kit.LocalizationKit';
71
72      async function getRawFd(context: Context): Promise<resourceManager.RawFileDescriptor | undefined> {
73        try {
74          const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
75          const rawFileDescriptor: resourceManager.RawFileDescriptor = await resourceMgr.getRawFd('test.jpg');
76          console.info('Successfully got RawFileDescriptor');
77          return rawFileDescriptor;
78        } catch (error) {
79          console.error('Failed to get RawFileDescriptor:');
80          return undefined;
81        }
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，解码获取picture多图对象。并对picture进行操作，如获取辅助图等。对于picture和辅助图的操作具体请参考[Image API参考文档](../../reference/apis-image-kit/arkts-apis-image-Picture.md)。
114
115   设置期望的format进行解码：
116      ```ts
117      import { BusinessError } from '@kit.BasicServicesKit';
118      import { image } from '@kit.ImageKit';
119      // 创建ImageSource，请选择3中合适的方法替换。
120      let fd : number = 0;
121      let imageSource : image.ImageSource = image.createImageSource(fd);
122      // 配置解码选项参数。
123      let options: image.DecodingOptionsForPicture = {
124        desiredAuxiliaryPictures: [image.AuxiliaryPictureType.GAINMAP] // GAINMAP为需要解码的辅助图类型。
125      };
126      // 创建picture。
127      imageSource.createPicture(options).then((picture: image.Picture) => {
128        console.info("Create picture succeeded.");
129        let type: image.AuxiliaryPictureType = image.AuxiliaryPictureType.GAINMAP;
130        let auxPicture: image.AuxiliaryPicture | null = picture.getAuxiliaryPicture(type);
131        // 获取辅助图信息。
132        if(auxPicture != null) {
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: ${error.code}, error.message: ${error.message}`);
143          });
144          auxPicture.release();
145        }
146      }).catch((err: BusinessError) => {
147        console.error("Create picture failed.");
148      });
149      ```
150
1515. 释放picture。
152
153   确认picture的异步方法已经执行完成，不再使用该变量后，可按需手动调用下面方法释放。
154   ```ts
155   // 请务必在确认picture不需要再使用时，再进行释放。
156   // picture.release();
157   ```