1# Using ImagePacker to Encode Images
2
3Image encoding refers to the process of encoding a pixel map into an archived image in different formats (only in JPEG, WebP, and PNG currently) for subsequent processing, such as storage and transmission.
4
5## How to Develop
6
7Read [Image API Reference](../../reference/apis-image-kit/js-apis-image.md#imagepacker) for APIs related to image encoding.
8
9### Encoding Images into File Streams
10
111. Create an **ImagePacker** object.
12
13   ```ts
14   // Import the required module.
15   import { image } from '@kit.ImageKit';
16   
17   const imagePackerApi = image.createImagePacker();
18   ```
19
202. Set the encoding output stream and encoding parameters.
21
22-  **format** indicates the image encoding format, and **quality** indicates the image quality. The value ranges from 0 to 100, and the value 100 indicates the optimal quality.
23
24      > **NOTE**
25      >
26      > According to the MIME protocol, the standard encoding format is image/jpeg. When the APIs provided by the image module are used for encoding, **PackingOption.format** must be set to **image/jpeg**. The file name extension of the encoded image file can be .jpg or .jpeg, and the file can be used on platforms that support image/jpeg decoding.
27
28      ```ts
29      let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 };
30      ```
31
32-  Encode the content as HDR content. (The resource must be HDR resource and the JPEG format must be supported.)
33   
34   ```ts
35   packOpts.desiredDynamicRange = image.PackingDynamicRange.AUTO;
36   ```
37
383. [Create a PixelMap object or an ImageSource object](image-decoding.md).
39
404. Encode the image and save the encoded image.
41
42-  Method 1: Use **PixelMap** for encoding.
43
44   ```ts
45   import { BusinessError } from '@kit.BasicServicesKit';
46   imagePackerApi.packing(pixelMap, packOpts).then( (data : ArrayBuffer) => {
47     // data is the file stream obtained after packing. You can write the file and save it to obtain an image.
48   }).catch((error : BusinessError) => { 
49     console.error('Failed to pack the image. And the error is: ' + error); 
50   })
51   ```
52
53-  Method 2: Use **ImageSource** for encoding.
54
55   ```ts
56   import { BusinessError } from '@kit.BasicServicesKit';
57   imagePackerApi.packing(imageSource, packOpts).then( (data : ArrayBuffer) => {
58       // data is the file stream obtained after packing. You can write the file and save it to obtain an image.
59   }).catch((error : BusinessError) => { 
60     console.error('Failed to pack the image. And the error is: ' + error); 
61   })
62   ```
63
64### Encoding Images into Files
65
66During encoding, you can pass in a file path so that the encoded memory data is directly written to the file.
67
68-  Method 1: Use **PixelMap** to encode the image and pack it into a file.
69
70   ```ts
71   import { BusinessError } from '@kit.BasicServicesKit';
72   import { fileIo } from '@kit.CoreFileKit';
73   const context : Context = getContext(this);
74   const path : string = context.cacheDir + "/pixel_map.jpg";
75   let file = fileIo.openSync(path, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
76   imagePackerApi.packToFile(pixelMap, file.fd, packOpts).then(() => {
77       // Pack the image into the file.
78   }).catch((error : BusinessError) => { 
79     console.error('Failed to pack the image. And the error is: ' + error); 
80   })
81   ```
82
83-  Method 2: Use **ImageSource** to encode the image and pack it into a file.
84
85   ```ts
86   import { BusinessError } from '@kit.BasicServicesKit';
87   import { fileIo } from '@kit.CoreFileKit';
88   const context : Context = getContext(this);
89   const filePath : string = context.cacheDir + "/image_source.jpg";
90   let file = fileIo.openSync(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
91   imagePackerApi.packToFile(imageSource, file.fd, packOpts).then(() => {
92       // Pack the image into the file.
93   }).catch((error : BusinessError) => { 
94     console.error('Failed to pack the image. And the error is: ' + error); 
95   })
96   ```
97