本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
@ohos.effectKit (图像效果)
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
本文导读
图像效果模块提供了处理图像的基础能力，包括亮度调节、模糊化、灰度调节和智能取色等。effectKit用于离线处理图像（如pixelmap、png、jpeg）以获得视觉效果，而uiEffect则实时接入渲染服务，针对屏幕帧缓存进行处理以获得动态视觉效果。
该模块提供以下图像效果相关的常用功能：
- Filter：效果类，用于添加指定效果到图像源。
- Color：颜色类，用于保存取色的结果。
- ColorPicker：智能取色器。
说明
导入模块
import { effectKit } from "@kit.ArkGraphics2D"; effectKit.createEffect
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
createEffect(source: image.PixelMap): Filter
通过传入的PixelMap创建Filter实例。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| source | image.PixelMap | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见Image Kit简介。 |
返回值：
| 类型 | 说明 |
|---|---|
| Filter | 返回不带任何效果的Filter链表头节点，失败时返回null。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
let headFilter = effectKit.createEffect(pixelMap);
}) effectKit.createColorPicker
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
createColorPicker(source: image.PixelMap): Promise<ColorPicker>
通过传入的PixelMap创建ColorPicker实例，使用Promise异步回调。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| source | image.PixelMap | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见Image Kit简介。 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise<ColorPicker> | Promise对象。返回创建的ColorPicker实例。 |
错误码：
以下错误码的详细介绍请参见通用错误码。
| 错误码ID | 错误信息 |
|---|---|
| 401 | Input parameter error. |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
import { BusinessError } from "@kit.BasicServicesKit";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap).then(colorPicker => {
console.info("Succeeded in creating colorPicker.");
}).catch((err : BusinessError) => {
console.error(`Failed to create colorPicker. Code: ${err.code}, message: ${err.message}`);
})
}) effectKit.createColorPicker10+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
createColorPicker(source: image.PixelMap, region: Array<number>): Promise<ColorPicker>
通过传入的PixelMap创建选定取色区域的ColorPicker实例，使用Promise异步回调。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| source | image.PixelMap | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见Image Kit简介。 |
| region | Array<number> | 是 | 指定图片的取色区域。 数组元素个数为4，取值范围为[0, 1]，分别表示图片区域的左、上、右、下位置，图片最左侧和最上侧对应位置0，最右侧和最下侧对应位置1。数组第三个元素需大于第一个元素，第四个元素需大于第二个元素。 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise<ColorPicker> | Promise对象。返回创建的ColorPicker实例。 |
错误码：
以下错误码的详细介绍请参见通用错误码。
| 错误码ID | 错误信息 |
|---|---|
| 401 | Input parameter error. |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
import { BusinessError } from "@kit.BasicServicesKit";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, [0, 0, 1, 1]).then(colorPicker => {
console.info("Succeeded in creating colorPicker.");
}).catch((err : BusinessError) => {
console.error(`Failed to create colorPicker. Code: ${err.code}, message: ${err.message}`);
})
}) effectKit.createColorPicker
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
createColorPicker(source: image.PixelMap, callback: AsyncCallback<ColorPicker>): void
通过传入的PixelMap创建ColorPicker实例，使用callback异步回调。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| source | image.PixelMap | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见Image Kit简介。 |
| callback | AsyncCallback<ColorPicker> | 是 | 回调函数。返回创建的ColorPicker实例。 |
错误码：
以下错误码的详细介绍请参见通用错误码。
| 错误码ID | 错误信息 |
|---|---|
| 401 | Input parameter error. |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
}
})
}) effectKit.createColorPicker10+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
createColorPicker(source: image.PixelMap, region:Array<number>, callback: AsyncCallback<ColorPicker>): void
通过传入的PixelMap创建选定取色区域的ColorPicker实例，使用callback异步回调。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| source | image.PixelMap | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见Image Kit简介。 |
| region | Array<number> | 是 | 指定图片的取色区域。 数组元素个数为4，取值范围为[0, 1]，数组元素分别表示图片区域的左、上、右、下位置，图片最左侧和最上侧对应位置0，最右侧和最下侧对应位置1。数组第三个元素需大于第一个元素，第四个元素需大于第二个元素。 |
| callback | AsyncCallback<ColorPicker> | 是 | 回调函数。返回创建的ColorPicker实例。 |
错误码：
以下错误码的详细介绍请参见通用错误码。
| 错误码ID | 错误信息 |
|---|---|
| 401 | Input parameter error. |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, [0, 0, 1, 1], (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
}
})
}) Color
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
颜色类，用于保存取色的结果。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
| 名称 | 类型 | 只读 | 可选 | 说明 |
|---|---|---|---|---|
| red | number | 否 | 否 | 红色分量值，取值范围[0x0, 0xFF]。 |
| green | number | 否 | 否 | 绿色分量值，取值范围[0x0, 0xFF]。 |
| blue | number | 否 | 否 | 蓝色分量值，取值范围[0x0, 0xFF]。 |
| alpha | number | 否 | 否 | 透明通道分量值，取值范围[0x0, 0xFF]。 |
TileMode14+
Phone14+PC/2in114+Tablet14+TV19+Wearable18+
着色器效果平铺模式的枚举。
系统能力： SystemCapability.Multimedia.Image.Core
| 名称 | 值 | 说明 |
|---|---|---|
| CLAMP | 0 | 如果着色器效果超出其原始边界，剩余区域使用着色器的边缘颜色填充。 |
| REPEAT | 1 | 在水平和垂直方向上重复着色器效果。 |
| MIRROR | 2 | 在水平和垂直方向上重复着色器效果，交替镜像图像，以便相邻图像始终接合。 |
| DECAL | 3 | 仅在其原始边界内渲染着色器效果。 |
ColorPicker
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
取色类，用于从一张图像数据中获取它的主要颜色。在调用ColorPicker的方法前，需要先通过createColorPicker创建一个ColorPicker实例。
getMainColor
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
getMainColor(): Promise<Color>
读取图像主色的颜色值，结果写入Color里，使用Promise异步回调。该接口通过图像缩放算法，根据周围像素的加权计算，将原图缩小到1个像素以得到主色。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| Promise<Color> | Promise对象。返回图像主色对应的颜色值，失败时返回错误信息。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts: image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
colorPicker.getMainColor().then(color => {
console.info('Succeeded in getting main color.');
console.info(`color[ARGB]=${color.alpha},${color.red},${color.green},${color.blue}`);
})
}
})
}) 
getMainColorSync
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
getMainColorSync(): Color
读取图像主色的颜色值，结果写入Color里，使用同步方式返回。该接口通过图像缩放算法，根据周围像素的加权计算，将原图缩小到1个像素以得到主色。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| Color | Color实例，即图像主色对应的颜色值，失败时返回null。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
let color = colorPicker.getMainColorSync();
console.info('get main color =' + color);
}
})
}) 
getLargestProportionColor10+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
getLargestProportionColor(): Color
读取图像中占比最多的颜色值，结果写入Color里，使用同步方式返回。该接口使用中位切分算法划分颜色空间，获取占比最多的颜色空间的平均颜色。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| Color | Color实例，即图像占比最多的颜色值，失败时返回null。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
let color = colorPicker.getLargestProportionColor();
console.info('get largest proportion color =' + color);
}
})
}) 
getTopProportionColors12+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
getTopProportionColors(colorCount: number): Array<Color | null>
读取图像占比靠前的颜色值，个数由colorCount指定，结果写入Color的数组里，使用同步方式返回。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| colorCount | number | 是 | 需要取主色的个数，向下取整。 说明： 在HarmonyOS 6.1.0之前，取值范围为[1, 10]，取色个数大于10视为取前10个；从HarmonyOS 6.1.0开始，取值范围为[1, 20]，取色个数大于20视为取前20个。 |
返回值：
| 类型 | 说明 |
|---|---|
| Array<Color | null> | Color数组，即图像占比前colorCount的颜色值数组，按占比排序。 - 当实际读取的特征色个数小于colorCount时，数组大小为实际特征色个数。 - 取色失败或取色个数小于1返回[null]。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
let colors = colorPicker.getTopProportionColors(2);
for(let index = 0; index < colors.length; index++) {
if (colors[index]) {
console.info('get top proportion colors: index ' + index + ', color ' + colors[index]);
}
}
}
})
}) 
getHighestSaturationColor10+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
getHighestSaturationColor(): Color
读取图像饱和度最高的颜色值，结果写入Color里，使用同步方式返回。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| Color | Color实例，即图像饱和度最高的颜色值，失败时返回null。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts: image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
let color = colorPicker.getHighestSaturationColor();
console.info('get highest saturation color =' + color);
}
})
}) 
getAverageColor10+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
getAverageColor(): Color
读取图像平均的颜色值，结果写入Color里，使用同步方式返回。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| Color | Color实例，即图像平均的颜色值，失败时返回null。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts: image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
let color = colorPicker.getAverageColor();
console.info('get average color =' + color);
}
})
}) 
isBlackOrWhiteOrGrayColor10+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
isBlackOrWhiteOrGrayColor(color: number): boolean
判断图像是否为黑白灰颜色，返回true或false。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| color | number | 是 | 需要判断是否黑白灰色的颜色值，取值范围[0x0, 0xFFFFFFFF]。 |
返回值：
| 类型 | 说明 |
|---|---|
| boolean | 如果图像为黑白灰颜色，则返回true；否则返回false。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts: image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
}
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
if (error) {
console.error('Failed to create color picker.');
} else {
console.info('Succeeded in creating color picker.');
let bJudge = colorPicker.isBlackOrWhiteOrGrayColor(0xFFFFFFFF);
console.info('is black or white or gray color[bool](white) =' + bJudge);
}
})
}) Filter
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
图像效果类，用于将指定的效果添加到输入图像中。在调用Filter的方法前，需要先通过createEffect创建一个Filter实例。
blur
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
blur(radius: number): Filter
将模糊效果添加到效果链表中，返回链表的头节点。
说明
该接口为静态模糊接口，为静态图像提供模糊化效果，如果要对组件进行实时渲染的模糊，可以使用动态模糊。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| radius | number | 是 | 模糊半径，单位为px。模糊效果与所设置的值成正比，值越大效果越明显。 |
返回值：
| 类型 | 说明 |
|---|---|
| Filter | 返回已添加的图像效果。 |
示例：
import { image } from '@kit.ImageKit';
import { effectKit } from '@kit.ArkGraphics2D';
import { common } from '@kit.AbilityKit';
// 传入读取的图片数据
function ImageBlur(Image: ArrayBuffer): Promise<image.PixelMap> {
return new Promise(async (resolve, reject) => {
let imageSource = image.createImageSource(Image);
await imageSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
let radius = 5;
let headFilter = effectKit.createEffect(pixelMap);
if (headFilter != null) {
// 对图片添加效果标识
headFilter.blur(radius);
}
// 按照添加的效果标识对图片进行处理并且返回处理好的图片数据
headFilter.getEffectPixelMap().then(imageData => {
resolve(imageData);
})
})
})
}
@Entry
@Component
struct Index {
@State imagePixelMap: image.PixelMap | null = null;
private imageBuffer: ArrayBuffer | undefined = undefined;
// 读取rawfile文件夹下的图片文件，也可根据需求更换读取方式，保证最终得到的是ArrayBuffer格式的图片数据即可
async getFileBuffer(): Promise<ArrayBuffer | undefined> {
try{
const context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
const fileData: Uint8Array = await context.resourceManager.getRawFileContent('image.png');
const buffer: ArrayBuffer = fileData.buffer.slice(0);
return buffer;
}catch (err){
return undefined
}
}
async aboutToAppear(): Promise<void>{
this.imageBuffer = await this.getFileBuffer();
if(this.imageBuffer == undefined){
return;
}
// 图片处理为异步操作，可以依据是否需要拿到处理好的图片数据再进行下一步逻辑，按需添加await进行同步
this.imagePixelMap = await ImageBlur(this.imageBuffer);
}
build() {
Column() {
Image(this.imagePixelMap)
.width(304)
.height(305)
}
.height('100%')
.width('100%')
}
} 
blur14+
Phone14+PC/2in114+Tablet14+TV19+Wearable18+
blur(radius: number, tileMode: TileMode): Filter
将模糊效果添加到效果链表中，返回链表的头节点。
说明
该接口为静态模糊接口，为静态图像提供模糊化效果，如果要对组件进行实时渲染的模糊，可以使用动态模糊。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| radius | number | 是 | 模糊半径，单位为px。模糊效果与所设置的值成正比，值越大效果越明显。 |
| tileMode | TileMode | 是 | 着色器效果平铺模式。影响图像边缘的模糊效果。目前仅支持CPU渲染，所以目前着色器平铺模式仅支持DECAL。 |
返回值：
| 类型 | 说明 |
|---|---|
| Filter | 返回已添加的图像效果。 |
示例：
import { image } from '@kit.ImageKit';
import { effectKit } from '@kit.ArkGraphics2D';
import { common } from '@kit.AbilityKit';
// 传入读取的图片数据
function ImageBlur(Image: ArrayBuffer): Promise<image.PixelMap> {
return new Promise(async (resolve, reject) => {
let imageSource = image.createImageSource(Image);
await imageSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
let radius = 30;
let headFilter = effectKit.createEffect(pixelMap);
if (headFilter != null) {
// 对图片添加效果标识
headFilter.blur(radius, effectKit.TileMode.DECAL);
}
// 按照添加的效果标识对图片进行处理并且返回处理好的图片数据
headFilter.getEffectPixelMap().then(imageData => {
resolve(imageData);
})
})
})
}
@Entry
@Component
struct Index {
@State imagePixelMap: image.PixelMap | null = null;
private imageBuffer: ArrayBuffer | undefined = undefined;
// 读取rawfile文件夹下的图片文件，也可根据需求更换读取方式，保证最终得到的是ArrayBuffer格式的图片数据即可
async getFileBuffer(): Promise<ArrayBuffer | undefined> {
try{
const context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
const fileData: Uint8Array = await context.resourceManager.getRawFileContent('image.png');
const buffer: ArrayBuffer = fileData.buffer.slice(0);
return buffer;
}catch (err){
return undefined
}
}
async aboutToAppear(): Promise<void>{
this.imageBuffer = await this.getFileBuffer();
if(this.imageBuffer == undefined){
return;
}
// 图片处理为异步操作，可以依据是否需要拿到处理好的图片数据再进行下一步逻辑，按需添加await进行同步
this.imagePixelMap = await ImageBlur(this.imageBuffer);
}
build() {
Column() {
Image(this.imagePixelMap)
.width(304)
.height(305)
}
.height('100%')
.width('100%')
}
} 
invert12+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
invert(): Filter
将反转效果添加到效果链表中，返回链表的头节点。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| Filter | 返回已添加的图像效果。 |
示例：
import { image } from '@kit.ImageKit';
import { effectKit } from '@kit.ArkGraphics2D';
import { common } from '@kit.AbilityKit';
// 传入读取的图片数据
function ImageInvert(Image: ArrayBuffer): Promise<image.PixelMap> {
return new Promise(async (resolve, reject) => {
let imageSource = image.createImageSource(Image);
await imageSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
let headFilter = effectKit.createEffect(pixelMap);
if (headFilter != null) {
// 对图片添加效果标识
headFilter.invert();
}
// 按照添加的效果标识对图片进行处理并且返回处理好的图片数据
headFilter.getEffectPixelMap().then(imageData => {
resolve(imageData);
})
})
})
}
@Entry
@Component
struct Index {
@State imagePixelMap: image.PixelMap | null = null;
private imageBuffer: ArrayBuffer | undefined = undefined;
// 读取rawfile文件夹下的图片文件，也可根据需求更换读取方式，保证最终得到的是ArrayBuffer格式的图片数据即可
async getFileBuffer(): Promise<ArrayBuffer | undefined> {
try{
const context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
const fileData: Uint8Array = await context.resourceManager.getRawFileContent('image.png');
const buffer: ArrayBuffer = fileData.buffer.slice(0);
return buffer;
}catch (err){
return undefined
}
}
async aboutToAppear(): Promise<void>{
this.imageBuffer = await this.getFileBuffer();
if(this.imageBuffer == undefined){
return;
}
// 图片处理为异步操作，可以依据是否需要拿到处理好的图片数据再进行下一步逻辑，按需添加await进行同步
this.imagePixelMap = await ImageInvert(this.imageBuffer);
}
build() {
Column() {
Image(this.imagePixelMap)
.width(304)
.height(305)
}
.height('100%')
.width('100%')
}
} 
setColorMatrix12+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
setColorMatrix(colorMatrix: Array<number>): Filter
将自定义效果添加到效果链表中，返回链表的头节点。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| colorMatrix | Array<number> | 是 | 自定义颜色矩阵。 用于创建效果滤镜的 5x4 大小的矩阵，矩阵元素取值范围为[0, 1]，0和1代表的是矩阵中对应位置的颜色通道的权重，0代表该颜色通道不参与计算，1代表该颜色通道参与计算并保持原始权重。 |
返回值：
| 类型 | 说明 |
|---|---|
| Filter | 返回已添加的图像效果。 |
错误码：
以下错误码的详细介绍请参见通用错误码。
| 错误码ID | 错误信息 |
|---|---|
| 401 | Input parameter error. |
示例：
import { image } from '@kit.ImageKit';
import { effectKit } from '@kit.ArkGraphics2D';
import { common } from '@kit.AbilityKit';
// 传入读取的图片数据
function ImageColorFilter(Image: ArrayBuffer): Promise<image.PixelMap> {
return new Promise(async (resolve, reject) => {
let imageSource = image.createImageSource(Image);
await imageSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
let colorMatrix:Array<number> = [
0.2126,0.7152,0.0722,0,0,
0.2126,0.7152,0.0722,0,0,
0.2126,0.7152,0.0722,0,0,
0,0,0,1,0
];
let headFilter = effectKit.createEffect(pixelMap);
if (headFilter != null) {
// 对图片添加效果标识
headFilter.setColorMatrix(colorMatrix);
}
// 按照添加的效果标识对图片进行处理并且返回处理好的图片数据
headFilter.getEffectPixelMap().then(imageData => {
resolve(imageData);
})
})
})
}
@Entry
@Component
struct Index {
@State imagePixelMap: image.PixelMap | null = null;
private imageBuffer: ArrayBuffer | undefined = undefined;
// 读取rawfile文件夹下的图片文件，也可根据需求更换读取方式，保证最终得到的是ArrayBuffer格式的图片数据即可
async getFileBuffer(): Promise<ArrayBuffer | undefined> {
try{
const context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
const fileData: Uint8Array = await context.resourceManager.getRawFileContent('image.png');
const buffer: ArrayBuffer = fileData.buffer.slice(0);
return buffer;
}catch (err){
return undefined
}
}
async aboutToAppear(): Promise<void>{
this.imageBuffer = await this.getFileBuffer();
if(this.imageBuffer == undefined){
return;
}
// 图片处理为异步操作，可以依据是否需要拿到处理好的图片数据再进行下一步逻辑，按需添加await进行同步
this.imagePixelMap = await ImageColorFilter(this.imageBuffer);
}
build() {
Column() {
Image(this.imagePixelMap)
.width(304)
.height(305)
}
.height('100%')
.width('100%')
}
} 
brightness
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
brightness(bright: number): Filter
将高亮效果添加到效果链表中，返回链表的头节点。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| bright | number | 是 | 高亮程度，取值范围为[0, 1]，取值为0时图像保持不变，取值为1时图像达到预设的最大亮度。 |
返回值：
| 类型 | 说明 |
|---|---|
| Filter | 返回已添加的图像效果。 |
示例：
import { image } from '@kit.ImageKit';
import { effectKit } from '@kit.ArkGraphics2D';
import { common } from '@kit.AbilityKit';
// 传入读取的图片数据
function ImageBrightness(Image: ArrayBuffer): Promise<image.PixelMap> {
return new Promise(async (resolve, reject) => {
let imageSource = image.createImageSource(Image);
await imageSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
let bright = 0.5;
let headFilter = effectKit.createEffect(pixelMap);
if (headFilter != null) {
// 对图片添加效果标识
headFilter.brightness(bright);
}
// 按照添加的效果标识对图片进行处理并且返回处理好的图片数据
headFilter.getEffectPixelMap().then(imageData => {
resolve(imageData);
})
})
})
}
@Entry
@Component
struct Index {
@State imagePixelMap: image.PixelMap | null = null;
private imageBuffer: ArrayBuffer | undefined = undefined;
// 读取rawfile文件夹下的图片文件，也可根据需求更换读取方式，保证最终得到的是ArrayBuffer格式的图片数据即可
async getFileBuffer(): Promise<ArrayBuffer | undefined> {
try{
const context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
const fileData: Uint8Array = await context.resourceManager.getRawFileContent('image.png');
const buffer: ArrayBuffer = fileData.buffer.slice(0);
return buffer;
}catch (err){
return undefined
}
}
async aboutToAppear(): Promise<void>{
this.imageBuffer = await this.getFileBuffer();
if(this.imageBuffer == undefined){
return;
}
// 图片处理为异步操作，可以依据是否需要拿到处理好的图片数据再进行下一步逻辑，按需添加await进行同步
this.imagePixelMap = await ImageBrightness(this.imageBuffer);
}
build() {
Column() {
Image(this.imagePixelMap)
.width(304)
.height(305)
}
.height('100%')
.width('100%')
}
} 
grayscale
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
grayscale(): Filter
将灰度效果添加到效果链表中，返回链表的头节点。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| Filter | 返回已添加的图像效果。 |
示例：
import { image } from '@kit.ImageKit';
import { effectKit } from '@kit.ArkGraphics2D';
import { common } from '@kit.AbilityKit';
// 传入读取的图片数据
function ImageGrayscale(Image: ArrayBuffer): Promise<image.PixelMap> {
return new Promise(async (resolve, reject) => {
let imageSource = image.createImageSource(Image);
await imageSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
let headFilter = effectKit.createEffect(pixelMap);
if (headFilter != null) {
// 对图片添加效果标识
headFilter.grayscale();
}
// 按照添加的效果标识对图片进行处理并且返回处理好的图片数据
headFilter.getEffectPixelMap().then(imageData => {
resolve(imageData);
})
})
})
}
@Entry
@Component
struct Index {
@State imagePixelMap: image.PixelMap | null = null;
private imageBuffer: ArrayBuffer | undefined = undefined;
// 读取rawfile文件夹下的图片文件，也可根据需求更换读取方式，保证最终得到的是ArrayBuffer格式的图片数据即可
async getFileBuffer(): Promise<ArrayBuffer | undefined> {
try{
const context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
const fileData: Uint8Array = await context.resourceManager.getRawFileContent('image.png');
const buffer: ArrayBuffer = fileData.buffer.slice(0);
return buffer;
}catch (err){
return undefined
}
}
async aboutToAppear(): Promise<void>{
this.imageBuffer = await this.getFileBuffer();
if(this.imageBuffer == undefined){
return;
}
// 图片处理为异步操作，可以依据是否需要拿到处理好的图片数据再进行下一步逻辑，按需添加await进行同步
this.imagePixelMap = await ImageGrayscale(this.imageBuffer);
}
build() {
Column() {
Image(this.imagePixelMap)
.width(304)
.height(305)
}
.height('100%')
.width('100%')
}
} 
getEffectPixelMap11+
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
getEffectPixelMap(): Promise<image.PixelMap>
获取已添加链表效果的源图像的image.PixelMap，使用CPU渲染，使用Promise异步回调。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| Promise<image.PixelMap> | Promise对象。返回已添加链表效果的源图像的image.PixelMap。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
};
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createEffect(pixelMap).grayscale().getEffectPixelMap().then(data => {
console.info('getPixelBytesNumber = ', data.getPixelBytesNumber());
})
}) getEffectPixelMap20+
Phone20+PC/2in120+Tablet20+TV20+Wearable20+
getEffectPixelMap(useCpuRender : boolean): Promise<image.PixelMap>
获取已添加链表效果的源图像的image.PixelMap，支持指定渲染模式（CPU渲染或者GPU渲染），使用Promise异步回调。
卡片能力： 从API version 20开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 20开始，该接口支持在元服务中使用。
系统能力： SystemCapability.Multimedia.Image.Core
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| useCpuRender | boolean | 是 | 指定渲染模式。true表示使用CPU渲染，false表示使用GPU渲染。 |
返回值：
| 类型 | 说明 |
|---|---|
| Promise<image.PixelMap> | Promise对象。返回已添加链表效果的源图像的image.PixelMap。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
};
image.createPixelMap(color, opts).then((pixelMap) => {
effectKit.createEffect(pixelMap).grayscale().getEffectPixelMap(false).then(data => {
console.info('getPixelBytesNumber = ', data.getPixelBytesNumber());
})
}) getPixelMap(deprecated)
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
getPixelMap(): image.PixelMap
获取已添加链表效果的源图像的image.PixelMap。
说明
从API version 9开始支持，从API version 11开始废弃，建议使用getEffectPixelMap替代。
系统能力： SystemCapability.Multimedia.Image.Core
返回值：
| 类型 | 说明 |
|---|---|
| image.PixelMap | 已添加效果的源图像的image.PixelMap。 |
示例：
import { image } from "@kit.ImageKit";
import { effectKit } from "@kit.ArkGraphics2D";
const color = new ArrayBuffer(96);
let opts : image.InitializationOptions = {
editable: true,
pixelFormat: 3,
size: {
height: 4,
width: 6
}
};
image.createPixelMap(color, opts).then((pixelMap) => {
let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap();
console.info('getPixelBytesNumber = ', pixel.getPixelBytesNumber());
})