CN107613046A - 滤镜管道系统、图像数据处理方法、装置以及电子设备 - Google Patents

Abstract

本说明书实施例公开了滤镜管道系统、图像数据处理方法、装置以及电子设备。所述系统包括：滤镜管道和包含在该滤镜管道中的一个或者多个滤镜，滤镜可以基于WebGL对该滤镜管道获取的图像数据进行处理，当有多个滤镜时，可以对同一图像数据进行多个滤镜处理，从而为该图像数据叠加多种滤镜效果。

Description

滤镜管道系统、图像数据处理方法、装置以及电子设备

技术领域

本说明书涉及计算机软件技术领域，尤其涉及滤镜管道系统、图像数据处理方法、装置以及电子设备。

背景技术

随着计算机和网络技术的发展，很多业务都可以在网上进行。对于一些业务，需要利用摄像头拍摄图像，并将该图像实时地在网页上进行渲染，比如，基于网页进行的视频监控业务或者增强现实(Augmented Reality，AR)游戏业务等。在渲染图像时，往往还要对图像进行滤镜处理。

在现有技术中，可以基于开源项目GPUImage提供的图形处理器(GPU)滤镜编程代码，进行图像滤镜处理。

基于现有技术，需要能够应用于网页上的更为高效的图像滤镜处理方案。

发明内容

本说明书实施例提供滤镜管道系统、图像数据处理方法、装置以及电子设备，用以解决如下技术问题：需要能够应用于网页上的更为高效的图像滤镜处理方案。

为解决上述技术问题，本说明书实施例是这样实现的：

本说明书实施例提供的一种滤镜管道系统，包括：滤镜管道、包含于所述滤镜管道中的一个或者多个滤镜；

所述滤镜管道获取图像数据；

所述一个或者多个滤镜利用WebGL着色器，对所述图像数据进行处理；

所述滤镜管道输出处理结果。

本说明书实施例提供的一种图像数据处理方法，包括：

获取图像数据；

通过滤镜管道包含的一个或者多个滤镜，利用WebGL着色器，对所述图像数据进行处理；

输出处理结果。

本说明书实施例提供的一种图像数据处理装置，包括：

获取模块，获取图像数据；

处理模块，通过滤镜管道包含的一个或者多个滤镜，利用WebGL着色器，对所述图像数据进行处理；

输出模块，输出处理结果。

本说明书实施例提供的一种电子设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

获取图像数据；

通过滤镜管道包含的一个或者多个滤镜，利用WebGL着色器，对所述图像数据进行处理；

输出处理结果。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：滤镜管道中的滤镜基于WebGL处理图像数据，因此，效率较高而且能够应用于网页上；进一步地，当滤镜管道中包含多个滤镜时，可以便利地对同一图像数据进行多个滤镜处理，为该图像数据叠加多种滤镜效果，效率较高，也有利于提高代码复用。

附图说明

为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本说明书的方案在一种实际应用场景下涉及的一种整体架构示意图；

图2为本说明书实施例提供的一种滤镜管道系统的结构示意图；

图3为本说明书实施例提供的图2中系统的一种工作流程示意图；

图4为本说明书实施例提供的一种实际应用场景下，包含多个滤镜的滤镜管道系统的处理过程示意图；

图5为本说明书实施例提供的一种实际应用场景下，包含单个滤镜的滤镜管道系统的处理过程示意图；

图6为本说明书实施例提供的一种图像数据处理方法的流程示意图；

图7为本说明书实施例提供的一种图像数据处理装置的结构示意图。

具体实施方式

本说明书实施例提供滤镜管道系统、图像数据处理方法、装置以及电子设备。

为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

图1为本说明书的方案在一种实际应用场景下涉及的一种整体架构示意图。该整体架构中，主要包括：滤镜管道系统所在设备，比如手机等。搭载于手机上的滤镜管道中包含的一个或者多个滤镜基于WebGL进行图像数据处理。

基于以上整体架构，下面对本说明书的方案进行详细说明。

图2为本说明书实施例提供的一种滤镜管道系统的结构示意图。

图2中的滤镜管道系统包括：滤镜管道、包含于该滤镜管道中的一个或者多个滤镜，图中是以多个滤镜为例的。滤镜管道本身有入口和出口，可以通过入口接收待处理的输入数据，在滤镜管道中进行处理，然后将处理结果从出口输出。

