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## TileMode<sup>14+</sup> 306 307着色器效果平铺模式的枚举。 308 309**系统能力：** SystemCapability.Multimedia.Image.Core 310 311| 名称 | 值 | 说明 | 312| ---------------------- | ---- | ------------------------------ | 313| CLAMP | 0 | 如果着色器效果超出其原始边界，剩余区域使用着色器的边缘颜色填充。 | 314| REPEAT | 1 | 在水平和垂直方向上重复着色器效果。 | 315| MIRROR | 2 | 在水平和垂直方向上重复着色器效果，交替镜像图像，以便相邻图像始终接合。 | 316| DECAL | 3 | 仅在其原始边界内渲染着色器效果。| 317 318## ColorPicker 319 320取色类，用于从一张图像数据中获取它的主要颜色。在调用ColorPicker的方法前，需要先通过[createColorPicker](#effectkitcreatecolorpicker)创建一个ColorPicker实例。 321 322### getMainColor 323 324getMainColor(): Promise\<Color> 325 326读取图像主色的颜色值，结果写入[Color](#color)里，使用Promise异步回调。 327 328**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 329 330**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 331 332**系统能力：** SystemCapability.Multimedia.Image.Core 333 334**返回值：** 335 336| 类型 | 说明 | 337| :------------- | :---------------------------------------------- | 338| Promise\<[Color](#color)> | Promise对象。返回图像主色对应的颜色值，失败时返回错误信息。 | 339 340**示例：** 341 342```ts 343import { image } from "@kit.ImageKit"; 344import { effectKit } from "@kit.ArkGraphics2D"; 345 346const color = new ArrayBuffer(96); 347let opts: image.InitializationOptions = { 348 editable: true, 349 pixelFormat: 3, 350 size: { 351 height: 4, 352 width: 6 353 } 354} 355image.createPixelMap(color, opts).then((pixelMap) => { 356 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 357 if (error) { 358 console.error('Failed to create color picker.'); 359 } else { 360 console.info('Succeeded in creating color picker.'); 361 colorPicker.getMainColor().then(color => { 362 console.info('Succeeded in getting main color.'); 363 console.info(`color[ARGB]=${color.alpha},${color.red},${color.green},${color.blue}`); 364 }) 365 } 366 }) 367}) 368``` 369 370### getMainColorSync 371 372getMainColorSync(): Color 373 374读取图像主色的颜色值，结果写入[Color](#color)里，使用同步方式返回。 375 376**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 377 378**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 379 380**系统能力：** SystemCapability.Multimedia.Image.Core 381 382**返回值：** 383 384| 类型 | 说明 | 385| :------- | :----------------------------------- | 386| [Color](#color) | Color实例，即图像主色对应的颜色值，失败时返回null。 | 387 388**示例：** 389 390```ts 391import { image } from "@kit.ImageKit"; 392import { effectKit } from "@kit.ArkGraphics2D"; 393 394const color = new ArrayBuffer(96); 395let opts : image.InitializationOptions = { 396 editable: true, 397 pixelFormat: 3, 398 size: { 399 height: 4, 400 width: 6 401 } 402} 403image.createPixelMap(color, opts).then((pixelMap) => { 404 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 405 if (error) { 406 console.error('Failed to create color picker.'); 407 } else { 408 console.info('Succeeded in creating color picker.'); 409 let color = colorPicker.getMainColorSync(); 410 console.info('get main color =' + color); 411 } 412 }) 413}) 414``` 415 416 417### getLargestProportionColor<sup>10+</sup> 418 419getLargestProportionColor(): Color 420 421读取图像占比最多的颜色值，结果写入[Color](#color)里，使用同步方式返回。 422 423**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 424 425**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 426 427**系统能力：** SystemCapability.Multimedia.Image.Core 428 429**返回值：** 430 431| 类型 | 说明 | 432| :------------- | :---------------------------------------------- | 433| [Color](#color) | Color实例，即图像占比最多的颜色值，失败时返回null。 | 434 435**示例：** 436 437```ts 438import { image } from "@kit.ImageKit"; 439import { effectKit } from "@kit.ArkGraphics2D"; 440 441const color = new ArrayBuffer(96); 442let opts : image.InitializationOptions = { 443 editable: true, 444 pixelFormat: 3, 445 size: { 446 height: 4, 447 width: 6 448 } 449} 450image.createPixelMap(color, opts).then((pixelMap) => { 451 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 452 if (error) { 453 console.error('Failed to create color picker.'); 454 } else { 455 console.info('Succeeded in creating color picker.'); 456 let color = colorPicker.getLargestProportionColor(); 457 console.info('get largest proportion color =' + color); 458 } 459 }) 460}) 461``` 462 463 464### getTopProportionColors<sup>12+</sup> 465 466getTopProportionColors(colorCount: number): Array<Color | null> 467 468读取图像占比靠前的颜色值，个数由`colorCount`指定，结果写入[Color](#color)的数组里，使用同步方式返回。 469 470**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 471 472**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 473 474**系统能力：** SystemCapability.Multimedia.Image.Core 475 476**参数：** 477| 参数名 | 类型 | 必填 | 说明 | 478| ---------- | ------ | ---- | ------------------------------------------- | 479| colorCount | number | 是 | 需要取主色的个数，取值范围为[1, 10]，向下取整。 | 480 481**返回值：** 482 483| 类型 | 说明 | 484| :--------------------------------------- | :---------------------------------------------- | 485| Array<[Color](#color) \| null> | Color数组，即图像占比前`colorCount`的颜色值数组，按占比排序。<br>- 当实际读取的特征色个数小于`colorCount`时，数组大小为实际特征色个数。<br>- 取色失败返回空数组。<br>- 取色个数小于1返回`[null]`。<br>- 取色个数大于10视为取前10个。 | 486 487**示例：** 488 489```js 490import { image } from "@kit.ImageKit"; 491import { effectKit } from "@kit.ArkGraphics2D"; 492 493const color = new ArrayBuffer(96); 494let opts : image.InitializationOptions = { 495 editable: true, 496 pixelFormat: 3, 497 size: { 498 height: 4, 499 width: 6 500 } 501} 502image.createPixelMap(color, opts).then((pixelMap) => { 503 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 504 if (error) { 505 console.error('Failed to create color picker.'); 506 } else { 507 console.info('Succeeded in creating color picker.'); 508 let colors = colorPicker.getTopProportionColors(2); 509 for(let index = 0; index < colors.length; index++) { 510 if (colors[index]) { 511 console.info('get top proportion colors: index ' + index + ', color ' + colors[index]); 512 } 513 } 514 } 515 }) 516}) 517``` 518 519 520### getHighestSaturationColor<sup>10+</sup> 521 522getHighestSaturationColor(): Color 523 524读取图像饱和度最高的颜色值，结果写入[Color](#color)里，使用同步方式返回。 525 526**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 527 528**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 529 530**系统能力：** SystemCapability.Multimedia.Image.Core 531 532**返回值：** 533 534| 类型 | 说明 | 535| :------------- | :---------------------------------------------- | 536| [Color](#color) | Color实例，即图像饱和度最高的颜色值，失败时返回null。 | 537 538**示例：** 539 540```ts 541import { image } from "@kit.ImageKit"; 542import { effectKit } from "@kit.ArkGraphics2D"; 543 544const color = new ArrayBuffer(96); 545let opts: image.InitializationOptions = { 546 editable: true, 547 pixelFormat: 3, 548 size: { 549 height: 4, 550 width: 6 551 } 552} 553image.createPixelMap(color, opts).then((pixelMap) => { 554 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 555 if (error) { 556 console.error('Failed to create color picker.'); 557 } else { 558 console.info('Succeeded in creating color picker.'); 559 let color = colorPicker.getHighestSaturationColor(); 560 console.info('get highest saturation color =' + color); 561 } 562 }) 563}) 564``` 565 566 567### getAverageColor<sup>10+</sup> 568 569getAverageColor(): Color 570 571读取图像平均的颜色值，结果写入[Color](#color)里，使用同步方式返回。 572 573**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 574 575**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 576 577**系统能力：** SystemCapability.Multimedia.Image.Core 578 579**返回值：** 580 581| 类型 | 说明 | 582| :------------- | :---------------------------------------------- | 583| [Color](#color) | Color实例，即图像平均的颜色值，失败时返回null。 | 584 585**示例：** 586 587```ts 588import { image } from "@kit.ImageKit"; 589import { effectKit } from "@kit.ArkGraphics2D"; 590 591const color = new ArrayBuffer(96); 592let opts: image.InitializationOptions = { 593 editable: true, 594 pixelFormat: 3, 595 size: { 596 height: 4, 597 width: 6 598 } 599} 600image.createPixelMap(color, opts).then((pixelMap) => { 601 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 602 if (error) { 603 console.error('Failed to create color picker.'); 604 } else { 605 console.info('Succeeded in creating color picker.'); 606 let color = colorPicker.getAverageColor(); 607 console.info('get average color =' + color); 608 } 609 }) 610}) 611``` 612 613 614### isBlackOrWhiteOrGrayColor<sup>10+</sup> 615 616isBlackOrWhiteOrGrayColor(color: number): boolean 617 618判断图像是否为黑白灰颜色，返回true或false。 619 620**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 621 622**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 623 624**系统能力：** SystemCapability.Multimedia.Image.Core 625 626**参数：** 627 628| 参数名 | 类型 | 必填 | 说明 | 629| -------- | ----------- | ---- | -------------------------- | 630| color| number | 是 | 需要判断是否黑白灰色的颜色值，取值范围[0x0, 0xFFFFFFFF]。 | 631 632**返回值：** 633 634| 类型 | 说明 | 635| :------------- | :---------------------------------------------- | 636| boolean | 如果此图像为黑白灰颜色，则返回true；否则返回false。 | 637 638**示例：** 639 640```ts 641import { image } from "@kit.ImageKit"; 642import { effectKit } from "@kit.ArkGraphics2D"; 643 644const color = new ArrayBuffer(96); 645let opts: image.InitializationOptions = { 646 editable: true, 647 pixelFormat: 3, 648 size: { 649 height: 4, 650 width: 6 651 } 652} 653image.createPixelMap(color, opts).then((pixelMap) => { 654 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 655 if (error) { 656 console.error('Failed to create color picker.'); 657 } else { 658 console.info('Succeeded in creating color picker.'); 659 let bJudge = colorPicker.isBlackOrWhiteOrGrayColor(0xFFFFFFFF); 660 console.info('is black or white or gray color[bool](white) =' + bJudge); 661 } 662 }) 663}) 664``` 665 666## Filter 667 668图像效果类，用于将指定的效果添加到输入图像中。在调用Filter的方法前，需要先通过[createEffect](#effectkitcreateeffect)创建一个Filter实例。 669 670### blur 671 672blur(radius: number): Filter 673 674将模糊效果添加到效果链表中，结果返回效果链表的头节点。 675 676> **说明：** 677> 678> 该接口为静态模糊接口，为静态图像提供模糊化效果，如果要对组件进行实时渲染的模糊，可以使用[动态模糊](../../ui/arkts-blur-effect.md)。 679 680**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 681 682**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 683 684**系统能力：** SystemCapability.Multimedia.Image.Core 685 686**参数：** 687 688| 参数名 | 类型 | 必填 | 说明 | 689| ------ | ----------- | ---- | ------------------------------------------------------------ | 690| radius | number | 是 | 模糊半径，单位是像素。模糊效果与所设置的值成正比，值越大效果越明显。 | 691 692**返回值：** 693 694| 类型 | 说明 | 695| :------------- | :---------------------------------------------- | 696| [Filter](#filter) | 返回已添加的图像效果。 | 697 698**示例：** 699 700```ts 701import { image } from "@kit.ImageKit"; 702import { effectKit } from "@kit.ArkGraphics2D"; 703 704const color = new ArrayBuffer(96); 705let opts : image.InitializationOptions = { 706 editable: true, 707 pixelFormat: 3, 708 size: { 709 height: 4, 710 width: 6 711 } 712}; 713image.createPixelMap(color, opts).then((pixelMap) => { 714 let radius = 5; 715 let headFilter = effectKit.createEffect(pixelMap); 716 if (headFilter != null) { 717 headFilter.blur(radius); 718 } 719}) 720``` 721 722 723### blur<sup>14+</sup> 724 725blur(radius: number, tileMode: TileMode): Filter 726 727将模糊效果添加到效果链表中，结果返回效果链表的头节点。 728 729> **说明：** 730> 731> 该接口为静态模糊接口，为静态图像提供模糊化效果，如果要对组件进行实时渲染的模糊，可以使用[动态模糊](../../ui/arkts-blur-effect.md)。 732 733**系统能力：** SystemCapability.Multimedia.Image.Core 734 735**参数：** 736 737| 参数名 | 类型 | 必填 | 说明 | 738| ------ | ----------- | ---- | ------------------------------------------------------------ | 739| radius | number | 是 | 模糊半径，单位是像素。模糊效果与所设置的值成正比，值越大效果越明显。 | 740| tileMode | [TileMode](#tilemode14) | 是 | 着色器效果平铺模式。影响图像边缘的模糊效果。目前仅支持CPU渲染，所以目前着色器平铺模式仅支持DECAL。 | 741 742**返回值：** 743 744| 类型 | 说明 | 745| :------------- | :---------------------------------------------- | 746| [Filter](#filter) | 返回已添加的图像效果。 | 747 748**示例：** 749 750```ts 751import { image } from "@kit.ImageKit"; 752import { effectKit } from "@kit.ArkGraphics2D"; 753 754const color = new ArrayBuffer(96); 755let opts : image.InitializationOptions = { 756 editable: true, 757 pixelFormat: 3, 758 size: { 759 height: 4, 760 width: 6 761 } 762}; 763image.createPixelMap(color, opts).then((pixelMap) => { 764 let radius = 30; 765 let headFilter = effectKit.createEffect(pixelMap); 766 if (headFilter != null) { 767 headFilter.blur(radius, effectKit.TileMode.DECAL); 768 } 769}) 770``` 771 772 773### invert<sup>12+</sup> 774 775invert(): Filter 776 777将反转效果添加到效果链表中，结果返回效果链表的头节点。 778 779**系统能力：** SystemCapability.Multimedia.Image.Core 780 781**返回值：** 782 783| 类型 | 说明 | 784| :------------- | :---------------------------------------------- | 785| [Filter](#filter) | 返回已添加的图像效果。 | 786 787**示例：** 788 789```ts 790import { image } from "@kit.ImageKit"; 791import { effectKit } from "@kit.ArkGraphics2D"; 792 793const color = new ArrayBuffer(96); 794let opts : image.InitializationOptions = { 795 editable: true, 796 pixelFormat: 3, 797 size: { 798 height: 4, 799 width: 6 800 } 801}; 802image.createPixelMap(color, opts).then((pixelMap) => { 803 let headFilter = effectKit.createEffect(pixelMap); 804 if (headFilter != null) { 805 headFilter.invert(); 806 } 807}) 808``` 809 810 811### setColorMatrix<sup>12+</sup> 812 813setColorMatrix(colorMatrix: Array\<number>): Filter 814 815将自定义效果添加到效果链表中，结果返回效果链表的头节点。 816 817**系统能力：** SystemCapability.Multimedia.Image.Core 818 819**参数：** 820 821| 参数名 | 类型 | 必填 | 说明 | 822| ------ | ----------- | ---- | ------------------------------------------------------------ | 823| colorMatrix | Array\<number> | 是 | 自定义颜色矩阵。 <br>用于创建效果滤镜的 5x4 大小的矩阵, 矩阵元素取值范围为[0, 1], 0和1代表的是矩阵中对应位置的颜色通道的权重，0代表该颜色通道不参与计算，1代表该颜色通道参与计算并保持原始权重。 | 824 825**返回值：** 826 827| 类型 | 说明 | 828| :------------- | :---------------------------------------------- | 829| [Filter](#filter) | 返回已添加的图像效果。 | 830 831**错误码：** 832 833以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 834 835| 错误码ID | 错误信息 | 836| -------- | ------------------------------ | 837| 401 | Input parameter error. | 838 839**示例：** 840 841```ts 842import { image } from "@kit.ImageKit"; 843import { effectKit } from "@kit.ArkGraphics2D"; 844 845const color = new ArrayBuffer(96); 846let opts : image.InitializationOptions = { 847 editable: true, 848 pixelFormat: 3, 849 size: { 850 height: 4, 851 width: 6 852 } 853}; 854image.createPixelMap(color, opts).then((pixelMap) => { 855 let colorMatrix:Array<number> = [ 856 0.2126,0.7152,0.0722,0,0, 857 0.2126,0.7152,0.0722,0,0, 858 0.2126,0.7152,0.0722,0,0, 859 0,0,0,1,0 860 ]; 861 let headFilter = effectKit.createEffect(pixelMap); 862 if (headFilter != null) { 863 headFilter.setColorMatrix(colorMatrix); 864 } 865}) 866``` 867 868### brightness 869 870brightness(bright: number): Filter 871 872将高亮效果添加到效果链表中，结果返回效果链表的头节点。 873 874**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 875 876**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 877 878**系统能力：** SystemCapability.Multimedia.Image.Core 879 880**参数：** 881 882| 参数名 | 类型 | 必填 | 说明 | 883| ------ | ----------- | ---- | ------------------------------------------------------------ | 884| bright | number | 是 | 高亮程度，取值范围在0-1之间，取值为0时图像保持不变。 | 885 886**返回值：** 887 888| 类型 | 说明 | 889| :------------- | :---------------------------------------------- | 890| [Filter](#filter) | 返回已添加的图像效果。 | 891 892**示例：** 893 894```ts 895import { image } from "@kit.ImageKit"; 896import { effectKit } from "@kit.ArkGraphics2D"; 897 898const color = new ArrayBuffer(96); 899let opts : image.InitializationOptions = { 900 editable: true, 901 pixelFormat: 3, 902 size: { 903 height: 4, 904 width: 6 905 } 906}; 907image.createPixelMap(color, opts).then((pixelMap) => { 908 let bright = 0.5; 909 let headFilter = effectKit.createEffect(pixelMap); 910 if (headFilter != null) { 911 headFilter.brightness(bright); 912 } 913}) 914``` 915 916 917### grayscale 918 919grayscale(): Filter 920 921将灰度效果添加到效果链表中，结果返回效果链表的头节点。 922 923**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 924 925**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 926 927**系统能力：** SystemCapability.Multimedia.Image.Core 928 929**返回值：** 930 931| 类型 | 说明 | 932| :------------- | :---------------------------------------------- | 933| [Filter](#filter) | 返回已添加的图像效果。 | 934 935**示例：** 936 937```ts 938import { image } from "@kit.ImageKit"; 939import { effectKit } from "@kit.ArkGraphics2D"; 940 941const color = new ArrayBuffer(96); 942let opts : image.InitializationOptions = { 943 editable: true, 944 pixelFormat: 3, 945 size: { 946 height: 4, 947 width: 6 948 } 949}; 950image.createPixelMap(color, opts).then((pixelMap) => { 951 let headFilter = effectKit.createEffect(pixelMap); 952 if (headFilter != null) { 953 headFilter.grayscale(); 954 } 955}) 956``` 957 958 959### getEffectPixelMap<sup>11+</sup> 960 961getEffectPixelMap(): Promise<image.PixelMap> 962 963获取已添加链表效果的源图像的image.PixelMap，使用Promise异步回调。 964 965**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 966 967**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 968 969**系统能力：** SystemCapability.Multimedia.Image.Core 970 971**返回值：** 972 973| 类型 | 说明 | 974| ---------------------- | -------------- | 975| Promise\<image.PixelMap> | Promise对象。返回已添加链表效果的源图像的image.PixelMap。 | 976 977 978**示例：** 979 980```ts 981import { image } from "@kit.ImageKit"; 982import { effectKit } from "@kit.ArkGraphics2D"; 983 984const color = new ArrayBuffer(96); 985let opts : image.InitializationOptions = { 986 editable: true, 987 pixelFormat: 3, 988 size: { 989 height: 4, 990 width: 6 991 } 992}; 993image.createPixelMap(color, opts).then((pixelMap) => { 994 effectKit.createEffect(pixelMap).grayscale().getEffectPixelMap().then(data => { 995 console.info('getPixelBytesNumber = ', data.getPixelBytesNumber()); 996 }) 997}) 998``` 999 1000### getPixelMap<sup>(deprecated)</sup> 1001 1002getPixelMap(): image.PixelMap 1003 1004获取已添加链表效果的源图像的image.PixelMap。 1005 1006> **说明：** 1007> 1008> 此接口从API version 9开始支持，从API version 11开始废弃，推荐使用[getEffectPixelMap](#geteffectpixelmap11)。 1009 1010**系统能力：** SystemCapability.Multimedia.Image.Core 1011 1012**返回值：** 1013 1014| 类型 | 说明 | 1015| :------------- | :---------------------------------------------- | 1016| [image.PixelMap](../apis-image-kit/js-apis-image.md#pixelmap7) | 已添加效果的源图像的image.PixelMap。 | 1017 1018**示例：** 1019 1020```ts 1021import { image } from "@kit.ImageKit"; 1022import { effectKit } from "@kit.ArkGraphics2D"; 1023 1024const color = new ArrayBuffer(96); 1025let opts : image.InitializationOptions = { 1026 editable: true, 1027 pixelFormat: 3, 1028 size: { 1029 height: 4, 1030 width: 6 1031 } 1032}; 1033image.createPixelMap(color, opts).then((pixelMap) => { 1034 let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap(); 1035 console.info('getPixelBytesNumber = ', pixel.getPixelBytesNumber()); 1036}) 1037``` 1038
