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```js 18import effectKit from '@ohos.effectKit'; 19``` 20 21## effectKit.createEffect 22createEffect(source: image.PixelMap): Filter 23 24通过传入的PixelMap创建Filter实例。 25 26**系统能力：** SystemCapability.Multimedia.Image.Core 27 28**参数：** 29 30| 参数名 | 类型 | 必填 | 说明 | 31| ------- | ----------------- | ---- | -------- | 32| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见[图片开发指导](../../media/image-overview.md)。 | 33 34**返回值：** 35 36| 类型 | 说明 | 37| -------------------------------- | -------------- | 38| [Filter](#filter) | 返回不带任何效果的Filter链表的头节点，失败时返回null。 | 39 40**示例：** 41 42```js 43import image from "@ohos.multimedia.image"; 44 45const color = new ArrayBuffer(96); 46let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } } 47image.createPixelMap(color, opts).then((pixelMap) => { 48 let headFilter = effectKit.createEffect(pixelMap); 49}) 50``` 51 52## effectKit.createColorPicker 53 54createColorPicker(source: image.PixelMap): Promise\<ColorPicker> 55 56通过传入的PixelMap创建ColorPicker实例，使用Promise异步回调。 57 58**系统能力：** SystemCapability.Multimedia.Image.Core 59 60**参数：** 61 62| 参数名 | 类型 | 必填 | 说明 | 63| -------- | ----------- | ---- | -------------------------- | 64| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 | image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见[图片开发指导](../../media/image-overview.md)。 | 65 66**返回值：** 67 68| 类型 | 说明 | 69| ---------------------- | -------------- | 70| Promise\<[ColorPicker](#colorpicker)> | Promise对象。返回创建的ColorPicker实例。 | 71 72**示例：** 73 74```js 75import image from "@ohos.multimedia.image"; 76 77const color = new ArrayBuffer(96); 78let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } } 79image.createPixelMap(color, opts).then((pixelMap) => { 80 effectKit.createColorPicker(pixelMap).then(colorPicker => { 81 console.info("color picker=" + colorPicker); 82 }).catch(ex => console.error(".error=" + ex.toString())) 83}) 84``` 85 86## effectKit.createColorPicker 87 88createColorPicker(source: image.PixelMap, callback: AsyncCallback\<ColorPicker>): void 89 90通过传入的PixelMap创建ColorPicker实例，使用callback异步回调。 91 92**系统能力：** SystemCapability.Multimedia.Image.Core 93 94**参数：** 95 96| 参数名 | 类型 | 必填 | 说明 | 97| -------- | ------------------ | ---- | -------------------------- | 98| source | [image.PixelMap](js-apis-image.md#pixelmap7) | 是 |image模块创建的PixelMap实例。可通过图片解码或直接创建获得，具体可见[图片开发指导](../../media/image-overview.md)。 | 99| callback | AsyncCallback\<[ColorPicker](#colorpicker)> | 是 | 回调函数。返回创建的ColorPicker实例。 | 100 101**示例：** 102 103```js 104import image from "@ohos.multimedia.image"; 105 106const color = new ArrayBuffer(96); 107let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } } 108image.createPixelMap(color, opts).then((pixelMap) => { 109 effectKit.createColorPicker(pixelMap, (error, colorPicker) => { 110 if (error) { 111 console.log('Failed to create color picker.'); 112 } else { 113 console.log('Succeeded in creating color picker.'); 114 } 115 }) 116}) 117``` 118 119## Color 120 121颜色类，用于保存取色的结果。 122 123**系统能力：** SystemCapability.Multimedia.Image.Core 124 125| 名称 | 类型 | 可读 | 可写 | 说明 | 126| ------ | ----- | ---- | ---- | ---------------- | 127| red | number | 是 | 否 | 红色分量值。 | 128| green | number | 是 | 否 | 绿色分量值。 | 129| blue | number | 是 | 否 | 蓝色分量值。 | 130| alpha | number | 是 | 否 | 透明通道分量值。 | 131 132## ColorPicker 133 134取色类，用于从一张图像数据中获取它的主要颜色。在调用ColorPicker的方法前，需要先通过[createColorPicker](#effectkitcreatecolorpicker)创建一个ColorPicker实例。 135 136### getMainColor 137 138getMainColor(): Promise\<Color> 139 140读取图像主色的颜色值，结果写入[Color](#color)里，使用Promise异步回调。 141 142**系统能力：** SystemCapability.Multimedia.Image.Core 143 144**返回值：** 145 146| 类型 | 说明 | 147| :------------- | :---------------------------------------------- | 148| Promise\<[Color](#color)> | Promise对象。返回图像主色对应的颜色值，失败时返回错误信息。 | 149 150**示例：** 151 152```js 153colorPicker.getMainColor().then(color => { 154 console.log('Succeeded in getting main color.'); 155 console.info(`color[ARGB]=${color.alpha},${color.red},${color.green},${color.blue}`); 156}).catch(error => { 157 console.log('Failed to get main color.'); 158}) 159``` 160 161### getMainColorSync 162 163getMainColorSync(): Color 164 165读取图像主色的颜色值，结果写入[Color](#color)里，使用同步方式返回。 166 167**系统能力：** SystemCapability.Multimedia.Image.Core 168 169**返回值：** 170 171| 类型 | 说明 | 172| :------- | :----------------------------------- | 173| [Color](#color) | Color实例，即图像主色对应的颜色值，失败时返回null。 | 174 175**示例：** 176 177```js 178let color = colorPicker.getMainColorSync(); 179console.log('get main color =' + color); 180``` 181 182 183## Filter 184 185图像效果类，用于将指定的效果添加到输入图像中。在调用Filter的方法前，需要先通过[createEffect](#effectkitcreateeffect)创建一个Filter实例。 186 187### blur 188 189blur(radius: number): Filter 190 191将模糊效果添加到效果链表中，结果返回效果链表的头节点。 192 193**系统能力：** SystemCapability.Multimedia.Image.Core 194 195**参数：** 196 197| 参数名 | 类型 | 必填 | 说明 | 198| ------ | ----------- | ---- | ------------------------------------------------------------ | 199| radius | number | 是 | 模糊半径，单位是像素。模糊效果与所设置的值成正比，值越大效果越明显。 | 200 201**返回值：** 202 203| 类型 | 说明 | 204| :------------- | :---------------------------------------------- | 205| [Filter](#filter) | 返回已添加的图像效果。 | 206 207**示例：** 208 209```js 210import image from "@ohos.multimedia.image"; 211 212const color = new ArrayBuffer(96); 213let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }; 214image.createPixelMap(color, opts).then((pixelMap) => { 215 let radius = 5; 216 let headFilter = effectKit.createEffect(pixelMap); 217 if (headFilter != null) { 218 headFilter.blur(radius); 219 } 220}) 221``` 222 223 224### brightness 225 226brightness(bright: number): Filter 227 228将高亮效果添加到效果链表中，结果返回效果链表的头节点。 229 230**系统能力：** SystemCapability.Multimedia.Image.Core 231 232**参数：** 233 234| 参数名 | 类型 | 必填 | 说明 | 235| ------ | ----------- | ---- | ------------------------------------------------------------ | 236| bright | number | 是 | 高亮程度，取值范围在0-1之间，取值为0时图像保持不变。 | 237 238**返回值：** 239 240| 类型 | 说明 | 241| :------------- | :---------------------------------------------- | 242| [Filter](#filter) | 返回已添加的图像效果。 | 243 244**示例：** 245 246```js 247import image from "@ohos.multimedia.image"; 248 249const color = new ArrayBuffer(96); 250let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }; 251image.createPixelMap(color, opts).then((pixelMap) => { 252 let bright = 0.5; 253 let headFilter = effectKit.createEffect(pixelMap); 254 if (headFilter != null) { 255 headFilter.brightness(bright); 256 } 257}) 258``` 259 260 261### grayscale 262 263grayscale(): Filter 264 265将灰度效果添加到效果链表中，结果返回效果链表的头节点。 266 267**系统能力：** SystemCapability.Multimedia.Image.Core 268 269**返回值：** 270 271| 类型 | 说明 | 272| :------------- | :---------------------------------------------- | 273| [Filter](#filter) | 返回已添加的图像效果。 | 274 275**示例：** 276 277```js 278import image from "@ohos.multimedia.image"; 279 280const color = new ArrayBuffer(96); 281let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }; 282image.createPixelMap(color, opts).then((pixelMap) => { 283 let headFilter = effectKit.createEffect(pixelMap); 284 if (headFilter != null) { 285 headFilter.grayscale(); 286 } 287}) 288``` 289 290 291### getPixelMap 292 293getPixelMap(): [image.PixelMap](js-apis-image.md#pixelmap7) 294 295获取已添加链表效果的源图像的image.PixelMap。 296 297**系统能力：** SystemCapability.Multimedia.Image.Core 298 299**返回值：** 300 301| 类型 | 说明 | 302| :------------- | :---------------------------------------------- | 303| [image.PixelMap](js-apis-image.md#pixelmap7) | 已添加效果的源图像的image.PixelMap。 | 304 305**示例：** 306 307```js 308import image from "@ohos.multimedia.image"; 309 310const color = new ArrayBuffer(96); 311let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }; 312image.createPixelMap(color, opts).then((pixelMap) => { 313 let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap(); 314}) 315``` 316
