• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Image Decoding
2
3Image decoding refers to the process of decoding an archived image in a supported format into a [pixel map](image-overview.md) for image display or [processing](image-transformation.md). Currently, the following image formats are supported: JPEG, PNG, GIF, RAW, WebP, BMP, and SVG.
4
5## How to Develop
6
7Read [Image](../reference/apis/js-apis-image.md#imagesource) for APIs related to image decoding.
8
91. Import the image module.
10
11   ```ts
12   import image from '@ohos.multimedia.image';
13   ```
14
152. Obtain an image.
16   - Method 1: Obtain the sandbox path. For details about how to obtain the sandbox path, see [Obtaining the Application Development Path](../application-models/application-context-stage.md#obtaining-the-application-development-path). For details about the application sandbox and how to push files to the application sandbox, see [File Management](../file-management/app-sandbox-directory.md).
17
18      ```ts
19      // Code on the stage model
20      const context = getContext(this);
21      const filePath = context.cacheDir + '/test.jpg';
22      ```
23
24      ```ts
25      // Code on the FA model
26      import featureAbility from '@ohos.ability.featureAbility';
27
28      const context = featureAbility.getContext();
29      const filePath = context.getCacheDir() + "/test.jpg";
30      ```
31   - Method 2: Obtain the file descriptor of the image through the sandbox path. For details, see [file.fs API Reference] (../reference/apis/js-apis-file-fs.md).
32      To use this method, you must import the \@ohos.file.fs module first.
33
34      ```ts
35      import fs from '@ohos.file.fs';
36      ```
37
38      Then call **fs.openSync()** to obtain the file descriptor.
39
40      ```ts
41      // Code on the stage model
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      // Code on the FA model
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   - Method 3: Obtain the array buffer of the resource file through the resource manager. For details, see [ResourceManager API Reference](../reference/apis/js-apis-resource-manager.md#getrawfilecontent9-1).
58
59      ```ts
60      // Code on the stage model
61      const context = getContext(this);
62      // Obtain a resource manager.
63      const resourceMgr = context.resourceManager;
64      ```
65
66      ```ts
67      // Code on the FA model
68      // Import the resourceManager module.
69      import resourceManager from '@ohos.resourceManager';
70      const resourceMgr = await resourceManager.getResourceManager();
71      ```
72
73      The method of obtaining the resource manager varies according to the application model. After obtaining the resource manager, call **resourceMgr.getRawFileContent()** to obtain the array buffer of the resource file.
74
75      ```ts
76      const fileData = await resourceMgr.getRawFileContent('test.jpg');
77      // Obtain the array buffer of the image.
78      const buffer = fileData.buffer;
79      ```
80
813. Create an **ImageSource** instance.
82   - Method 1: Create an **ImageSource** instance using the sandbox path. The sandbox path can be obtained by using method 1 in step 2.
83
84      ```ts
85      // path indicates the obtained sandbox path.
86      const imageSource = image.createImageSource(filePath);
87      ```
88   - Method 2: Create an **ImageSource** instance using the file descriptor. The file descriptor can be obtained by using method 2 in step 2.
89
90      ```ts
91      // fd is the obtained file descriptor.
92      const imageSource = image.createImageSource(fd);
93      ```
94   - Method 3: Create an **ImageSource** instance using a buffer array. The buffer array can be obtained by using method 3 in step 2.
95
96      ```ts
97      const imageSource = image.createImageSource(buffer);
98      ```
99
1004. Set **DecodingOptions** and decode the image to obtain a pixel map.
101
102   ```ts
103   let decodingOptions = {
104       editable: true,
105       desiredPixelFormat: 3,
106   }
107   // Create a pixel map and perform rotation and scaling on it.
108   const pixelMap = await imageSource.createPixelMap(decodingOptions);
109   ```
110
111   After the decoding is complete and the pixel map is obtained, you can perform subsequent [image processing](image-transformation.md).
112
113## Sample Code - Decoding an Image in Resource Files
114
1151. Obtain a resource manager.
116
117   ```ts
118   const context = getContext(this);
119   // Obtain a resourceManager instance.
120   const resourceMgr = context.resourceManager;
121   ```
122
1232. Obtain the array buffer of the **test.jpg** file in the **rawfile** folder.
124
125   ```ts
126   const fileData = await resourceMgr.getRawFileContent('test.jpg');
127   // Obtain the array buffer of the image.
128   const buffer = fileData.buffer;
129   ```
130
1313. Create an **ImageSource** instance.
132
133   ```ts
134   const imageSource = image.createImageSource(buffer);
135   ```
136
1374. Create a **PixelMap** instance.
138
139   ```ts
140   const pixelMap = await imageSource.createPixelMap();
141   ```
142