1# Image Effects 2 3Image effects include blur, shadow, and much more. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12 13| Name | Type | Default Value| Description | 14| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | 15| blur | number | - | Applies the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.| 16| backdropBlur | number | - | Applies the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.| 17| shadow | {<br/>radius: number \| [Resource](ts-types.md#resource),<br/>color?: [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource),<br/>offsetX?: number \| [Resource](ts-types.md#resource),<br/>offsetY?: number \| [Resource](ts-types.md#resource)<br/>} | - | Applies a shadow effect to the current component.<br>When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.<br>Since API version 9, this API is supported in ArkTS widgets.| 18| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>Since API version 9, this API is supported in ArkTS widgets.| 19| brightness | number | 1.0 | Applies a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| 20| saturate | number | 1.0 | Applies the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| 21| contrast | number | 1.0 | Applies the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| 22| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion, and **0** indicates that the image does not change. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| 23| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image conversion ratio. The value **1** indicates the image is completely sepia, and **0** indicates that the image does not change. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.| 24| hueRotate | number \| string | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then –180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.| 25| colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Applies the color blend effect to the current component. The input parameter is the blended color.<br>Since API version 9, this API is supported in ArkTS widgets.| 26 27## ShadowOptions 28 29Provides the shadow attributes, including the blur radius, color, and offset along the x-axis and y-axis. 30 31Since API version 9, this API is supported in ArkTS widgets. 32 33| Name | Type | Mandatory | Description | 34| ------ | ------ | ---- | --------------- | 35| radius | number \| [Resource](ts-types.md#resource) | Yes | Blur radius of the shadow.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.| 36| color | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | No | Color of the shadow.<br>The default color is black.| 37| offsetX | number \| [Resource](ts-types.md#resource) | No | Offset of the shadow along the x-axis.<br>The default value is **0**. | 38| offsetY | number \| [Resource](ts-types.md#resource) | No | Offset of the shadow along the y-axis.<br>The default value is **0**.| 39 40## Example 41 42### Example 1 43Use **blur** to add the content blur effect and **backdropBlur** to add the background blur effect. 44```ts 45// xxx.ets 46@Entry 47@Component 48struct BlurEffectsExample { 49 build() { 50 Column({ space: 10 }) { 51 // Blur the font. 52 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') 53 Flex({ alignItems: ItemAlign.Center }) { 54 Text('original text').margin(10) 55 Text('blur text') 56 .blur(1).margin(10) 57 Text('blur text') 58 .blur(2).margin(10) 59 Text('blur text') 60 .blur(3).margin(10) 61 }.width('90%').height(40) 62 .backgroundColor(0xF9CF93) 63 64 65 // Blur the background. 66 Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') 67 Text() 68 .width('90%') 69 .height(40) 70 .fontSize(16) 71 .backdropBlur(3) 72 .backgroundImage('/pages/attrs/image/image.jpg') 73 .backgroundImageSize({ width: 1200, height: 160 }) 74 }.width('100%').margin({ top: 5 }) 75 } 76} 77``` 78 79 80 81### Example 2 82Apply different image effects. 83```ts 84// xxx.ets 85@Entry 86@Component 87struct ImageEffectsExample { 88 build() { 89 Column({ space: 10 }) { 90 // Apply the shadow effect. 91 Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') 92 Image($r('app.media.image')) 93 .width('90%') 94 .height(40) 95 .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 30 }) 96 97 // Apply the grayscale effect. The grayscale value ranges from 0 to 1. The closer the grayscale value is to 1, the more obvious the grayscale effect is. 98 Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%') 99 Image($r('app.media.image')).width('90%').height(40).grayscale(0.3) 100 Image($r('app.media.image')).width('90%').height(40).grayscale(0.8) 101 102 // Apply the brightness effect. The value 1 indicates no effects. If the value is less than 1, the brightness decreases. If the value is greater than 1, the brightness increases. 103 Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%') 104 Image($r('app.media.image')).width('90%').height(40).brightness(1.2) 105 106 // Apply the saturation effect. If the value is 1, the source image is displayed. 107 Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%') 108 Image($r('app.media.image')).width('90%').height(40).saturate(2.0) 109 Image($r('app.media.image')).width('90%').height(40).saturate(0.7) 110 111 // Apply the contrast effect. If the value is 1, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. 112 Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%') 113 Image($r('app.media.image')).width('90%').height(40).contrast(2.0) 114 Image($r('app.media.image')).width('90%').height(40).contrast(0.8) 115 116 // Invert the image. 117 Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%') 118 Image($r('app.media.image')).width('90%').height(40).invert(0.2) 119 Image($r('app.media.image')).width('90%').height(40).invert(0.8) 120 121 // Apply the color blend effect. 122 Text('colorBlend').fontSize(15).fontColor(0xCCCCCC).width('90%') 123 Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Green) 124 Image($r('app.media.image')).width('90%').height(40).colorBlend(Color.Blue) 125 126 // Convert the image color to sepia. 127 Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%') 128 Image($r('app.media.image')).width('90%').height(40).sepia(0.8) 129 130 // Apply the hue rotation effect. 131 Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%') 132 Image($r('app.media.image')).width('90%').height(40).hueRotate(90) 133 }.width('100%').margin({ top: 5 }) 134 } 135} 136``` 137 138 139
