1# Image Effects (System API)
2
3With image effects, you can define how a component blends with the existing content on the canvas below.
4
5> **NOTE**
6>
7> The initial APIs of this module are supported since API version 13. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8>
9> This topic describes only system APIs provided by the module. For details about its public APIs, see [Image Effects](ts-universal-attributes-image-effect.md).
10
11## advancedBlendMode
12
13advancedBlendMode(effect: BlendMode | Blender, type?: BlendApplyType): T
14
15Defines how the component's content (including the content of it child components) is blended with the existing content on the canvas (possibly offscreen canvas) below. This API cannot be used together with [blendMode](ts-universal-attributes-image-effect.md#blendmode11).
16
17**Widget capability**: This API can be used in ArkTS widgets since API version 13.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21**System API**: This is a system API.
22
23**Parameters**
24
25| Name| Type                           | Mandatory| Description                                                        |
26| ------ | ------------------------------- | ---- | ------------------------------------------------------------ |
27| effect  | [BlendMode](ts-universal-attributes-image-effect.md#blendmode11) \| [Blender](../../apis-arkgraphics2d/js-apis-uiEffect-sys.md#blender13)  | Yes  | Blend mode or blender type, depending on the parameter type.<br>When the parameter type is **BlendMode**, it indicates the blend mode.<br>Default value: **BlendMode.NONE**<br>When the parameter type is **Blender**, it indicates the blender type, used to describe the blending effect.<br>A **Blender** instance must be created using methods, for example, [uiEffect.createBrightnessBlender](../../apis-arkgraphics2d/js-apis-uiEffect-sys.md#uieffectcreatebrightnessblender), from the **uiEffect** module. Using a custom object as a parameter will not take effect. |
28| type   | [BlendApplyType](ts-universal-attributes-image-effect.md#blendapplytype11)  |    No   | Whether the blend mode is implemented offscreen.<br>Default value: **BlendApplyType.FAST**<br>**NOTE**<br>1. When **BlendApplyType.FAST** is set, the blend mode is not implemented offscreen.<br>2. When **BlendApplyType.OFFSCREEN** is set, an offscreen canvas the size of the current component is created. The content of the current component (including child components) is then drawn onto the offscreen canvas, and blended with the existing content on the canvas below using the specified blend mode.<br>3. For text components, this API does not apply to emoji expressions when not offscreen.    |
29
30## Example
31
32This example shows how to add a brightness effect to a component using **advancedBlendMode**.
33
34```ts
35// xxx.ets
36import { uiEffect } from "@kit.ArkGraphics2D"
37// Use uiEffect.createBrightnessBlender to create a BrightnessBlender instance, which can be used to apply the brightness effect to a component.
38let blender: uiEffect.BrightnessBlender = uiEffect.createBrightnessBlender({
39  cubicRate: 0.5,
40  quadraticRate: 0.5,
41  linearRate: 0.5,
42  degree: 0.5,
43  saturation: 0.5,
44  positiveCoefficient: [2.3, 4.5, 2.0],
45  negativeCoefficient: [0.5, 2.0, 0.5],
46  fraction: 0.5
47});
48// Using a custom object as a parameter will not take effect.
49let blender1: uiEffect.BrightnessBlender = {
50  cubicRate: 0.5,
51  quadraticRate: 0.5,
52  linearRate: 0.5,
53  degree: 0.5,
54  saturation: 0.5,
55  positiveCoefficient: [2.3, 4.5, 2.0],
56  negativeCoefficient: [0.5, 2.0, 0.5],
57  fraction: 0.5
58};
59
60@Entry
61@Component
62struct Index {
63  build() {
64    Stack() {
65      Image($r('app.media.img_1'))
66
67      Column() {
68        Text(String.fromCodePoint(0x1F600) + 'TEST')
69          .fontSize(60)
70
71        Text(String.fromCodePoint(0x1F600) + 'FAST')
72          .fontSize(60)
73          .advancedBlendMode(blender)
74
75        Text(String.fromCodePoint(0x1F600) + 'OFFSCREEN')
76          .fontSize(60)
77          .advancedBlendMode(blender, BlendApplyType.OFFSCREEN)
78
79        Text(String.fromCodePoint(0x1F600) + 'TEST')
80          .fontSize(60)
81          .advancedBlendMode(blender1)
82      }
83    }
84  }
85}
86```
87
88Below is how the component looks with the brightness effect applied:
89
90![advancedBlendMode](figures/advancedBlendMode.jpg)
91