更具体地，本说明书实施例还提供了图2中系统的一种工作流程示意图，如图3所示。该流程可能的执行设备(搭载于该滤镜管道系统的设备)包括但不限于可作为终端或者服务器的以下设备：手机、平板电脑、智能可穿戴设备、车机、个人计算机、中型计算机、计算机集群等。

图3中的流程可以包括以下步骤：

S302：所述滤镜管道获取图像数据。

在本说明书实施例中，图像数据可以是被输入滤镜管道的待处理的数据本身，比如，其具体可以为被输入滤镜管道的WebGL纹理(Texture)对象，为了便于描述，后面可将WebGL纹理对象简称为纹理对象。

若被输入滤镜管道的待处理数据并非纹理对象，比如图片、视频等文件，可以由滤镜管道对其进行预处理以转化为纹理对象，以便于后续滤镜基于WebGL进行处理。在这种情况下，图像数据可以是通过预处理得到的纹理对象。

S304：所述一个或者多个滤镜利用WebGL着色器(Shader)，对所述图像数据进行处理。

在本说明书实施例中，滤镜接收的输入数据优选地为纹理对象。当然，若滤镜具有内置的用于将非纹理对象转化为纹理对象的功能逻辑，则该输入数据也可以为非纹理对象。

在本说明书实施例中，当滤镜管道中包含多个滤镜时，多个滤镜在滤镜管道中往往具有一定的顺序。比如，多个滤镜在滤镜管道中依次排为一列，则图像数据经由该一列滤镜依次为各滤镜所处理，各滤镜的处理效果则叠加于该图像数据上；再比如，多个滤镜在滤镜管道也可以以诸如树形结构等非单列结构进行排布，相应地，各滤镜可以按照这种排布方式相应地对图像数据进行处理。

在本说明书实施例中，WebGL Shader具体可以包括顶点着色器(vertex shader)和片段着色器(fragment shader)等，多个滤镜分别利用的vertex shader和/或fragmentshader等着色器可以不同，从而能够相应得实现不同的滤镜效果。

S306：所述滤镜管道输出处理结果。

在本说明书实施例中，处理结果可以是画布(Canvas)元素的图像，比如，滤镜管道可以将图像输出到Canvas上，从而便于用户直接观看。

处理结果也可以是纹理对象，比如，滤镜管道可以将纹理对象输出用于其他WebGL渲染。

通过图2的滤镜管道系统，滤镜管道中的滤镜基于WebGL处理图像数据，因此，效率较高而且能够应用于网页上；进一步地，当滤镜管道中包含多个滤镜时，可以便利地对同一图像数据进行多个滤镜处理，为该图像数据叠加多种滤镜效果，效率较高，也有利于提高代码复用。

基于图3的流程，本说明书实施例还提供了该流程的一些具体实施方案，以及扩展方案，下面进行说明。

在本说明书实施例中，当滤镜管道中包含多个滤镜时，以多个滤镜在滤镜管道中具有先后顺序依次排为一列为例，则对于步骤S304，所述一个或者多个滤镜利用WebGLShader，对所述图像数据进行处理，具体可以包括：

所述多个滤镜利用WebGL Shader，按照所述先后顺序对所述图像数据进行处理：第一个滤镜以所述图像数据作为输入数据进行处理，其他的每个滤镜以其前一个滤镜处理得到的中间结果作为输入数据进行处理，最后一个滤镜处理得到所述处理结果。

进一步地，滤镜管道中还可以包含用于存储滤镜处理中间结果的帧缓存对象(FrameBufferObject，FBO)。中间结果可以以纹理对象的形式存储在FBO中，一般地，可以将中间结果理解称存储在GPU中的纹理。

基于FBO，所述其他的每个滤镜以其前一个滤镜处理得到的中间结果作为输入数据进行处理，具体可以包括：

对于其他的每个滤镜，所述滤镜管道通过所述FBO，存储当前滤镜的前一个滤镜处理得到的中间结果，通过存储了该中间结果的FBO，将该中间结果输入当前滤镜，当前滤镜对输入的该中间结果进行处理。

例如，本说明书实施例提供了一种实际应用场景下，包含多个滤镜的滤镜管道系统的处理过程示意图，如图4所示。

