1# @ohos.effectKit (图像效果) 2 3图像效果提供处理图像的一些基础能力，包括对当前图像的亮度调节、模糊化、灰度调节、智能取色等。 4 5该模块提供以下图像效果相关的常用功能： 6 7- [Filter](#filter)：效果类，用于添加指定效果到图像源。 8- [Color](#color)：颜色类，用于保存取色的结果。 9- [ColorPicker](#colorpicker)：智能取色器。 10 11> **说明：** 12> 13> 本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 14 15## 导入模块 16 17```ts 18import { effectKit } from "@kit.ArkGraphics2D"; 19``` 20 21## effectKit.createEffect 22createEffect(source: image.PixelMap): Filter 23 24通过传入的PixelMap创建Filter实例。 25 26**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 27 28**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.Multimedia.Image.Core 31 32**参数：** 33 34| 参数名 | 类型 | 必填 | 说明 | 35| ------- | ----------------- | ---- | -------- | 36| source | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见[图片开发指导](../../media/image/image-overview.md)。 | 37 38**返回值：** 39 40| 类型 | 说明 | 41| -------------------------------- | -------------- | 42| [Filter](#filter) | 返回不带任何效果的Filter链表的头节点，失败时返回null。 | 43 44**示例：** 45 46```ts 47import { image } from "@kit.ImageKit"; 48import { effectKit } from "@kit.ArkGraphics2D"; 49 50const color = new ArrayBuffer(96); 51let opts : image.InitializationOptions = { 52 editable: true, 53 pixelFormat: 3, 54 size: { 55 height: 4, 56 width: 6 57 } 58} 59image.createPixelMap(color, opts).then((pixelMap) => { 60 let headFilter = effectKit.createEffect(pixelMap); 61}) 62``` 63 64## effectKit.createColorPicker 65 66createColorPicker(source: image.PixelMap): Promise\<ColorPicker> 67 68通过传入的PixelMap创建ColorPicker实例，使用Promise异步回调。 69 70**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 71 72**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.Multimedia.Image.Core 75 76**参数：** 77 78| 参数名 | 类型 | 必填 | 说明 | 79| -------- | ----------- | ---- | -------------------------- | 80| source | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见[图片开发指导](../../media/image/image-overview.md)。 | 81 82**返回值：** 83 84| 类型 | 说明 | 85| ---------------------- | -------------- | 86| Promise\<[ColorPicker](#colorpicker)> | Promise对象。返回创建的ColorPicker实例。 | 87 88**错误码：** 89 90以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 91 92| 错误码ID | 错误信息 | 93| -------- | ------------------------------ | 94| 401 | Input parameter error. | 95 96**示例：** 97 98```ts 99import { image } from "@kit.ImageKit"; 100import { effectKit } from "@kit.ArkGraphics2D"; 101import { BusinessError } from "@kit.BasicServicesKit"; 102 103const color = new ArrayBuffer(96); 104let opts : image.InitializationOptions = { 105 editable: true, 106 pixelFormat: 3, 107 size: { 108 height: 4, 109 width: 6 110 } 111} 112 113image.createPixelMap(color, opts).then((pixelMap) => { 114 effectKit.createColorPicker(pixelMap).then(colorPicker => { 115 console.info("color picker=" + colorPicker); 116 }).catch( (reason : BusinessError) => { 117 console.error("error=" + reason.message); 118 }) 119}) 120``` 121 122## effectKit.createColorPicker<sup>10+</sup> 123 124createColorPicker(source: image.PixelMap, region: Array\<number>): Promise\<ColorPicker> 125 126通过传入的PixelMap创建选定取色区域的ColorPicker实例，使用Promise异步回调。 127 128**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 129 130**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 131 132**系统能力：** SystemCapability.Multimedia.Image.Core 133 134**参数：** 135 136| 参数名 | 类型 | 必填 | 说明 | 137| -------- | ----------- | ---- | -------------------------- | 138| source | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见[图片开发指导](../../media/image/image-overview.md)。 | 139| region | Array\<number> | 是 | 指定图片的取色区域。<br>数组元素个数为4，取值范围为[0, 1]，数组元素分别表示图片区域的左、上、右、下位置，图片最左侧和最上侧对应位置0，最右侧和最下侧对应位置1。数组第三个元素需大于第一个元素，第四个元素需大于第二个元素。| 140 141**返回值：** 142 143| 类型 | 说明 | 144| ---------------------- | -------------- | 145| Promise\<[ColorPicker](#colorpicker)> | Promise对象。返回创建的ColorPicker实例。 | 146 147**错误码：** 148 149以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 150 151| 错误码ID | 错误信息 | 152| -------- | ------------------------------ | 153| 401 | Input parameter error. | 154 155**示例：** 156 157```ts 158import { image } from "@kit.ImageKit"; 159import { effectKit } from "@kit.ArkGraphics2D"; 160import { BusinessError } from "@kit.BasicServicesKit"; 161 162const color = new ArrayBuffer(96); 163let opts : image.InitializationOptions = { 164 editable: true, 165 pixelFormat: 3, 166 size: { 167 height: 4, 168 width: 6 169 } 170} 171 172image.createPixelMap(color, opts).then((pixelMap) => { 173 effectKit.createColorPicker(pixelMap, [0, 0, 1, 1]).then(colorPicker => { 174 console.info("color picker=" + colorPicker); 175 }).catch( (reason : BusinessError) => { 176 console.error("error=" + reason.message); 177 }) 178}) 179``` 180 181## effectKit.createColorPicker 182 183createColorPicker(source: image.PixelMap, callback: AsyncCallback\<ColorPicker>): void 184 185通过传入的PixelMap创建ColorPicker实例，使用callback异步回调。 186 187**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 188 189**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 190 191**系统能力：** SystemCapability.Multimedia.Image.Core 192 193**参数：** 194 195| 参数名 | 类型 | 必填 | 说明 | 196| -------- | ------------------ | ---- | -------------------------- | 197| source | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 |image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见[图片开发指导](../../media/image/image-overview.md)。 | 198| callback | AsyncCallback\<[ColorPicker](#colorpicker)> | 是 | 回调函数。返回创建的ColorPicker实例。 | 199 200**错误码：** 201 202以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 203 204| 错误码ID | 错误信息 | 205| -------- | ------------------------------ | 206| 401 | Input parameter error. | 207 208**示例：** 209 210```ts 211import { image } from "@kit.ImageKit"; 212import { effectKit } from "@kit.ArkGraphics2D"; 213 214const color = new ArrayBuffer(96); 215let opts : image.InitializationOptions = { 216 editable: true, 217 pixelFormat: 3, 218 size: { 219 height: 4, 220 width: 6 221 } 222} 223image.createPixelMap(color, opts).then((pixelMap) => { 224 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 225 if (error) { 226 console.error('Failed to create color picker.'); 227 } else { 228 console.info('Succeeded in creating color picker.'); 229 } 230 }) 231}) 232``` 233 234## effectKit.createColorPicker<sup>10+</sup> 235 236createColorPicker(source: image.PixelMap, region:Array\<number>, callback: AsyncCallback\<ColorPicker>): void 237 238通过传入的PixelMap创建选定取色区域的ColorPicker实例，使用callback异步回调。 239 240**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 241 242**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 243 244**系统能力：** SystemCapability.Multimedia.Image.Core 245 246**参数：** 247 248| 参数名 | 类型 | 必填 | 说明 | 249| -------- | ------------------ | ---- | -------------------------- | 250| source | [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 是 |image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见[图片开发指导](../../media/image/image-overview.md)。 | 251| region | Array\<number> | 是 | 指定图片的取色区域。<br>数组元素个数为4，取值范围为[0, 1]，数组元素分别表示图片区域的左、上、右、下位置，图片最左侧和最上侧对应位置0，最右侧和最下侧对应位置1。数组第三个元素需大于第一个元素，第四个元素需大于第二个元素。| 252| callback | AsyncCallback\<[ColorPicker](#colorpicker)> | 是 | 回调函数。返回创建的ColorPicker实例。 | 253 254**错误码：** 255 256以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 257 258| 错误码ID | 错误信息 | 259| -------- | ------------------------------ | 260| 401 | Input parameter error. | 261 262**示例：** 263 264```ts 265import { image } from "@kit.ImageKit"; 266import { effectKit } from "@kit.ArkGraphics2D"; 267 268const color = new ArrayBuffer(96); 269let opts : image.InitializationOptions = { 270 editable: true, 271 pixelFormat: 3, 272 size: { 273 height: 4, 274 width: 6 275 } 276} 277image.createPixelMap(color, opts).then((pixelMap) => { 278 effectKit.createColorPicker(pixelMap, [0, 0, 1, 1], (error, colorPicker) => { 279 if (error) { 280 console.error('Failed to create color picker.'); 281 } else { 282 console.info('Succeeded in creating color picker.'); 283 } 284 }) 285}) 286``` 287 288## Color 289 290颜色类，用于保存取色的结果。 291 292**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 293 294**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 295 296**系统能力：** SystemCapability.Multimedia.Image.Core 297 298| 名称 | 类型 | 可读 | 可写 | 说明 | 299| ------ | ----- | ---- | ---- | ---------------- | 300| red | number | 是 | 否 | 红色分量值，取值范围[0x0, 0xFF]。 | 301| green | number | 是 | 否 | 绿色分量值，取值范围[0x0, 0xFF]。 | 302| blue | number | 是 | 否 | 蓝色分量值，取值范围[0x0, 0xFF]。 | 303| alpha | number | 是 | 否 | 透明通道分量值，取值范围[0x0, 0xFF]。 | 304 305## ColorPicker 306 307取色类，用于从一张图像数据中获取它的主要颜色。在调用ColorPicker的方法前，需要先通过[createColorPicker](#effectkitcreatecolorpicker)创建一个ColorPicker实例。 308 309### getMainColor 310 311getMainColor(): Promise\<Color> 312 313读取图像主色的颜色值，结果写入[Color](#color)里，使用Promise异步回调。 314 315**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 316 317**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 318 319**系统能力：** SystemCapability.Multimedia.Image.Core 320 321**返回值：** 322 323| 类型 | 说明 | 324| :------------- | :---------------------------------------------- | 325| Promise\<[Color](#color)> | Promise对象。返回图像主色对应的颜色值，失败时返回错误信息。 | 326 327**示例：** 328 329```ts 330import { image } from "@kit.ImageKit"; 331import { effectKit } from "@kit.ArkGraphics2D"; 332 333const color = new ArrayBuffer(96); 334let opts: image.InitializationOptions = { 335 editable: true, 336 pixelFormat: 3, 337 size: { 338 height: 4, 339 width: 6 340 } 341} 342image.createPixelMap(color, opts).then((pixelMap) => { 343 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 344 if (error) { 345 console.error('Failed to create color picker.'); 346 } else { 347 console.info('Succeeded in creating color picker.'); 348 colorPicker.getMainColor().then(color => { 349 console.info('Succeeded in getting main color.'); 350 console.info(`color[ARGB]=${color.alpha},${color.red},${color.green},${color.blue}`); 351 }) 352 } 353 }) 354}) 355``` 356 357### getMainColorSync 358 359getMainColorSync(): Color 360 361读取图像主色的颜色值，结果写入[Color](#color)里，使用同步方式返回。 362 363**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 364 365**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 366 367**系统能力：** SystemCapability.Multimedia.Image.Core 368 369**返回值：** 370 371| 类型 | 说明 | 372| :------- | :----------------------------------- | 373| [Color](#color) | Color实例，即图像主色对应的颜色值，失败时返回null。 | 374 375**示例：** 376 377```ts 378import { image } from "@kit.ImageKit"; 379import { effectKit } from "@kit.ArkGraphics2D"; 380 381const color = new ArrayBuffer(96); 382let opts : image.InitializationOptions = { 383 editable: true, 384 pixelFormat: 3, 385 size: { 386 height: 4, 387 width: 6 388 } 389} 390image.createPixelMap(color, opts).then((pixelMap) => { 391 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 392 if (error) { 393 console.error('Failed to create color picker.'); 394 } else { 395 console.info('Succeeded in creating color picker.'); 396 let color = colorPicker.getMainColorSync(); 397 console.info('get main color =' + color); 398 } 399 }) 400}) 401``` 402 403 404### getLargestProportionColor<sup>10+</sup> 405 406getLargestProportionColor(): Color 407 408读取图像占比最多的颜色值，结果写入[Color](#color)里，使用同步方式返回。 409 410**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 411 412**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 413 414**系统能力：** SystemCapability.Multimedia.Image.Core 415 416**返回值：** 417 418| 类型 | 说明 | 419| :------------- | :---------------------------------------------- | 420| [Color](#color) | Color实例，即图像占比最多的颜色值，失败时返回null。 | 421 422**示例：** 423 424```ts 425import { image } from "@kit.ImageKit"; 426import { effectKit } from "@kit.ArkGraphics2D"; 427 428const color = new ArrayBuffer(96); 429let opts : image.InitializationOptions = { 430 editable: true, 431 pixelFormat: 3, 432 size: { 433 height: 4, 434 width: 6 435 } 436} 437image.createPixelMap(color, opts).then((pixelMap) => { 438 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 439 if (error) { 440 console.error('Failed to create color picker.'); 441 } else { 442 console.info('Succeeded in creating color picker.'); 443 let color = colorPicker.getLargestProportionColor(); 444 console.info('get largest proportion color =' + color); 445 } 446 }) 447}) 448``` 449 450 451### getTopProportionColors<sup>12+</sup> 452 453getTopProportionColors(colorCount: number): Array<Color | null> 454 455读取图像占比靠前的颜色值，个数由`colorCount`指定，结果写入[Color](#color)的数组里，使用同步方式返回。 456 457**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 458 459**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 460 461**系统能力：** SystemCapability.Multimedia.Image.Core 462 463**参数：** 464| 参数名 | 类型 | 必填 | 说明 | 465| ---------- | ------ | ---- | ------------------------------------------- | 466| colorCount | number | 是 | 需要取主色的个数，取值范围为[1, 10]，向下取整。 | 467 468**返回值：** 469 470| 类型 | 说明 | 471| :--------------------------------------- | :---------------------------------------------- | 472| Array<[Color](#color) \| null> | Color数组，即图像占比前`colorCount`的颜色值数组，按占比排序。<br>- 当实际读取的特征色个数小于`colorCount`时，数组大小为实际特征色个数。<br>- 取色失败返回空数组。<br>- 取色个数小于1返回`[null]`。<br>- 取色个数大于10视为取前10个。 | 473 474**示例：** 475 476```js 477import { image } from "@kit.ImageKit"; 478import { effectKit } from "@kit.ArkGraphics2D"; 479 480const color = new ArrayBuffer(96); 481let opts : image.InitializationOptions = { 482 editable: true, 483 pixelFormat: 3, 484 size: { 485 height: 4, 486 width: 6 487 } 488} 489image.createPixelMap(color, opts).then((pixelMap) => { 490 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 491 if (error) { 492 console.error('Failed to create color picker.'); 493 } else { 494 console.info('Succeeded in creating color picker.'); 495 let colors = colorPicker.getTopProportionColors(2); 496 for(let index = 0; index < colors.length; index++) { 497 if (colors[index]) { 498 console.info('get top proportion colors: index ' + index + ', color ' + colors[index]); 499 } 500 } 501 } 502 }) 503}) 504``` 505 506 507### getHighestSaturationColor<sup>10+</sup> 508 509getHighestSaturationColor(): Color 510 511读取图像饱和度最高的颜色值，结果写入[Color](#color)里，使用同步方式返回。 512 513**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 514 515**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 516 517**系统能力：** SystemCapability.Multimedia.Image.Core 518 519**返回值：** 520 521| 类型 | 说明 | 522| :------------- | :---------------------------------------------- | 523| [Color](#color) | Color实例，即图像饱和度最高的颜色值，失败时返回null。 | 524 525**示例：** 526 527```ts 528import { image } from "@kit.ImageKit"; 529import { effectKit } from "@kit.ArkGraphics2D"; 530 531const color = new ArrayBuffer(96); 532let opts: image.InitializationOptions = { 533 editable: true, 534 pixelFormat: 3, 535 size: { 536 height: 4, 537 width: 6 538 } 539} 540image.createPixelMap(color, opts).then((pixelMap) => { 541 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 542 if (error) { 543 console.error('Failed to create color picker.'); 544 } else { 545 console.info('Succeeded in creating color picker.'); 546 let color = colorPicker.getHighestSaturationColor(); 547 console.info('get highest saturation color =' + color); 548 } 549 }) 550}) 551``` 552 553 554### getAverageColor<sup>10+</sup> 555 556getAverageColor(): Color 557 558读取图像平均的颜色值，结果写入[Color](#color)里，使用同步方式返回。 559 560**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 561 562**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 563 564**系统能力：** SystemCapability.Multimedia.Image.Core 565 566**返回值：** 567 568| 类型 | 说明 | 569| :------------- | :---------------------------------------------- | 570| [Color](#color) | Color实例，即图像平均的颜色值，失败时返回null。 | 571 572**示例：** 573 574```ts 575import { image } from "@kit.ImageKit"; 576import { effectKit } from "@kit.ArkGraphics2D"; 577 578const color = new ArrayBuffer(96); 579let opts: image.InitializationOptions = { 580 editable: true, 581 pixelFormat: 3, 582 size: { 583 height: 4, 584 width: 6 585 } 586} 587image.createPixelMap(color, opts).then((pixelMap) => { 588 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 589 if (error) { 590 console.error('Failed to create color picker.'); 591 } else { 592 console.info('Succeeded in creating color picker.'); 593 let color = colorPicker.getAverageColor(); 594 console.info('get average color =' + color); 595 } 596 }) 597}) 598``` 599 600 601### isBlackOrWhiteOrGrayColor<sup>10+</sup> 602 603isBlackOrWhiteOrGrayColor(color: number): boolean 604 605判断图像是否为黑白灰颜色，返回true或false。 606 607**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 608 609**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 610 611**系统能力：** SystemCapability.Multimedia.Image.Core 612 613**参数：** 614 615| 参数名 | 类型 | 必填 | 说明 | 616| -------- | ----------- | ---- | -------------------------- | 617| color| number | 是 | 需要判断是否黑白灰色的颜色值，取值范围[0x0, 0xFFFFFFFF]。 | 618 619**返回值：** 620 621| 类型 | 说明 | 622| :------------- | :---------------------------------------------- | 623| boolean | 如果此图像为黑白灰颜色，则返回true；否则返回false。 | 624 625**示例：** 626 627```ts 628import { image } from "@kit.ImageKit"; 629import { effectKit } from "@kit.ArkGraphics2D"; 630 631const color = new ArrayBuffer(96); 632let opts: image.InitializationOptions = { 633 editable: true, 634 pixelFormat: 3, 635 size: { 636 height: 4, 637 width: 6 638 } 639} 640image.createPixelMap(color, opts).then((pixelMap) => { 641 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 642 if (error) { 643 console.error('Failed to create color picker.'); 644 } else { 645 console.info('Succeeded in creating color picker.'); 646 let bJudge = colorPicker.isBlackOrWhiteOrGrayColor(0xFFFFFFFF); 647 console.info('is black or white or gray color[bool](white) =' + bJudge); 648 } 649 }) 650}) 651``` 652 653## Filter 654 655图像效果类，用于将指定的效果添加到输入图像中。在调用Filter的方法前，需要先通过[createEffect](#effectkitcreateeffect)创建一个Filter实例。 656 657### blur 658 659blur(radius: number): Filter 660 661将模糊效果添加到效果链表中，结果返回效果链表的头节点。 662 663> **说明：** 664> 665> 该接口为静态模糊接口，为静态图像提供模糊化效果，如果要对组件进行实时渲染的模糊，可以使用[动态模糊](../../ui/arkts-blur-effect.md)。 666 667**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 668 669**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 670 671**系统能力：** SystemCapability.Multimedia.Image.Core 672 673**参数：** 674 675| 参数名 | 类型 | 必填 | 说明 | 676| ------ | ----------- | ---- | ------------------------------------------------------------ | 677| radius | number | 是 | 模糊半径，单位是像素。模糊效果与所设置的值成正比，值越大效果越明显。 | 678 679**返回值：** 680 681| 类型 | 说明 | 682| :------------- | :---------------------------------------------- | 683| [Filter](#filter) | 返回已添加的图像效果。 | 684 685**示例：** 686 687```ts 688import { image } from "@kit.ImageKit"; 689import { effectKit } from "@kit.ArkGraphics2D"; 690 691const color = new ArrayBuffer(96); 692let opts : image.InitializationOptions = { 693 editable: true, 694 pixelFormat: 3, 695 size: { 696 height: 4, 697 width: 6 698 } 699}; 700image.createPixelMap(color, opts).then((pixelMap) => { 701 let radius = 5; 702 let headFilter = effectKit.createEffect(pixelMap); 703 if (headFilter != null) { 704 headFilter.blur(radius); 705 } 706}) 707``` 708 709 710### invert<sup>12+</sup> 711 712invert(): Filter 713 714将反转效果添加到效果链表中，结果返回效果链表的头节点。 715 716**系统能力：** SystemCapability.Multimedia.Image.Core 717 718**返回值：** 719 720| 类型 | 说明 | 721| :------------- | :---------------------------------------------- | 722| [Filter](#filter) | 返回已添加的图像效果。 | 723 724**示例：** 725 726```ts 727import { image } from "@kit.ImageKit"; 728import { effectKit } from "@kit.ArkGraphics2D"; 729 730const color = new ArrayBuffer(96); 731let opts : image.InitializationOptions = { 732 editable: true, 733 pixelFormat: 3, 734 size: { 735 height: 4, 736 width: 6 737 } 738}; 739image.createPixelMap(color, opts).then((pixelMap) => { 740 let headFilter = effectKit.createEffect(pixelMap); 741 if (headFilter != null) { 742 headFilter.invert(); 743 } 744}) 745``` 746 747 748### setColorMatrix<sup>12+</sup> 749 750setColorMatrix(colorMatrix: Array\<number>): Filter 751 752将自定义效果添加到效果链表中，结果返回效果链表的头节点。 753 754**系统能力：** SystemCapability.Multimedia.Image.Core 755 756**参数：** 757 758| 参数名 | 类型 | 必填 | 说明 | 759| ------ | ----------- | ---- | ------------------------------------------------------------ | 760| colorMatrix | Array\<number> | 是 | 自定义颜色矩阵。 <br>用于创建效果滤镜的 5x4 大小的矩阵, 矩阵元素取值范围为[0, 1], 0和1代表的是矩阵中对应位置的颜色通道的权重，0代表该颜色通道不参与计算，1代表该颜色通道参与计算并保持原始权重。 | 761 762**返回值：** 763 764| 类型 | 说明 | 765| :------------- | :---------------------------------------------- | 766| [Filter](#filter) | 返回已添加的图像效果。 | 767 768**错误码：** 769 770以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 771 772| 错误码ID | 错误信息 | 773| -------- | ------------------------------ | 774| 401 | Input parameter error. | 775 776**示例：** 777 778```ts 779import { image } from "@kit.ImageKit"; 780import { effectKit } from "@kit.ArkGraphics2D"; 781 782const color = new ArrayBuffer(96); 783let opts : image.InitializationOptions = { 784 editable: true, 785 pixelFormat: 3, 786 size: { 787 height: 4, 788 width: 6 789 } 790}; 791image.createPixelMap(color, opts).then((pixelMap) => { 792 let colorMatrix:Array<number> = [ 793 0.2126,0.7152,0.0722,0,0, 794 0.2126,0.7152,0.0722,0,0, 795 0.2126,0.7152,0.0722,0,0, 796 0,0,0,1,0 797 ]; 798 let headFilter = effectKit.createEffect(pixelMap); 799 if (headFilter != null) { 800 headFilter.setColorMatrix(colorMatrix); 801 } 802}) 803``` 804 805### brightness 806 807brightness(bright: number): Filter 808 809将高亮效果添加到效果链表中，结果返回效果链表的头节点。 810 811**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 812 813**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 814 815**系统能力：** SystemCapability.Multimedia.Image.Core 816 817**参数：** 818 819| 参数名 | 类型 | 必填 | 说明 | 820| ------ | ----------- | ---- | ------------------------------------------------------------ | 821| bright | number | 是 | 高亮程度，取值范围在0-1之间，取值为0时图像保持不变。 | 822 823**返回值：** 824 825| 类型 | 说明 | 826| :------------- | :---------------------------------------------- | 827| [Filter](#filter) | 返回已添加的图像效果。 | 828 829**示例：** 830 831```ts 832import { image } from "@kit.ImageKit"; 833import { effectKit } from "@kit.ArkGraphics2D"; 834 835const color = new ArrayBuffer(96); 836let opts : image.InitializationOptions = { 837 editable: true, 838 pixelFormat: 3, 839 size: { 840 height: 4, 841 width: 6 842 } 843}; 844image.createPixelMap(color, opts).then((pixelMap) => { 845 let bright = 0.5; 846 let headFilter = effectKit.createEffect(pixelMap); 847 if (headFilter != null) { 848 headFilter.brightness(bright); 849 } 850}) 851``` 852 853 854### grayscale 855 856grayscale(): Filter 857 858将灰度效果添加到效果链表中，结果返回效果链表的头节点。 859 860**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 861 862**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 863 864**系统能力：** SystemCapability.Multimedia.Image.Core 865 866**返回值：** 867 868| 类型 | 说明 | 869| :------------- | :---------------------------------------------- | 870| [Filter](#filter) | 返回已添加的图像效果。 | 871 872**示例：** 873 874```ts 875import { image } from "@kit.ImageKit"; 876import { effectKit } from "@kit.ArkGraphics2D"; 877 878const color = new ArrayBuffer(96); 879let opts : image.InitializationOptions = { 880 editable: true, 881 pixelFormat: 3, 882 size: { 883 height: 4, 884 width: 6 885 } 886}; 887image.createPixelMap(color, opts).then((pixelMap) => { 888 let headFilter = effectKit.createEffect(pixelMap); 889 if (headFilter != null) { 890 headFilter.grayscale(); 891 } 892}) 893``` 894 895 896### getEffectPixelMap<sup>11+</sup> 897 898getEffectPixelMap(): Promise<image.PixelMap> 899 900获取已添加链表效果的源图像的image.PixelMap，使用Promise异步回调。 901 902**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 903 904**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 905 906**系统能力：** SystemCapability.Multimedia.Image.Core 907 908**返回值：** 909 910| 类型 | 说明 | 911| ---------------------- | -------------- | 912| Promise\<image.PixelMap> | Promise对象。返回已添加链表效果的源图像的image.PixelMap。 | 913 914 915**示例：** 916 917```ts 918import { image } from "@kit.ImageKit"; 919import { effectKit } from "@kit.ArkGraphics2D"; 920 921const color = new ArrayBuffer(96); 922let opts : image.InitializationOptions = { 923 editable: true, 924 pixelFormat: 3, 925 size: { 926 height: 4, 927 width: 6 928 } 929}; 930image.createPixelMap(color, opts).then((pixelMap) => { 931 effectKit.createEffect(pixelMap).grayscale().getEffectPixelMap().then(data => { 932 console.info('getPixelBytesNumber = ', data.getPixelBytesNumber()); 933 }) 934}) 935``` 936 937### getPixelMap<sup>(deprecated)</sup> 938 939getPixelMap(): image.PixelMap 940 941获取已添加链表效果的源图像的image.PixelMap。 942 943> **说明：** 944> 945> 此接口从API version 9开始支持，从API version 11开始废弃，推荐使用[getEffectPixelMap](#geteffectpixelmap11)。 946 947**系统能力：** SystemCapability.Multimedia.Image.Core 948 949**返回值：** 950 951| 类型 | 说明 | 952| :------------- | :---------------------------------------------- | 953| [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 已添加效果的源图像的image.PixelMap。 | 954 955**示例：** 956 957```ts 958import { image } from "@kit.ImageKit"; 959import { effectKit } from "@kit.ArkGraphics2D"; 960 961const color = new ArrayBuffer(96); 962let opts : image.InitializationOptions = { 963 editable: true, 964 pixelFormat: 3, 965 size: { 966 height: 4, 967 width: 6 968 } 969}; 970image.createPixelMap(color, opts).then((pixelMap) => { 971 let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap(); 972 console.info('getPixelBytesNumber = ', pixel.getPixelBytesNumber()); 973}) 974``` 975
