Image Decoding (ArkTS)

Image decoding refers to the process of decoding an archived image in a supported format into a pixel map for image display or processing. Currently, the following image formats are supported: JPEG, PNG, GIF, RAW, WebP, BMP, SVG, and ICO.

How to Develop

Read Image for APIs related to image decoding.

Import the image module.

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

Obtain an image.

Method 1: Obtain the sandbox path. For details about how to obtain the sandbox path, see Obtaining Application File Paths. For details about the application sandbox and how to push files to the application sandbox directory, see File Management.

// Code on the stage model
const context : Context = getContext(this);
const filePath : string = context.cacheDir + '/test.jpg';

// Code on the FA model
import featureAbility from '@ohos.ability.featureAbility';

const context = featureAbility.getContext();
const filePath = context.getCacheDir() + "/test.jpg";

Method 2: Obtain the file descriptor of the image through the sandbox path. For details, see file.fs API Reference. To use this method, you must import the @ohos.file.fs module first.

import fs from '@ohos.file.fs';

Then call fs.openSync() to obtain the file descriptor.

// Code on the stage model
const context = getContext(this);
const filePath = context.cacheDir + '/test.jpg';
const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
const fd : number = file?.fd;

// Code on the FA model
import featureAbility from '@ohos.ability.featureAbility';

const context = featureAbility.getContext();
const filePath = context.getCacheDir() + "/test.jpg";
const file : fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE);
const fd : number = file?.fd;

Method 3: Obtain the array buffer of the resource file through the resource manager. For details, see ResourceManager API Reference.

// Code on the stage model
const context : Context = getContext(this);
// Obtain a resource manager.
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

// Code on the FA model
// Import the resourceManager module.
import resourceManager from '@ohos.resourceManager';
import {BusinessError} from '@ohos.base';
resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
   console.log("Succeeded in getting resourceManager")
}).catch((err : BusinessError) => {
   console.error("Failed to get resourceManager")
});

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.

resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
   console.log("Succeeded in getting RawFileContent")
   // Obtain the array buffer of the image.
   const buffer = fileData.buffer.slice(0);
}).catch((err : BusinessError) => {
   console.error("Failed to get RawFileContent")
});

Method 4: Obtain the raw file descriptor of the resource file through the resource manager. For details, see ResourceManager API Reference.

// Code on the stage model
const context : Context = getContext(this);
// Obtain a resource manager.
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

// Code on the FA model
// Import the resourceManager module.
import resourceManager from '@ohos.resourceManager';
import {BusinessError} from '@ohos.base';
resourceManager.getResourceManager().then((resourceMgr : resourceManager.ResourceManager) => {
   console.log("Succeeded in getting resourceManager")
}).catch((err : BusinessError) => {
   console.error("Failed to get resourceManager")
});

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.


resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
   console.log("Succeeded in getting resourceManager")
}).catch((err : BusinessError) => {
   console.error("Failed to get resourceManager")
});

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);
```

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

import {BusinessError} from '@ohos.base';
let decodingOptions : image.DecodingOptions = {
    editable: true,
    desiredPixelFormat: 3,
}
// Create a pixel map and perform rotation and scaling on it.
imageSource.createPixelMap(decodingOptions).then((pixelMap : image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
}).catch((err : BusinessError) => {
   console.error("Failed to create PixelMap")
});

After the decoding is complete and the pixel map is obtained, you can perform subsequent image processing.

Release the PixelMap instance.
```
pixelMap.release();
```

Sample Code - Decoding an Image in Resource Files

Obtain a resource manager.

const context : Context = getContext(this);
// Obtain a resource manager.
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;

Create an ImageSource instance.

Create an ImageSource instance by using the array buffer of test.jpg in the rawfile folder.

 resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
    console.log("Succeeded in getting RawFileContent")
    // Obtain the array buffer of the image.
    const buffer = fileData.buffer.slice(0);
    const imageSource : image.ImageSource = image.createImageSource(buffer);
 }).catch((err : BusinessError) => {
    console.error("Failed to get RawFileContent")
 });

Create an ImageSource instance by using the raw file descriptor of test.jpg in the rawfile folder.

 resourceMgr.getRawFd('test.jpg').then((rawFileDescriptor : resourceManager.RawFileDescriptor) => {
    console.log("Succeeded in getting RawFd")
    const imageSource : image.ImageSource = image.createImageSource(rawFileDescriptor);
 }).catch((err : BusinessError) => {
    console.error("Failed to get RawFd")
 });

Create a PixelMap instance.

imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
}).catch((err : BusinessError) => {
   console.error("Failed to creating PixelMap")
});

Release the PixelMap instance.
```
pixelMap.release();
```