Using ImagePacker to Encode Images

How to Develop

For details about image encoding APIs, see ImagePacker.

Encoding Images into File Streams

1. Import the required modules.

   // Import related modules.
   import { image } from '@kit.ImageKit';
   import { BusinessError } from '@kit.BasicServicesKit';
   import { common } from '@kit.AbilityKit';
   import { fileIo } from '@kit.CoreFileKit';
   import { resourceManager } from '@kit.LocalizationKit';

   EncodingPixelMap.ets

2. Set the encoding options PackingOption.

   2.1 This example encodes an image in JPEG format. The target encoding format follows the MIME standard, so PackingOption.format must be set to image/jpeg, and the encoded file extension can be .jpg or .jpeg.

   // The default quality value is 0, and a value no less than 80 is recommended. In this example, it is uniformly set to 90 to balance image quality and file size.
   let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 90 };

   CodecUtility.ets

   2.2 When the image source is HDR and you want to encode it as an HDR image file, you must additionally configure desiredDynamicRange.

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

   CodecUtility.ets

3. Encapsulate a function that accepts an imageSource or pixelMap. Use packToData to encode the image into an ArrayBuffer, or packToFile to encode the image into a file.

   NOTE

   Before encoding, obtain an imageSource or pixelMap first. For details, see Using ImageSource to Decode Images.

   • Define copyData to obtain the encoded file stream for subsequent saving as an image or decoding for display.

     let copyData: ArrayBuffer = new ArrayBuffer(0);

     CodecUtility.ets

   • Encode a pixelMap to an ArrayBuffer.

     async function packToDataFromPixelMap(pixelMap : image.PixelMap) {
       const imagePackerApi = image.createImagePacker();
       // The default value of quality is 0, and a value no lower than 80 is recommended. In this example, quality is uniformly set to 90 to balance image quality and file size.
       let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 90 };
       // If the resource itself is HDR and the device supports HDR encoding, the content is encoded as HDR (the resource must be HDR, the device must support HDR encoding, and the JPEG format is supported).
       packOpts.desiredDynamicRange = image.PackingDynamicRange.AUTO;
       try{
         let data = await imagePackerApi.packToData(pixelMap, packOpts);
         // data is the file stream obtained from encoding. Write it to a file to save 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

   • Encode an imageSource to an ArrayBuffer.

     async function packToDataFromImageSource(imageSource : image.ImageSource) {
       const imagePackerApi = image.createImagePacker();
       // The default value of quality is 0. It is recommended to set it to no less than 80. In this example, it is uniformly set to 90 to balance image quality and file size.
       let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 90 };
       try {
         let data = await imagePackerApi.packToData(imageSource, packOpts);
         // data is the file stream obtained from encoding. Write it to a file to save 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

   • Encode a pixelMap to a file.

     async function packToFileFromPixelMap(context : Context, pixelMap : image.PixelMap) {
       const imagePackerApi = image.createImagePacker();
       // The default value of quality is 0, and a value no lower than 80 is recommended. In this example, it is uniformly set to 90 to balance image quality and file size.
       let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 90 };
       const path : string = context.cacheDir + '/pixel_map.jpg';
       let file: fileIo.File | undefined = undefined;
       try {
         file = fileIo.openSync(path, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
         await imagePackerApi.packToFile(pixelMap, file.fd, packOpts);
       } catch (error) {
         console.error('Failed to pack the pixelMap to file. And the error is: ' + error);
       } finally {
         if (file) {
           fileIo.closeSync(file.fd);
         }
       }
     }

     CodecUtility.ets

   • Encode an imageSource to a file.

     async function packToFileFromImageSource(context : Context, imageSource : image.ImageSource) {
       const imagePackerApi = image.createImagePacker();
       // The default value of quality is 0, and a value no lower than 80 is recommended. In this example, quality is uniformly set to 90 to balance image quality and file size.
       let packOpts : image.PackingOption = { format: 'image/jpeg', quality: 90 };
       const filePath : string = context.cacheDir + '/image_source.jpg';
       let file: fileIo.File | undefined = undefined;
       try {
         file = fileIo.openSync(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);
         await imagePackerApi.packToFile(imageSource, file.fd, packOpts);
       } catch (error) {
         console.error('Failed to pack the imageSource to file. And the error is: ' + error);
       } finally {
         if (file) {
           fileIo.closeSync(file.fd);
         }
       }
     }

     CodecUtility.ets

4. Save the image to the gallery.

After encoding the image to an ArrayBuffer or file, you can use the relevant APIs of Media Library Kit to save media library resources to the gallery.

Sample Code

• Image Compression