在图4中，滤镜管道的输入数据为图像或者纹理对象，进行滤镜处理的为滤镜管道中包含的一个高斯滤镜(GaussianFilter)和一个黑白滤镜(LuminousFilter)。由该GaussianFilter对输入数据进行处理，得到的中间结果保存在滤镜管道中的FBO中，FBO将中间结果传递给该LuminousFilter进一步处理，得到处理结果输出至Canvas上，成为用户看见的图像。

当然，若滤镜管道中该LuminousFilter之后还包含其他的滤镜，可以以该LuminousFilter的输出结果作为中间结果继续利用所述其他的滤镜进行处理。

本说明书实施例还提供了一种实际应用场景下，包含单个滤镜的滤镜管道系统的处理过程示意图，如图5所示。

在图5中，滤镜管道的输入数据为图像或者纹理对象，进行滤镜处理的为滤镜管道中包含的一个GaussianFilter。由该GaussianFilter对输入数据进行处理，处理结果直接输出至Canvas上。

在本说明书实施例中，各滤镜可以是通过继承Filter类实现的，继承之后的滤镜能够提供自己的处理程序(比如上述的着色器等)以用于图像处理。进一步地，每个滤镜还可以提供指定的参数配合这些处理程序，处理对应的输入数据，实现相应的滤镜效果，所述参数比如是着色器参数等。

在本说明书实施例中，前面已经提到，WebGL shader可以包括vertex shader和fragment shader等。在渲染时，vertex shader用于处理顶点，比如，对顶点坐标进行几何变化、利用颜色或者纹理坐标等属性对顶点处理等；vertex shader处理后的数据通常会进行光栅化，以将顶点坐标转换为像素信息作为fragment；进而，fragment shader可以利用图像处理程序具体地针对fragment逐个进行处理，比如，上色、处理光照和阴影等。

在本说明书实施例中，一般地，所述多个滤镜可以基于统一的vertex shader进行处理。比如，vertex shader均绘制一个大小与WebGL重合的四边形，将待处理的图像放置于此以便于后续处理。

当然，在实际应用中，各滤镜也可以分别自定义vertex shader，而未必要统一。

在本说明书实施例中，滤镜还可以提供尺寸(size)属性，以便于处理后能够输出大小正确的纹理对象。

例如，所述滤镜管道通过所述帧缓存对象，存储当前滤镜的前一个滤镜处理得到的中间结果前，还可以执行：

获取所述前一个滤镜提供的尺寸size属性；根据所述size属性，设置WebGL的可视区域(viewport)属性；比如可以将WebGL的viewport设置为滤镜的size大小；进一步地，若有多个滤镜参与处理过程，则存储中间结果的FBO也可以采用该size；从而有利于保证在整个处理过程中图像尺寸这个维度保持一致。

在本说明书实施例中，滤镜管道能够被释放。滤镜管道包含的滤镜和FBO是基于各自申请的GPU资源工作的，当滤镜管道被释放时，滤镜管道包含的滤镜和FBO会释放已申请的GPU资源。

在本说明书实施例中，上述的系统可以用作GPU通用编程模型，在这种情况下，处理结果优选地可以为浮点型格式的纹理对象，以便于提供给JavaScript读取。

以上对本说明书实施例提供的滤镜管道系统进行了说明，基于同样的思路，本说明书实施例还提供了一种图像数据处理方法，图6为该方法的流程示意图。

图6中的流程可以包括以下步骤：

S602：获取图像数据。

S604：通过滤镜管道包含的一个或者多个滤镜，利用WebGL Shader，对所述图像数据进行处理。

S606：输出处理结果。

基于同样的思路，本说明书实施例还提供了对应于图6的图像处理装置，图7为该装置的结构示意图，该装置可以位于图6中流程的执行主体上。

该装置可以包括以下模块：

获取模块701，获取图像数据；

处理模块702，通过滤镜管道包含的一个或者多个滤镜，利用WebGL Shader，对所述图像数据进行处理；

输出模块703，输出处理结果。

该方法和该装置涉及的具体实施方案可以参照上面的系统，这里不再赘述。

基于同样的思路，本说明书实施例还提供了对应于图6的一种电子设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

获取图像数据；

通过滤镜管道包含的一个或者多个滤镜，利用WebGL Shader，对所述图像数据进行处理；

