1# Using ImageSource to Decode Images
2
3Image decoding refers to the process of decoding an archived image in a supported format into a [PixelMap](image-overview.md) for image display or [processing](image-transformation.md). Currently, the following image formats are supported: JPEG, PNG, GIF, WebP, BMP, SVG, ICO, DNG, and HEIF (depending on the hardware).
4
5## How to Develop
6
7Read [Image](../../reference/apis-image-kit/js-apis-image.md#imagesource) for APIs related to image decoding.
8
91. Import the image module.
10
11   ```ts
12   import { image } from '@kit.ImageKit';
13   ```
14
152. Obtain an image.
16   - Method 1: Obtain the sandbox path. For details about how to obtain the sandbox path, see [Obtaining Application File Paths](../../application-models/application-context-stage.md#obtaining-application-file-paths). For details about the application sandbox and how to push files to the application sandbox directory, see [File Management](../../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   - Method 2: Obtain the file descriptor of the image through the sandbox path. For details, see [file.fs API Reference](../../reference/apis-core-file-kit/js-apis-file-fs.md).
24      To use this method, you must import the \@kit.CoreFileKit module first.
25
26      ```ts
27      import { fileIo as fs } from '@kit.CoreFileKit';
28      ```
29
30      Then call **fs.openSync()** to obtain the file descriptor.
31
32      ```ts
33      const context = getContext(this);
34      const filePath = context.cacheDir + '/test.jpg';
35      const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
36      const fd : number = file?.fd;
37      ```
38
39   - Method 3: Obtain the array buffer of the resource file through the resource manager. For details, see [ResourceManager API Reference](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfilecontent9-1).
40
41      ```ts
42      // Import the resourceManager module.
43      import { resourceManager } from '@kit.LocalizationKit';
44
45      const context : Context = getContext(this);
46      // Obtain a resource manager.
47      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
48      ```
49
50      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.
51
52      ```ts
53      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
54         console.log("Succeeded in getting RawFileContent")
55         // Obtain the array buffer of the image.
56         const buffer = fileData.buffer.slice(0);
57      }).catch((err : BusinessError) => {
58         console.error("Failed to get RawFileContent")
59      });
60
61      ```
62
63   - Method 4: Obtain the raw file descriptor of the resource file through the resource manager. For details, see [ResourceManager API Reference](../../reference/apis-localization-kit/js-apis-resource-manager.md#getrawfd9-1).
64
65      ```ts
66      // Import the resourceManager module.
67      import { resourceManager } from '@kit.LocalizationKit';
68
69      const context : Context = getContext(this);
70      // Obtain a resource manager.
71      const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
72      ```
73
74      The method of obtaining the resource manager varies according to the application model. After obtaining the resource manager, call **resourceMgr.getRawFd()** to obtain the raw file descriptor of the resource file.
75
76      ```ts
77
78      resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
79         console.log("Succeeded in getting RawFileDescriptor")
80      }).catch((err : BusinessError) => {
81         console.error("Failed to get RawFileDescriptor")
82      });
83      ```
84
853. Create an **ImageSource** instance.
86
87   - Method 1: Create an **ImageSource** instance using the sandbox path. The sandbox path can be obtained by using method 1 in step 2.
88
89      ```ts
90      // path indicates the obtained sandbox path.
91      const imageSource : image.ImageSource = image.createImageSource(filePath);
92      ```
93
94   - Method 2: Create an **ImageSource** instance using the file descriptor. The file descriptor can be obtained by using method 2 in step 2.
95
96      ```ts
97      // fd is the obtained file descriptor.
98      const imageSource : image.ImageSource = image.createImageSource(fd);
99      ```
100
101   - Method 3: Create an **ImageSource** instance using an array buffer. The array buffer can be obtained by using method 3 in step 2.
102
103      ```ts
104      const imageSource : image.ImageSource = image.createImageSource(buffer);
105      ```
106
107   - Method 4: Create an **ImageSource** instance using the raw file descriptor of the resource file. The raw file descriptor can be obtained by using method 4 in step 2.
108
109      ```ts
110      const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
111      ```
112
1134. Set **DecodingOptions** and decode the image to obtain a PixelMap.
114   - Set the expected format for decoding.
115      ```ts
116      import { BusinessError } from '@kit.BasicServicesKit';
117      import { image } from '@kit.ImageKit';
118
119      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.image'));
120      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
121      let decodingOptions : image.DecodingOptions = {
122         editable: true,
123         desiredPixelFormat: 3,
124      }
125      // Create a PixelMap.
126      imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
127         console.log("Succeeded in creating PixelMap")
128      }).catch((err : BusinessError) => {
129         console.error("Failed to create PixelMap")
130      });
131      ```
132   - Decode an HDR image.
133      ```ts
134      import { BusinessError } from '@kit.BasicServicesKit';
135      import { image } from '@kit.ImageKit';
136
137      let img = await getContext(this).resourceManager.getMediaContent($r('app.media.CUVAHdr'));
138      let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0));
139      let decodingOptions : image.DecodingOptions = {
140         // If IMAGE_DYNAMIC_RANGE_AUTO is passed in, decoding is performed based on the image format. If the image is an HDR resource, an HDR PixelMap is obtained after decoding.
141         desiredDynamicRange: image.DecodingDynamicRange.AUTO,
142      }
143      // Create a PixelMap.
144      imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
145         console.log("Succeeded in creating PixelMap")
146         // Check whether the PixelMap is the HDR content.
147         let info = pixelMap.getImageInfoSync();
148         console.log("pixelmap isHdr:" + info.isHdr);
149      }).catch((err : BusinessError) => {
150         console.error("Failed to create PixelMap")
151      });
152      ```
153   After the decoding is complete and the PixelMap is obtained, you can perform subsequent [image processing](image-transformation.md).
154
1555. Release the **PixelMap** instance.
156
157   ```ts
158   pixelMap.release();
159   ```
160
161## Sample Code - Decoding an Image in Resource Files
162
1631. Obtain a resource manager.
164
165   ```ts
166   // Import the resourceManager module.
167   import { resourceManager } from '@kit.LocalizationKit';
168
169   const context : Context = getContext(this);
170   // Obtain a resource manager.
171   const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
172   ```
173
1742. Create an **ImageSource** instance.
175   - Method 1: Create an **ImageSource** instance by using the array buffer of **test.jpg** in the **rawfile** folder.
176
177     ```ts
178      import { BusinessError } from '@kit.BasicServicesKit';
179
180      resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
181         console.log("Succeeded in getting RawFileContent")
182         // Obtain the array buffer of the image.
183         const buffer = fileData.buffer.slice(0);
184         const imageSource : image.ImageSource = image.createImageSource(buffer);
185      }).catch((err : BusinessError) => {
186         console.error("Failed to get RawFileContent")
187      });
188     ```
189
190   - Method 2: Create an **ImageSource** instance by using the raw file descriptor of **test.jpg** in the **rawfile** folder.
191
192     ```ts
193      import { BusinessError } from '@kit.BasicServicesKit';
194
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     ```
202
2033. Create a **PixelMap** instance.
204
205   ```ts
206   imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
207      console.log("Succeeded in creating PixelMap")
208   }).catch((err : BusinessError) => {
209      console.error("Failed to creating PixelMap")
210   });
211   ```
212
2134. Release the **PixelMap** and **ImageSource** instances.
214
215   Ensure that the asynchronous operations of the **PixelMap** and **ImageSource** instances have finished executing. After these variables are no longer needed, you can manually call the APIs below to release them.
216   ```ts
217   pixelMap.release();
218   imageSource.release();
219   ```
220