Using ImagePacker to Encode Images

Image encoding refers to the process of compressing a PixelMap into different image file formats for the purpose of saving and transferring.

You can use PackToData and PackToFile to encode a PixelMap into JPEG, WebP, PNG, and HEIC images.

Starting from API version 18, you can use PackToDataFromPixelmapSequence and PackToFileFromPixelmapSequence to encode multiple PixelMaps into the GIF format.

How to Develop

Read the API reference for APIs related to image encoding.

Encoding Images into File Streams

1. Import the required modules.

   // Import the required module.
   import { image } from '@kit.ImageKit';
   import { BusinessError } from '@kit.BasicServicesKit';
   import { common } from '@kit.AbilityKit';
   import { fileIo as fs } from '@kit.CoreFileKit';
   import { resourceManager } from '@kit.LocalizationKit';
   

   EncodingPixelMap.ets

2. Create an ImagePacker object.

   const imagePackerApi = image.createImagePacker();
   

   CodecUtility.ets

3. Set the encoding output stream and encoding parameters.

   • format indicates the image encoding format, and quality indicates the image quality. The value range is [0, 100], and the value 100 indicates the optimal quality.

     NOTE

     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.

     let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 95 };
     

     CodecUtility.ets

   • Encode HDR content.

     // If the resource is HDR and the device supports HDR encoding, the content is encoded in HDR. (This requires the resource to be HDR and the device to support HDR encoding and JPEG format.)
     packOpts.desiredDynamicRange = image.PackingDynamicRange.AUTO;
     

     CodecUtility.ets

4. Encode the image and save the encoded image.

   Method 1: Use PixelMap for encoding.

   async function packToDataFromPixelMap(pixelMap : image.PixelMap) {
     const imagePackerApi = image.createImagePacker();
     let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 95 };
     // If the resource is HDR and the device supports HDR encoding, the content is encoded in HDR. (This requires the resource to be HDR and the device to support HDR encoding and JPEG format.)
     packOpts.desiredDynamicRange = image.PackingDynamicRange.AUTO;
     try{
       let data = await imagePackerApi.packToData(pixelMap, packOpts);
       // data is the file stream obtained after encoding. You can write the file and save it to obtain an image.
       copyData = new ArrayBuffer(0);
       copyData = data;
     } catch (error) {
       console.error('Failed to pack the pixelMap to data. And the error is: ' + error);
     }
   }
   

   CodecUtility.ets

   Method 2: Use ImageSource for encoding.

   async function packToDataFromImageSource(imageSource : image.ImageSource) {
     const imagePackerApi = image.createImagePacker();
     let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 95 };
     try {
       let data = await imagePackerApi.packToData(imageSource, packOpts);
       // data is the file stream obtained after encoding. You can write the file and save it to obtain an image.
       copyData = new ArrayBuffer(0);
       copyData = data;
     } catch (error) {
       console.error('Failed to pack the imageSource to data. And the error is: ' + error);
     }
   }
   

   CodecUtility.ets

Encoding Images into Files

During encoding, you can pass in a file path so that the encoded memory data is directly written to the file.

• Method 1: Use PixelMap to encode the image and pack it into a file.

  async function packToFileFromPixelMap(context : Context, pixelMap : image.PixelMap) {
    const imagePackerApi = image.createImagePacker();
    let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 95 };
    const path : string = context.cacheDir + '/pixel_map.jpg';
    let file = fs.openSync(path, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
    try {
      await imagePackerApi.packToFile(pixelMap, file.fd, packOpts);
    } catch (error) {
      console.error('Failed to pack the pixelMap to file. And the error is: ' + error);
    }
  }
  

  CodecUtility.ets

• Method 2: Use ImageSource to encode the image and pack it into a file.

  async function packToFileFromImageSource(context : Context, imageSource : image.ImageSource) {
    const imagePackerApi = image.createImagePacker();
    let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 95 };
    const filePath : string = context.cacheDir + '/image_source.jpg';
    let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
    try {
      await imagePackerApi.packToFile(imageSource, file.fd, packOpts);
    } catch (error) {
      console.error('Failed to pack the imageSource to file. And the error is: ' + error);
    }
  }
  

  CodecUtility.ets

Saving Encoded Images to Gallery

You can save the encoded image to the application sandbox, and use the media file management APIs to save media library resources.