1# Class (ImageFilter) 2 3<!--Kit: ArkGraphics 2D--> 4<!--Subsystem: Graphics--> 5<!--Owner: @hangmengxin--> 6<!--Designer: @wangyanglan--> 7<!--Tester: @nobuggers--> 8<!--Adviser: @ge-yafang--> 9 10> **说明：** 11> 12> - 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 13> 14> - 本Class首批接口从API version 12开始支持。 15> 16> - 本模块使用屏幕物理像素单位px。 17> 18> - 本模块为单线程模型策略，需要调用方自行管理线程安全和上下文状态的切换。 19 20图像滤波器。 21 22## 导入模块 23 24```ts 25import { drawing } from '@kit.ArkGraphics2D'; 26``` 27 28## createBlurImageFilter<sup>12+</sup> 29 30static createBlurImageFilter(sigmaX: number, sigmaY: number, tileMode: TileMode, imageFilter?: ImageFilter | null ): ImageFilter 31 32创建具有模糊效果的图像滤波器。 33 34**系统能力：** SystemCapability.Graphics.Drawing 35 36**参数：** 37 38| 参数名 | 类型 | 必填 | 说明 | 39| --------------- | ------- | ---- | ----------------------------------------------------------- | 40| sigmaX | number | 是 | 表示沿x轴方向上高斯模糊的标准差，必须大于0，该参数为浮点数。 | 41| sigmaY | number | 是 | 表示沿y轴方向上高斯模糊的标准差，必须大于0，该参数为浮点数。 | 42| tileMode | [TileMode](arkts-apis-graphics-drawing-e.md#tilemode12)| 是 | 表示在边缘处应用的平铺模式。 | 43| imageFilter | [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) \| null | 否 | 要与当前图像滤波器叠加的输入滤波器，默认为null，表示直接将当前图像滤波器作用于原始图像。 | 44 45**返回值：** 46 47| 类型 | 说明 | 48| --------------------- | -------------- | 49| [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 返回创建的图像滤波器。 | 50 51**错误码：** 52 53以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 54 55| 错误码ID | 错误信息 | 56| ------- | --------------------------------------------| 57| 401 | Parameter error.Possible causes:1.Mandatory parameters are left unspecified;2.Incorrect parameter types;3.Parameter verification failed. | 58 59**示例：** 60 61```ts 62import { drawing } from '@kit.ArkGraphics2D'; 63 64let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 65``` 66## createFromImage<sup>20+</sup> 67 68static createFromImage(pixelmap: image.PixelMap, srcRect?: common2D.Rect | null, dstRect?: common2D.Rect | null): ImageFilter 69 70基于给定的图像创建一个图像滤波器。此接口不建议用于录制类型的画布，会影响性能。 71 72**系统能力**：SystemCapability.Graphics.Drawing 73 74**参数：** 75 76| 参数名 | 类型 | 必填 | 说明 | 77| --------------- | ------- | ---- | ----------------------------------------------------------- | 78| pixelmap | [image.PixelMap](../apis-image-kit/arkts-apis-image-PixelMap.md) | 是 | 图片对象。 | 79| srcRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) \| null | 否 | 可选参数，默认为空。图片要被此滤波器使用的像素区域，如果为空，则使用pixelmap全部区域。 | 80| dstRect | [common2D.Rect](js-apis-graphics-common2D.md#rect) \| null | 否 | 可选参数，默认为空。要进行渲染的区域，如果为空，则和srcRect保持一致。 | 81 82**返回值：** 83 84| 类型 | 说明 | 85| --------------------- | -------------- | 86| [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 返回创建的图像滤波器。 | 87 88**示例：** 89 90```ts 91import { RenderNode } from '@kit.ArkUI'; 92import { image } from '@kit.ImageKit'; 93import { common2D, drawing } from '@kit.ArkGraphics2D'; 94class DrawingRenderNode extends RenderNode { 95 draw(context : DrawContext) { 96 const width = 1000; 97 const height = 1000; 98 const bufferSize = width * height * 4; 99 const color: ArrayBuffer = new ArrayBuffer(bufferSize); 100 101 const colorData = new Uint8Array(color); 102 for (let i = 0; i < colorData.length; i += 4) { 103 colorData[i] = 255; 104 colorData[i+1] = 156; 105 colorData[i+2] = 0; 106 colorData[i+3] = 255; 107 } 108 109 let opts : image.InitializationOptions = { 110 editable: true, 111 pixelFormat: 3, 112 size: { height, width } 113 } 114 115 let pixelMap: image.PixelMap = image.createPixelMapSync(color, opts); 116 let srcRect: common2D.Rect = { left: 10, top: 10, right: 80, bottom: 80 }; 117 let dstRect: common2D.Rect = { left: 200, top: 200, right: 400, bottom: 400 }; 118 if (pixelMap != null) { 119 let filter = drawing.ImageFilter.createFromImage(pixelMap, srcRect, dstRect); 120 } 121 } 122} 123``` 124## createBlendImageFilter<sup>20+</sup> 125 126static createBlendImageFilter(mode: BlendMode, background: ImageFilter, foreground: ImageFilter): ImageFilter 127 128按照指定的混合模式对两个滤波器进行叠加，生成一个新的滤波器。 129 130**系统能力**：SystemCapability.Graphics.Drawing 131 132**参数：** 133 134| 参数名 | 类型 | 必填 | 说明 | 135| --------------- | ------- | ---- | ----------------------------------------------------------- | 136| mode | [BlendMode](arkts-apis-graphics-drawing-e.md#blendmode) | 是 | 颜色混合模式。 | 137| background | [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 是 | 在混合模式中作为目标色的滤波器。| 138| foreground | [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 是 | 在混合模式中作为源色的滤波器。 | 139 140**返回值：** 141 142| 类型 | 说明 | 143| --------------------- | -------------- | 144| [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 返回创建的图像滤波器。 | 145 146**错误码：** 147 148以下错误码的详细介绍请参见[图形绘制与显示错误码](../apis-arkgraphics2d/errorcode-drawing.md)。 149 150| 错误码ID | 错误信息 | 151| ------- | --------------------------------------------| 152| 25900001 | Parameter error.Possible causes: Incorrect parameter range. | 153 154**示例：** 155 156```ts 157import { drawing } from '@kit.ArkGraphics2D'; 158 159let dx = 15.0; 160let dy = 10.0; 161let offsetFilter1 = drawing.ImageFilter.createOffsetImageFilter(dx, dy, null); 162let x = 15.0; 163let y = 30.0; 164let offsetFilter2 = drawing.ImageFilter.createOffsetImageFilter(x, y, null); 165let blendImageFilter = drawing.ImageFilter.createBlendImageFilter(drawing.BlendMode.SRC_IN, offsetFilter1, offsetFilter2); 166``` 167## createComposeImageFilter<sup>20+</sup> 168 169static createComposeImageFilter(cOuter: ImageFilter, cInner: ImageFilter): ImageFilter 170 171将两个图像滤波器进行级联生成新的图像滤波器，级联时会将第一级滤波器的输出作为第二级滤波器的输入，经过第二级滤波器处理后，输出最终的滤波结果。 172 173**系统能力**：SystemCapability.Graphics.Drawing 174 175**参数：** 176 177| 参数名 | 类型 | 必填 | 说明 | 178| --------------- | ------- | ---- | ----------------------------------------------------------- | 179| cOuter | [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 是 | 在级联中，作为第二级的滤波器，处理第一级滤波器的输出。如果第二级滤波器为空，第一级滤波器不为空，最后输出第一级滤波器的结果。两级滤波器不能同时为空。 | 180| cInner | [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 是 | 在级联中，作为第一级的滤波器，直接处理图像的原始内容。如果第一级滤波器为空，第二级滤波器不为空，最后输出第二级滤波器的结果。两级滤波器不能同时为空。 | 181 182**返回值：** 183 184| 类型 | 说明 | 185| --------------------- | -------------- | 186| [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 返回创建的图像滤波器。 | 187 188**示例：** 189 190```ts 191import { drawing } from '@kit.ArkGraphics2D'; 192 193let blurSigmaX = 10.0; 194let blurSigmaY = 10.0; 195let blurFilter = drawing.ImageFilter.createBlurImageFilter(blurSigmaX, blurSigmaY, drawing.TileMode.CLAMP, null); 196let colorMatrix:Array<number> = [ 197 0, 0, 0, 0, 0, 198 0, 1, 0, 0, 0, 199 0, 0, 1, 0, 0, 200 0, 0, 0, 1, 0 201]; 202let redRemovalFilter = drawing.ColorFilter.createMatrixColorFilter(colorMatrix); 203let colorFilter = drawing.ImageFilter.createFromColorFilter(redRemovalFilter, null); 204let composedImageFilter = drawing.ImageFilter.createComposeImageFilter(colorFilter, blurFilter); 205``` 206## createFromColorFilter<sup>12+</sup> 207 208static createFromColorFilter(colorFilter: ColorFilter, imageFilter?: ImageFilter | null): ImageFilter 209 210创建一个将颜色滤波器应用于传入的图像滤波器的图像滤波器。 211 212**系统能力：** SystemCapability.Graphics.Drawing 213 214**参数：** 215 216| 参数名 | 类型 | 必填 | 说明 | 217| --------------- | ------- | ---- | ----------------------------------------------------------- | 218| colorFilter | [ColorFilter](arkts-apis-graphics-drawing-ColorFilter.md) | 是 | 表示颜色滤波器。 | 219| imageFilter | [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) \| null | 否 | 要与当前图像滤波器叠加的输入滤波器，默认为null，表示直接将当前图像滤波器作用于原始图像。 | 220 221**返回值：** 222 223| 类型 | 说明 | 224| --------------------- | -------------- | 225| [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 返回创建的图像滤波器。 | 226 227**错误码：** 228 229以下错误码的详细介绍请参见[通用错误码](../errorcode-universal.md)。 230 231| 错误码ID | 错误信息 | 232| ------- | --------------------------------------------| 233| 401 | Parameter error.Possible causes: 1.Mandatory parameters are left unspecified; 2.Incorrect parameter types.| 234 235**示例：** 236 237```ts 238import { drawing } from '@kit.ArkGraphics2D'; 239let imgFilter = drawing.ImageFilter.createBlurImageFilter(5, 10, drawing.TileMode.CLAMP); 240let clolorfilter = drawing.ColorFilter.createSRGBGammaToLinear(); 241let imgFilter1 = drawing.ImageFilter.createFromColorFilter(clolorfilter, imgFilter); 242``` 243## createOffsetImageFilter<sup>20+</sup> 244 245static createOffsetImageFilter(dx: number, dy: number, input?: ImageFilter | null): ImageFilter 246 247创建一个偏移滤波器，将输入的滤波器按照指定向量进行平移。 248 249**系统能力**：SystemCapability.Graphics.Drawing 250 251**参数：** 252 253| 参数名 | 类型 | 必填 | 说明 | 254| --------------- | ------- | ---- | ----------------------------------------------------------- | 255| dx | number | 是 | 水平方向的平移距离， 该参数为浮点数。 | 256| dy | number | 是 | 竖直方向的平移距离， 该参数为浮点数。 | 257| input | [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) \| null | 否 | 需进行平移的滤波器。默认为空，如果为空，则将无滤波效果的绘制结果进行平移。 | 258 259**返回值：** 260 261| 类型 | 说明 | 262| --------------------- | -------------- | 263| [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 返回创建的图像滤波器。 | 264 265**示例：** 266 267```ts 268import { drawing } from '@kit.ArkGraphics2D'; 269 270let dx = 15.0; 271let dy = 10.0; 272let offsetFilter = drawing.ImageFilter.createOffsetImageFilter(dx, dy, null); 273``` 274 275## createFromShaderEffect<sup>20+</sup> 276 277static createFromShaderEffect(shader: ShaderEffect): ImageFilter 278 279基于着色器创建一个图像滤波器。 280 281**系统能力**：SystemCapability.Graphics.Drawing 282 283**参数：** 284 285| 参数名 | 类型 | 必填 | 说明 | 286| --------------- | ------- | ---- | ----------------------------------------------------------- | 287| shader | [ShaderEffect](arkts-apis-graphics-drawing-ShaderEffect.md) | 是 | 表示应用于图像的着色器效果。 | 288 289**返回值：** 290 291| 类型 | 说明 | 292| --------------------- | -------------- | 293| [ImageFilter](arkts-apis-graphics-drawing-ImageFilter.md) | 返回创建的图像滤波器。 | 294 295**示例：** 296 297```ts 298import { drawing } from '@kit.ArkGraphics2D'; 299 300let shaderEffect = drawing.ShaderEffect.createColorShader(0xFF00FF00); 301let renderEffect = drawing.ImageFilter.createFromShaderEffect(shaderEffect); 302```