@ohos.effectKit (Image Effects)

The EffectKit module provides basic image processing capabilities, including brightness adjustment, blurring, grayscale adjustment, and color picker.

This module provides the following classes:

• Filter: a class that adds a specified effect to the image source.
• Color: a class used to store the color picked.
• ColorPicker: a smart color picker.

NOTE

The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.

Modules to Import

import effectKit from '@ohos.effectKit';

effectKit.createEffect

createEffect(source: image.PixelMap): Filter

Creates a Filter instance based on the pixel map.

System capability: SystemCapability.Multimedia.Image.Core

Parameters

Return value

Example

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

const color = new ArrayBuffer(96);
let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
image.createPixelMap(color, opts).then((pixelMap) => {
  let headFilter = effectKit.createEffect(pixelMap);
})

effectKit.createColorPicker

createColorPicker(source: image.PixelMap): Promise<ColorPicker>

Creates a ColorPicker instance based on the pixel map. This API uses a promise to return the result.

System capability: SystemCapability.Multimedia.Image.Core

Parameters

Return value

Example

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

const color = new ArrayBuffer(96);
let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
image.createPixelMap(color, opts).then((pixelMap) => {
  effectKit.createColorPicker(pixelMap).then(colorPicker => {
    console.info("color picker=" + colorPicker);
  }).catch(ex => console.error(".error=" + ex.toString()))
})

effectKit.createColorPicker

createColorPicker(source: image.PixelMap, callback: AsyncCallback<ColorPicker>): void

Creates a ColorPicker instance based on the pixel map. This API uses an asynchronous callback to return the result.

System capability: SystemCapability.Multimedia.Image.Core

Parameters

Example

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

const color = new ArrayBuffer(96);
let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
image.createPixelMap(color, opts).then((pixelMap) => {
  effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
    if (error) {
      console.log('Failed to create color picker.');
    } else {
      console.log('Succeeded in creating color picker.');
    }
  })
})

Color

A class that stores the color picked.

System capability: SystemCapability.Multimedia.Image.Core

ColorPicker

A class used to obtain the color from an image. Before calling any method of ColorPicker, use createColorPicker to create a ColorPicker instance.

getMainColor

getMainColor(): Promise<Color>

Obtains the main color from the image and writes the result to a Color instance. This API uses a promise to return the result.

System capability: SystemCapability.Multimedia.Image.Core

Return value

Example

colorPicker.getMainColor().then(color => {
    console.log('Succeeded in getting main color.');
    console.info(`color[ARGB]=${color.alpha},${color.red},${color.green},${color.blue}`);
}).catch(error => {
    console.log('Failed to get main color.');
})

getMainColorSync

getMainColorSync(): Color

Obtains the main color from the image and writes the result to a Color instance. This API returns the result in synchronous mode.

System capability: SystemCapability.Multimedia.Image.Core

Return value

Example

let color = colorPicker.getMainColorSync();
console.log('get main color =' + color);

Filter

A class used to add a specified effect to an image. Before calling any method of Filter, use createEffect to create a Filter instance.

blur

blur(radius: number): Filter

Adds the blur effect to the filter linked list, and returns the head node of the linked list.

System capability: SystemCapability.Multimedia.Image.Core

Parameters

Return value

Example

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

const color = new ArrayBuffer(96);
let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
image.createPixelMap(color, opts).then((pixelMap) => {
  let radius = 5;
  let headFilter = effectKit.createEffect(pixelMap);
  if (headFilter != null) {
    headFilter.blur(radius);
  }
})

brightness

brightness(bright: number): Filter

Adds the brightness effect to the filter linked list, and returns the head node of the linked list.

System capability: SystemCapability.Multimedia.Image.Core

Parameters

Return value

Example

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

const color = new ArrayBuffer(96);
let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
image.createPixelMap(color, opts).then((pixelMap) => {
  let bright = 0.5;
  let headFilter = effectKit.createEffect(pixelMap);
  if (headFilter != null) {
    headFilter.brightness(bright);
  }
})

grayscale

grayscale(): Filter

Adds the grayscale effect to the filter linked list, and returns the head node of the linked list.

System capability: SystemCapability.Multimedia.Image.Core

Return value

Example

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

const color = new ArrayBuffer(96);
let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
image.createPixelMap(color, opts).then((pixelMap) => {
  let headFilter = effectKit.createEffect(pixelMap);
  if (headFilter != null) {
    headFilter.grayscale();
  }
})

getPixelMap

getPixelMap(): image.PixelMap

Obtains image.PixelMap of the source image to which the filter linked list is added.

System capability: SystemCapability.Multimedia.Image.Core

Return value

Example

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

const color = new ArrayBuffer(96);
let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
image.createPixelMap(color, opts).then((pixelMap) => {
  let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap();
})