0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙开发图形图像——@ohos.effectKit (图像效果)

王程 来源:jf_75796907 作者:jf_75796907 2024-02-22 16:08 次阅读

图像效果提供处理图像的一些基础能力,包括对当前图像的亮度调节、模糊化、灰度调节、智能取色等。

该模块提供以下图像效果相关的常用功能:

Filter:效果类,用于添加指定效果到图像源。

Color:颜色类,用于保存取色的结果。

ColorPicker:智能取色器。

NOTE
本模块首批接口从API version 9开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。

导入模块

import effectKit from '@ohos.effectKit';

effectKit.createEffect

createEffect(source: image.PixelMap): Filter

通过传入的PixelMap创建Filter实例。

系统能力: SystemCapability.Multimedia.Image.Core

参数

wKgaomXXAFaAOpt3AABKf7HO3l8081.png

返回值:

wKgaomXXAF6AW9kDAAAi2tF7JIc005.png

示例:

import image from "@ohos.multimedia.image"; const color = new ArrayBuffer(96); let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } } image.createPixelMap(color, opts).then((pixelMap) => { let headFilter = effectKit.createEffect(pixelMap); })

effectKit.createColorPicker

createColorPicker(source: image.PixelMap): Promise

通过传入的PixelMap创建ColorPicker实例,使用Promise异步回调。

系统能力: SystemCapability.Multimedia.Image.Core

参数:

wKgZomXXAGqAaSBZAABKVm7Szk0230.png

返回值:

wKgaomXXAHGAFYcIAAAh_Uneufw939.png

示例:

import image from "@ohos.multimedia.image"; const color = new ArrayBuffer(96); let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } } image.createPixelMap(color, opts).then((pixelMap) => { effectKit.createColorPicker(pixelMap).then(colorPicker => { console.info("color picker=" + colorPicker); }).catch(ex => console.error(".error=" + ex.toString())) })

effectKit.createColorPicker

createColorPicker(source: image.PixelMap, callback: AsyncCallback): void

通过传入的PixelMap创建ColorPicker实例,使用callback异步回调。

系统能力: SystemCapability.Multimedia.Image.Core

参数:

wKgaomXXAHeAdEJzAABvX5BTDkI118.png

示例:

import image from "@ohos.multimedia.image"; const color = new ArrayBuffer(96); let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } } image.createPixelMap(color, opts).then((pixelMap) => { effectKit.createColorPicker(pixelMap, (error, colorPicker) => { if (error) { console.error('Failed to create color picker.'); } else { console.info('Succeeded in creating color picker.'); } }) })

Color

颜色类,用于保存取色的结果。

系统能力: SystemCapability.Multimedia.Image.Core

wKgZomXXAH-AdpnMAABoyrVHSIY275.png

ColorPicker

取色类,用于从一张图像数据中获取它的主要颜色。在调用ColorPicker的方法前,需要先通过createColorPicker创建一个ColorPicker实例。

getMainColor

getMainColor(): Promise

读取图像主色的颜色值,结果写入Color里,使用Promise异步回调。

系统能力: SystemCapability.Multimedia.Image.Core

返回值:

wKgZomXXAIaAbKIxAAAoNc-NRHE316.png

示例:

colorPicker.getMainColor().then(color => { console.info('Succeeded in getting main color.'); console.info(`color[ARGB]=${color.alpha},${color.red},${color.green},${color.blue}`); }).catch(error => { console.error('Failed to get main color.'); })

getMainColorSync

getMainColorSync(): Color

读取图像主色的颜色值,结果写入Color里,使用同步方式返回。

系统能力: SystemCapability.Multimedia.Image.Core

返回值:

wKgZomXXAI6AC_z4AAAjrfyt3mo504.png

示例:

let color = colorPicker.getMainColorSync();
console.info(‘get main color =’ + color);

wKgaomXXAOeALbKrAAI9Ul3CpWM699.png

wKgaomXXAJeAIOinAAI9Ul3CpWM376.png

Filter

图像效果类,用于将指定的效果添加到输入图像中。在调用Filter的方法前,需要先通过createEffect创建一个Filter实例。

blur

blur(radius: number): Filter

将模糊效果添加到效果链表中,结果返回效果链表的头节点。

系统能力: SystemCapability.Multimedia.Image.Core

参数:

