• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 图片解码
2
3图片解码指将所支持格式的存档图片解码成统一的[PixelMap](image-overview.md)，以便在应用或系统中进行图片显示或[图片处理](image-transformation.md)。当前支持的存档图片格式包括JPEG、PNG、GIF、RAW、WebP、BMP、SVG。
4
5## 开发步骤
6
7图片解码相关API的详细介绍请参见：[图片解码接口说明](../reference/apis/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 = getContext(this);
21      const filePath = 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/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.openSync(filePath, fs.OpenMode.READ_WRITE);
45      const fd = 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.openSync(filePath, fs.OpenMode.READ_WRITE);
55      const fd = file?.fd;
56      ```
57   - 方法三：通过资源管理器获取资源文件的ArrayBuffer。具体请参考[ResourceManager API参考文档](../reference/apis/js-apis-resource-manager.md#getrawfilecontent9-1)。
58
59      ```ts
60      // Stage模型
61      const context = getContext(this);
62      // 获取resourceManager资源管理器
63      const resourceMgr = context.resourceManager;
64      ```
65
66      ```ts
67      // FA模型
68      // 导入resourceManager资源管理器
69      import resourceManager from '@ohos.resourceManager';
70      const resourceMgr = await resourceManager.getResourceManager();
71      ```
72
73      不同模型获取资源管理器的方式不同，获取资源管理器后，再调用resourceMgr.getRawFileContent()获取资源文件的ArrayBuffer。
74
75      ```ts
76      const fileData = await resourceMgr.getRawFileContent('test.jpg');
77      // 获取图片的ArrayBuffer
78      const buffer = fileData.buffer;
79      ```
80
813. 创建ImageSource实例。
82   - 方法一：通过沙箱路径创建ImageSource。沙箱路径可以通过步骤2的方法一获取。
83
84      ```ts
85      // path为已获得的沙箱路径
86      const imageSource = image.createImageSource(filePath);
87      ```
88   - 方法二：通过文件描述符fd创建ImageSource。文件描述符可以通过步骤2的方法二获取。
89
90      ```ts
91      // fd为已获得的文件描述符
92      const imageSource = image.createImageSource(fd);
93      ```
94   - 方法三：通过缓冲区数组创建ImageSource。缓冲区数组可以通过步骤2的方法三获取。
95
96      ```ts
97      const imageSource = image.createImageSource(buffer);
98      ```
99
1004. 设置解码参数DecodingOptions，解码获取PixelMap图片对象。
101
102   ```ts
103   let decodingOptions = {
104       editable: true,
105       desiredPixelFormat: 3,
106   }
107   // 创建pixelMap并进行简单的旋转和缩放
108   const pixelMap = await imageSource.createPixelMap(decodingOptions);
109   ```
110
111   解码完成，获取到PixelMap对象后，可以进行后续[图片处理](image-transformation.md)。
112
113## 开发示例-对资源文件中的图片进行解码
114
1151. 获取resourceManager资源管理。
116
117   ```ts
118   const context = getContext(this);
119   // 获取resourceManager资源管理
120   const resourceMgr = context.resourceManager;
121   ```
122
1232. 获取rawfile文件夹下test.jpg的ArrayBuffer。
124
125   ```ts
126   const fileData = await resourceMgr.getRawFileContent('test.jpg');
127   // 获取图片的ArrayBuffer
128   const buffer = fileData.buffer;
129   ```
130
1313. 创建imageSource。
132
133   ```ts
134   const imageSource = image.createImageSource(buffer);
135   ```
136
1374. 创建PixelMap。
138
139   ```ts
140   const pixelMap = await imageSource.createPixelMap();
141   ```
142