输出处理结果。

基于同样的思路，本说明书实施例还提供了对应于图6的一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：

获取图像数据；

通过滤镜管道包含的一个或者多个滤镜，利用WebGL Shader，对所述图像数据进行处理；

输出处理结果。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于方法、装置、电子设备、非易失性计算机存储介质实施例而言，由于其基本相似于系统实施例，所以描述的比较简单，相关之处参见系统实施例的部分说明即可。

本说明书实施例提供的方法、装置、电子设备、非易失性计算机存储介质与系统是对应的，因此，方法、装置、电子设备、非易失性计算机存储介质也具有与对应系统类似的有益技术效果，由于上面已经对系统的有益技术效果进行了详细说明，因此，这里不再赘述对应方法、装置、电子设备、非易失性计算机存储介质的有益技术效果。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本说明书时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

本领域内的技术人员应明白，本说明书实施例可提供为方法、系统、或计算机程序产品。因此，本说明书实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本说明书实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (13)

1.一种滤镜管道系统，包括：滤镜管道、包含于所述滤镜管道中的一个或者多个滤镜；

所述滤镜管道获取图像数据；

所述一个或者多个滤镜利用WebGL着色器，对所述图像数据进行处理；

所述滤镜管道输出处理结果。

2.如权利要求1所述的系统，所述图像数据为被输入所述滤镜管道的WebGL纹理对象，或者根据被输入所述滤镜管道的数据转换得到的WebGL纹理对象。

3.如权利要求1所述的系统，当所述滤镜管道中包含多个滤镜时，所述多个滤镜在所述滤镜管道中具有先后顺序，所述一个或者多个滤镜利用WebGL着色器，对所述图像数据进行处理，具体包括：

所述多个滤镜利用WebGL着色器，按照所述先后顺序对所述图像数据进行处理：第一个滤镜以所述图像数据作为输入数据进行处理，其他的每个滤镜以其前一个滤镜处理得到的中间结果作为输入数据进行处理，最后一个滤镜处理得到所述处理结果。

4.如权利要求3所述的系统，所述滤镜管道中还包含帧缓存对象；所述其他的每个滤镜以其前一个滤镜处理得到的中间结果作为输入数据进行处理，具体包括：

对于其他的每个滤镜，所述滤镜管道通过所述帧缓存对象，存储当前滤镜的前一个滤镜处理得到的中间结果，通过存储了该中间结果的帧缓存对象，将该中间结果输入当前滤镜，当前滤镜对输入的该中间结果进行处理。

5.如权利要求4所述的系统，所述滤镜管道通过所述帧缓存对象，存储当前滤镜的前一个滤镜处理得到的中间结果前，还执行：

获取所述前一个滤镜提供的尺寸size属性；

根据所述size属性，设置WebGL的可视区域viewport属性。

6.如权利要求1所述的系统，所述WebGL着色器包括顶点着色器和片段着色器；

所述滤镜按照如下方式处理其对应的输入数据：

所述滤镜利用其对应的顶点着色器和片段着色器，以及指定的着色器参数，处理对应的输入数据，以实现对应的滤镜效果。

7.如权利要求6所述的系统，所述多个滤镜是基于统一的顶点着色器进行处理的。

8.如权利要求4所述的系统，所述滤镜管道能够被释放；当所述滤镜管道被释放时，所述滤镜管道包含的滤镜和帧缓存对象释放已申请的图形处理器资源。

9.如权利要求1所述的系统，所述处理结果包括：画布Canvas元素的图像，和/或纹理对象。

10.如权利要求1所述的系统，所述处理结果为浮点型格式的纹理对象，所述处理结果被提供给JavaScript读取。

11.一种图像数据处理方法，包括：

获取图像数据；

通过滤镜管道包含的一个或者多个滤镜，利用WebGL着色器，对所述图像数据进行处理；

输出处理结果。

12.一种图像处理装置，包括：

获取模块，获取图像数据；

处理模块，通过滤镜管道包含的一个或者多个滤镜，利用WebGL着色器，对所述图像数据进行处理；

输出模块，输出处理结果。

13.一种电子设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

获取图像数据；

通过滤镜管道包含的一个或者多个滤镜，利用WebGL着色器，对所述图像数据进行处理；

输出处理结果。