• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 图片解码(ArkTS)
2
3图片解码指将所支持格式的存档图片解码成统一的[PixelMap](image-overview.md)，以便在应用或系统中进行图片显示或[图片处理](image-transformation.md)。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG、ICO。
4
5## 开发步骤
6
7图片解码相关API的详细介绍请参见：[图片解码接口说明](../../reference/apis-image-kit/js-apis-image.md#imagesource)。
8
91. 全局导入Image模块。
10
11   ```ts
12   import image from '@ohos.multimedia.image';
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 '@ohos.ability.featureAbility';
27
28      const context = featureAbility.getContext();
29      const filePath = context.getCacheDir() + "/test.jpg";
30      ```
31   - 方法二：通过沙箱路径获取图片的文件描述符。具体请参考[file.fs API参考文档](../../reference/apis-core-file-kit/js-apis-file-fs.md)。
32      该方法需要先导入\@ohos.file.fs模块。
33
34      ```ts
35      import fs from '@ohos.file.fs';
36      ```
37
38      然后调用fs.openSync()获取文件描述符。
39
40      ```ts
41      // Stage模型参考如下代码
42      const context = getContext(this);
43      const filePath = context.cacheDir + '/test.jpg';
44      const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
45      const fd : number = file?.fd;
46      ```
47
48      ```ts
49      // FA模型参考如下代码
50      import featureAbility from '@ohos.ability.featureAbility';
51
52      const context = featureAbility.getContext();
53      const filePath = context.getCacheDir() + "/test.jpg";
54      const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
55      const fd : number = file?.fd;
56      ```
57   - 方法三：通过资源管理器获取资源文件的ArrayBuffer。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfilecontent9-1)。
58
59      ```ts
60      // Stage模型
61      const context : Context = getContext(this);
62      // 获取resourceManager资源管理器
63      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
64      ```
65
66      ```ts
67      // FA模型
68      // 导入resourceManager资源管理器
69      import resourceManager from '@ohos.resourceManager';
70      import {BusinessError} from '@ohos.base';
71      resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
72         console.log("Succeeded in getting resourceManager")
73      }).catch((err : BusinessError) => {
74         console.error("Failed to get resourceManager")
75      });
76      ```
77
78      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。
79
80      ```ts
81      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
82         console.log("Succeeded in getting RawFileContent")
83         // 获取图片的ArrayBuffer
84         const buffer = fileData.buffer.slice(0);
85      }).catch((err : BusinessError) => {
86         console.error("Failed to get RawFileContent")
87      });
88
89      ```
90   - 方法四：通过资源管理器获取资源文件的RawFileDescriptor。具体请参考[ResourceManager API参考文档](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfd9-1)。
91
92      ```ts
93      // Stage模型
94      const context : Context = getContext(this);
95      // 获取resourceManager资源管理器
96      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
97      ```
98
99      ```ts
100      // FA模型
101      // 导入resourceManager资源管理器
102      import resourceManager from '@ohos.resourceManager';
103      import {BusinessError} from '@ohos.base';
104      resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
105         console.log("Succeeded in getting resourceManager")
106      }).catch((err : BusinessError) => {
107         console.error("Failed to get resourceManager")
108      });
109      ```
110
111      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFd()获取资源文件的RawFileDescriptor。
112
113      ```ts
114
115      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
116         console.log("Succeeded in getting resourceManager")
117      }).catch((err : BusinessError) => {
118         console.error("Failed to get resourceManager")
119      });
120      ```
121
122
1233. 创建ImageSource实例。
124   - 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
125
126      ```ts
127      // path为已获得的沙箱路径
128      const imageSource : image.ImageSource = image.createImageSource(filePath);
129      ```
130   - 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
131
132      ```ts
133      // fd为已获得的文件描述符
134      const imageSource : image.ImageSource = image.createImageSource(fd);
135      ```
136   - 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
137
138      ```ts
139      const imageSource : image.ImageSource = image.createImageSource(buffer);
140      ```
141   - 方法四：通过资源文件的RawFileDescriptor创建ImageSource。RawFileDescriptor可以通过步骤2的方案四获取。
142
143      ```ts
144      const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
145      ```
146
1474. 设置解码参数DecodingOptions，解码获取PixelMap图片对象。
148
149   ```ts
150   import {BusinessError} from '@ohos.base';
151   let decodingOptions : image.DecodingOptions = {
152       editable: true,
153       desiredPixelFormat: 3,
154   }
155   // 创建pixelMap并进行简单的旋转和缩放
156   imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
157      console.log("Succeeded in creating PixelMap")
158   }).catch((err : BusinessError) => {
159      console.error("Failed to create PixelMap")
160   });
161   ```
162
163   解码完成，获取到PixelMap对象后，可以进行后续[图片处理](image-transformation.md)。
164
1655. 释放pixelMap。
166   ```ts
167   pixelMap.release();
168   ```
169
170## 开发示例-对资源文件中的图片进行解码
171
1721. 获取resourceManager资源管理。
173
174   ```ts
175   const context : Context = getContext(this);
176   // 获取resourceManager资源管理
177   const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
178   ```
179
1802. 创建ImageSource。
181   - 通过rawfile文件夹下test.jpg的ArrayBuffer创建。
182     ```ts
183      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
184         console.log("Succeeded in getting RawFileContent")
185         // 获取图片的ArrayBuffer
186         const buffer = fileData.buffer.slice(0);
187         const imageSource : image.ImageSource = image.createImageSource(buffer);
188      }).catch((err : BusinessError) => {
189         console.error("Failed to get RawFileContent")
190      });
191     ```
192
193   - 通过rawfile文件夹下test.jpg的RawFileDescriptor创建。
194     ```ts
195      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
196         console.log("Succeeded in getting RawFd")
197         const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
198      }).catch((err : BusinessError) => {
199         console.error("Failed to get RawFd")
200      });
201     ```
2023. 创建PixelMap。
203
204   ```ts
205   imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
206      console.log("Succeeded in creating PixelMap")
207   }).catch((err : BusinessError) => {
208      console.error("Failed to creating PixelMap")
209   });
210   ```
211
2124. 释放pixelMap。
213   ```ts
214   pixelMap.release();
215   ```
216
217## 相关实例
218
219针对图片解码开发，有以下相关实例可供参考：
220
221- [图片编辑（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEdit)
222
223- [图片编辑（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate)