Image Decoding

Image decoding is the operation of decoding an image file in a supported format into a PixelMap for image display or processing. Currently, the following image formats are supported: JPEG, PNG, GIF, WebP, BMP, SVG, ICO, DNG, and HEIF. The supported formats may vary depending on the hardware.

How to Develop

Import the image module.

import image from '@ohos.multimedia.image';

Obtain an image.

Method 1: Directly obtain the image through the sandbox path. This method applies only to images in the application sandbox path. For details, see Obtaining Application File Paths. For details about the application sandbox and how to push files to the application sandbox, see Application Sandbox.
```
function getFilePath(context: Context): string {
  const filePath: string = context.cacheDir + '/test.jpg';
  return filePath;
}
```

Method 2: Obtain the file descriptor of the image through the sandbox path. To use this method, you must import the @kit.CoreFileKit module first.

import { fileIo } from '@kit.CoreFileKit';

function getFileFd(context: Context): number | undefined {
  const filePath: string = context.cacheDir + '/test.jpg';
  const file: fileIo.File = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE);
  const fd: number = file?.fd;
  return fd;
}

Method 3: Obtain the array buffer of the resource file through the resource manager. To use this method, you must import the @kit.LocalizationKit module first.

import { resourceManager } from '@kit.LocalizationKit';

async function getFileBuffer(context: Context): Promise<ArrayBuffer | undefined> {
  try {
    const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
    // Obtain the resource file content. The Uint8Array is returned.
    const fileData: Uint8Array = await resourceMgr.getRawFileContent('test.jpg');
    console.info('Successfully got RawFileContent');
    // Convert the array to an ArrayBuffer and return the ArrayBuffer.
    const buffer: ArrayBuffer = fileData.buffer.slice(0);
    return buffer;
  } catch (error) {
    console.error("Failed to get RawFileContent");
    return undefined;
  }
}

Method 4: Obtain the raw file descriptor of the resource file through the resource manager. To use this method, you must import the @kit.LocalizationKit module first.

import { resourceManager } from '@kit.LocalizationKit';

async function getRawFd(context: Context): Promise<resourceManager.RawFileDescriptor | undefined> {
  try {
    const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
    const rawFileDescriptor: resourceManager.RawFileDescriptor = await resourceMgr.getRawFd('test.jpg');
    console.info('Successfully got RawFileDescriptor');
    return rawFileDescriptor;
  } catch (error) {
    console.error('Failed to get RawFileDescriptor:');
    return undefined;
  }
}

Create an ImageSource instance.
- Method 1: Create an ImageSource instance using the sandbox path. The sandbox path can be obtained by using method 1 in step 2.
```
// path indicates the obtained sandbox path.
const imageSource : image.ImageSource = image.createImageSource(filePath);
```
- Method 2: Create an ImageSource instance using the file descriptor. The file descriptor can be obtained by using method 2 in step 2.
```
// **fd** is the obtained file descriptor.
const imageSource : image.ImageSource = image.createImageSource(fd);
```
- Method 3: Create an ImageSource instance using an array buffer. The array buffer can be obtained by using method 3 in step 2.
```
const imageSource : image.ImageSource = image.createImageSource(buffer);
```
- 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.
```
const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
```

Obtain the image information.

Obtain image information by using the ImageSource instance.

imageSource.getImageInfo(0,(error : BusinessError, imageInfo : image.ImageInfo) => {
    if(error) {
        console.error('getImageInfo failed.');
    } else {
        console.info('getImageInfo succeeded.');
    }
})

Set DecodingOptions and decode the image to obtain a pixel map.

import {BusinessError} from '@ohos.base';
let decodingOptions : image.DecodingOptions = {
    editable: true,
    desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
}
imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
    console.info("Succeeded in creating PixelMap")
}).catch((err : BusinessError) => {
    console.error("Failed to create PixelMap")
});

目录

Image Decoding

How to Develop