wKgZomXXAOiAM9MMAAA6ZgjZzlw545.png

wKgaomXXAJ6ASNjGAAA6ZgjZzlw318.png

返回值:

wKgaomXXAOiAaD4cAAAX_c9iadI439.png

wKgaomXXAKOAQwDdAAAX_c9iadI237.png

示例:

import image from "@ohos.multimedia.image"; const color = new ArrayBuffer(96); let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }; image.createPixelMap(color, opts).then((pixelMap) => { let radius = 5; let headFilter = effectKit.createEffect(pixelMap); if (headFilter != null) { headFilter.blur(radius); } })

wKgZomXXAOqAZohDAAPKaPnGr8g418.png

wKgaomXXAK2AJA7PAAPKaPnGr8g852.png

brightness

brightness(bright: number): Filter

将高亮效果添加到效果链表中,结果返回效果链表的头节点。

系统能力: SystemCapability.Multimedia.Image.Core

参数:

wKgaomXXAOqATV42AAA0mHwuR8o840.png

wKgaomXXALaAMqKHAAA0mHwuR8o766.png

返回值:

wKgZomXXAOuAHEb0AAAX2Za5ei4904.png

wKgZomXXALuATsyWAAAX2Za5ei4093.png

示例:

import image from "@ohos.multimedia.image"; const color = new ArrayBuffer(96); let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }; image.createPixelMap(color, opts).then((pixelMap) => { let bright = 0.5; let headFilter = effectKit.createEffect(pixelMap); if (headFilter != null) { headFilter.brightness(bright); } })

wKgZomXXAOyALaTEAAQeLWEU5uM119.png

wKgaomXXAMGALbopAAQeLWEU5uM869.png

grayscale

grayscale(): Filter

将灰度效果添加到效果链表中,结果返回效果链表的头节点。

系统能力: SystemCapability.Multimedia.Image.Core

返回值:

wKgaomXXAOyAcQ4_AAAX4yfe2RY331.png

wKgZomXXAMaAUHisAAAX4yfe2RY044.png

示例:

import image from "@ohos.multimedia.image"; const color = new ArrayBuffer(96); let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }; image.createPixelMap(color, opts).then((pixelMap) => { let headFilter = effectKit.createEffect(pixelMap); if (headFilter != null) { headFilter.grayscale(); } })

wKgZomXXAO2ARYdOAANXCUlMAdQ023.png

wKgaomXXAMyAcFYGAANXCUlMAdQ235.png

getPixelMap

getPixelMap(): image.PixelMap

获取已添加链表效果的源图像的image.PixelMap。

系统能力: SystemCapability.Multimedia.Image.Core

返回值:

wKgaomXXAO2AC8HAAAAiYDWOIAg938.png

wKgZomXXANKAZBtzAAAiYDWOIAg457.png

示例:

import image from "@ohos.multimedia.image"; const color = new ArrayBuffer(96); let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }; image.createPixelMap(color, opts).then((pixelMap) => { let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap(); }) 审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
收藏 人收藏

    评论

    相关推荐

    EPS格式图像的最佳使用场景

    EPS(Encapsulated PostScript)是一种广泛使用的矢量图形文件格式,最初由Adobe公司开发。它以其高兼容性、可缩放性和高质量的图像输出而受到设计师和出版业的青睐。 1. 专业
    的头像 发表于 11-19 10:33 322次阅读

    图形图像硬件加速器卡设计原理图:270-VC709E 基于FMC接口的Virtex7 XC7VX690T PCIeX8 接口卡

    扩展。软件支持windows,Linux操作系统。Net FPGA , XC7VX690T板卡 , 软件无线电处理平台 , 图形图像硬件加速器
    的头像 发表于 08-06 10:16 486次阅读
    <b class='flag-5'>图形图像</b>硬件加速器卡设计原理图:270-VC709E 基于FMC接口的Virtex7 XC7VX690T PCIeX8 接口卡

    鸿蒙ArkTS声明式开发:跨平台支持列表【图像效果】 通用属性

    设置组件的模糊、阴影、球面效果以及设置图片的图像效果
    的头像 发表于 06-04 16:34 656次阅读
    <b class='flag-5'>鸿蒙</b>ArkTS声明式<b class='flag-5'>开发</b>:跨平台支持列表【<b class='flag-5'>图像</b><b class='flag-5'>效果</b>】 通用属性

    鸿蒙开发接口图形图像:【WebGL2】

    WebGL2支持图形的绘制,包括对当前绘制图形的位置、颜色等进行处理,其中相对WebGL来说对渲染管道和着色语言进行了增强。
    的头像 发表于 05-30 15:19 522次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>图形图像</b>:【WebGL2】

    鸿蒙开发接口图形图像:【@ohos.display (屏幕属性)】

    屏幕属性提供管理显示设备的一些基础能力,包括获取默认显示设备的信息,获取所有显示设备的信息以及监听显示设备的插拔行为。
    的头像 发表于 05-30 11:39 825次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>图形图像</b>:【@<b class='flag-5'>ohos</b>.display (屏幕属性)】

    鸿蒙开发接口图形图像:【@ohos.window (窗口)】

    窗口提供管理窗口的一些基础能力,包括对当前窗口的创建、销毁、各属性设置,以及对各窗口间的管理调度。
    的头像 发表于 05-30 10:07 1165次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>图形图像</b>:【@<b class='flag-5'>ohos</b>.window (窗口)】

    鸿蒙开发接口图形图像:【WebGL】

    WebGL提供图形绘制的能力,包括对当前绘制图形的位置、颜色等进行处理。
    的头像 发表于 05-30 09:31 517次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>图形图像</b>:【WebGL】

    鸿蒙开发接口图形图像:【@ohos.screenshot (屏幕截图)】

    本模块提供屏幕截图的能力,截取屏幕时支持设置截取的区域、大小等图像信息。
    的头像 发表于 05-29 15:47 925次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>图形图像</b>:【@<b class='flag-5'>ohos</b>.screenshot (屏幕截图)】

    鸿蒙开发接口图形图像:【@ohos.screen (屏幕)】

    本模块提供管理屏幕的一些基础能力,包括获取屏幕对象,监听屏幕变化,创建和销毁虚拟屏幕等。
    的头像 发表于 05-29 10:49 1138次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>图形图像</b>:【@<b class='flag-5'>ohos</b>.screen (屏幕)】

    鸿蒙OS元服务开发说明:【WebGL网页图形开发接口】

    WebGL主要帮助开发者在前端开发中完成图形图像的相关处理,比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web开发范式
    的头像 发表于 04-02 17:02 467次阅读
    <b class='flag-5'>鸿蒙</b>OS元服务<b class='flag-5'>开发</b>说明:【WebGL网页<b class='flag-5'>图形</b>库<b class='flag-5'>开发</b>接口】

    鸿蒙开发图形图像:【图形子系统】

    图形子系统主要包括UI组件、布局、动画、字体、输入事件、窗口管理、渲染绘制等模块,构建基于轻量OS应用框架满足硬件资源较小的物联网设备或者构建基于标准OS的应用框架满足富设备的OpenHarmony系统应用开发
    的头像 发表于 03-23 16:50 654次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b><b class='flag-5'>图形图像</b>:【<b class='flag-5'>图形</b>子系统】

    鸿蒙开发案例:【图像加载缓存库ImageKnife】

    专门为OpenHarmony打造的一款图像加载缓存库,致力于更高效、更轻便、更简单。
    的头像 发表于 03-23 16:48 860次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>案例:【<b class='flag-5'>图像</b>加载缓存库ImageKnife】

    鸿蒙原生应用元服务开发-WebGL网页图形开发接口说明

    一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理,比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web开发范式
    发表于 03-11 15:51

    330-基于FMC接口的Kintex-7 XC7K325T PCIeX4 3U PXIe接口卡 图形图像硬件加速器

    标签: Net FPGA , XC7K325T板卡 , XC7K325T处理板 , 软件无线电处理平台 , 图形图像硬件加速器
    的头像 发表于 03-04 14:14 624次阅读
    330-基于FMC接口的Kintex-7 XC7K325T PCIeX4 3U PXIe接口卡 <b class='flag-5'>图形图像</b>硬件加速器

    鸿蒙实战项目开发:【短信服务】

    ://gitee.com/openharmony/applications_app_samples.git git pull origin master ​ 最后呢,很多开发朋友不知道需要学习那些鸿蒙威廉希尔官方网站 ?鸿蒙
    发表于 03-03 21:29