CN109803163A - 图像展示方法及其装置、存储介质 - Google Patents

Abstract

本申请提供一种图像展示方法及装置、存储介质，该图像展示方法包括：获取待处理图像；所述待处理图像包括第一图像和第二图像，所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据用于表征所述第一图像中对应像素的透明属性；从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据；根据所述第一图像和所述第二图像中每一像素的颜色数据，确定第三图像；其中，所述第三图像中的像素与所述第一图像中的像素一一对应，且所述第三图像中每一像素的颜色数据包括所述第一图像中对应像素的颜色数据和所述第二图像中对应像素的颜色数据；展示所述第三图像。

Description

图像展示方法及其装置、存储介质

技术领域

本申请涉及视频播放技术领域，尤其是涉及一种图像展示方法及装置、存储介质。

背景技术

随着视频行业的激烈竞争，各视频平台需要推出自己的个性化服务。例如，一些视频平台想要在正在播放的视频画面的上层显示logo图片、想要在正在播放的视频画面的上层显示动态广告或者想要在一张静态图像的上层形成动态水印等。为实现上述个性化服务，需要提供一种方案能够实现至少两层图像的叠加显示效果。

发明内容

本申请实例提供了一种图像展示方法及装置、存储介质，能够实现至少两层图像的叠加显示效果。

本申请一个实例提供一种图像展示方法，包括：

获取待处理图像；所述待处理图像包括第一图像和第二图像，所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据用于表征所述第一图像中对应像素的透明属性；

从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据；

根据所述第一图像和所述第二图像中每一像素的颜色数据，确定第三图像；其中，所述第三图像中的像素与所述第一图像中的像素一一对应，且所述第三图像中每一像素的颜色数据包括所述第一图像中对应像素的颜色数据和所述第二图像中对应像素的颜色数据；

展示所述第三图像。

本申请实例提供一种图像展示方法，该方法由客户端设备执行，该方法包括：

获取待处理图像；所述待处理图像包括第一图像和第二图像，所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据用于表征所述第一图像中对应像素的透明属性；

从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据；

根据所述第一图像和所述第二图像中每一像素的颜色数据，确定第三图像；其中，所述第三图像中的像素与所述第一图像中的像素一一对应，且所述第三图像中每一像素的颜色数据包括所述第一图像中对应像素的颜色数据和所述第二图像中对应像素的颜色数据；

根据所述第二图像数据，展示第三图像。

本申请实例提供一种图像展示装置，该装置包括：

第一获取模块，获取待处理图像；所述待处理图像包括第一图像和第二图像，所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据用于表征所述第一图像中对应像素的透明属性；

第二获取模块，从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据；

第一确定模块，根据所述第一图像和所述第二图像中每一像素的颜色数据，确定第三图像；其中，所述第三图像中的像素与所述第一图像中的像素一一对应，且所述第三图像中每一像素的颜色数据包括所述第一图像中对应像素的颜色数据和所述第二图像中对应像素的颜色数据；

展示模块，展示所述第三图像。

本申请一个实例提供一种图像展示方法，包括：

确定第一图像中每一像素的透明属性；

根据所述第一图像中各个像素的透明属性，生成第二图像；所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据表征所述第一图像中对应像素的透明属性；

根据所述第一图像和所述第二图像，生成待处理图像。

本申请一个实例提供一种图像展示方法，该方法由服务器执行，包括：

确定第一图像中每一像素的透明属性；

根据所述第一图像中各个像素的透明属性，生成第二图像；所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据表征所述第一图像中对应像素的透明属性；

根据所述第一图像和所述第二图像，生成待处理图像。

本申请一个实例提供一种图像展示装置，包括：

第二确定模块，确定第一图像中每一像素的透明属性；

第一生成模块，根据所述第一图像中各个像素的透明属性，生成第二图像；所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据表征所述第一图像中对应像素的透明属性；

第二生成模块，根据所述第一图像和所述第二图像，生成待处理图像。

本申请一个实例提供的存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述方法的步骤。

基于上述技术方案，从待处理图像中获取第一图像中每一像素的颜色数据和第二图像中每一像素的颜色数据，然后根据这两张图像的颜色数据形成第三图像，由于第二图像中像素的颜色数据表征第一图像中对应像素的透明属性，因此形成的第三图像中的每一个像素是携带有透明属性的，这样使得展示的第三图像中有的区域为透明的，有的区域为不透明的，这样可以在第三图像的下层绘制其他图像，即可以实现两层图像的叠加显示效果。当然，也可以才用上述方法绘制多层不同的第三图像，不同第三图像的透明区域的不同，然后在所有第三图像的下层绘制其他的图像，这样可以实现多于两层的图像的叠加显示效果。

附图说明

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

图1是本申请实例涉及的系统架构的结构框图；

图2是本申请一个实例中图像展示方法的流程示意图；

图3a是本申请一个实例中第一图像的示意图；

图3b是图3a对应的第二图像的示意图；

图3c是图3a和图3c形成的待处理图像的示意图；

图4是本申请一个实例中图像展示方法的流程示意图；

图5是本申请一个实例中预设坐标系的预设范围的示意图；

图6a是本申请一个实例中两层图像叠加的显示效果图；

图6b是本申请一个实例中两层图像叠加的显示效果图；

图7是本申请一个实例中图像展示装置的结构框图；

图8是本申请一个实例中图像展示装置的结构框图；

图9是本申请一个实例中计算机设备的结构框图。

具体实施方式

本申请提出了一种图像展示方法，该方法适用的系统架构如图1所示。该系统架构包括：客户端设备101和服务器102，客户端设备101和服务器102之间通过通信网络103连接，其中：

上述客户端设备101可以是用户的智能手机或电脑，其上安装有各种应用软件的客户端软件，用户可以通过上述客户端设备登录并使用各种应用软件的客户端，该应用软件的客户端可以包括视频客户端。

上述服务器102可以是一台服务器，也可以是服务器集群，与客户端设备101上安装的客户端相对应，可以为客户端设备提供相应的服务，例如：服务器102可以是为视频客户端提供视频服务的视频服务器。

上述通信网络103可以局域网(Local Area Network，LAN)、城域网(MetropolitanArea Network，MAN)、广域网(Wide Area Network，WAN)、移动网络、有线网络或者无线网络、专用网络等。

本申请提供的图像展示方法可以由上述服务器102执行，如图2所示，该方法包括：

S201、确定第一图像中每一像素的透明属性；

上述第一图像，可以是静态图像，也可以是动态图像即视频流中的图像，例如，某一视频客户端中视频播放界面右上方的动态logo；再例如，在某一客户端上显示的动态广告。

上述透明属性，包括透明状态、非透明状态，当然，还可以进一步细分，例如，可以根据透明状态的程度进行划分，分为完全透明状态、半透明状态等。

这里确定每一像素的透明属性的方法，可以根据第一图像的内容，分析第一图像中哪些区域需设置为透明状态、哪些区域需设置为非透明状态，甚至哪些区域设置为半透明状态。对于需要设置为透明状态的区域，其中的像素的透明属性则为透明；对于需要设置为非透明状态的区域，其中的像素的透明属性则为非透明。

S202、根据所述第一图像中各个像素的透明属性，生成第二图像；所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色值表征所述第一图像中对应像素的透明属性；

这里，由于第二图像中的像素和第一图像中的像素一一对应，例如，将第二图像设置为与第一图像相同的尺寸和分辨率，第二图像中第i行第j列的像素与第一图像中第i行第j列的像素相对应。

这里，第二图像中每一像素的颜色值保证所述第一图像中对应像素的透明属性，以第一图像中任一像素的透明属性仅包括透明和非透明，则第二图像中任一像素的颜色值仅有两个值，一个值代表第一图像中对应像素的透明属性为透明，另一个值代表第一图像中对应像素的透明属性为非透明。

例如，需要将第一图像中第i1行第j1列的像素设置为透明，则可以将第二图像中第i1行第j1列的像素的颜色值设置为0，这样第二图像中第i1行第j1列的像素为黑色。再例如，需要将第一图像中第i2行第j2列的像素设置为非透明，则可以将第二图像中第i2行第j2列的像素的颜色值设置为1，这样第二图像中第i2行第j2列的像素为白色。

图3a为第一图像，图3b为对应的第二图像，针对图3a中需要设置为透明的区域，在图3b中对应的区域设置为黑色即其中像素的颜色值为0。针对图3a中需要设置为非透明的区域，在图3b中对应的区域设置为白色，即其中像素的颜色值为1。

S203、根据所述第一图像和所述第二图像，生成待处理图像。

这里，根据第一图像和第二图像形成一张待处理图像，具体可以通过拼接的方式实现，例如，将第一图像和第二图像进行左右拼接，或者上下拼接，使其成为一张图像，以便后续获取图像数据时可以将第一图像和对应的第二图像的图像数据一并获取过来。例如，图3c为图3a和图3b拼接形成的待处理图像。

本申请实例提供的图像展示方法，实际上是服务器102进行编码的过程，对部分区域需要进行透明处理的图像执行上述步骤S201～S203，以便后续客户端设备101获取并进行处理，使得显示在客户端设备上的图像有的部分是透明的，有的部分是非透明的，进而在该图像的下层设置其他图像，从而实现多层图像的叠加显示效果。

本申请实例还提供一种由客户端设备101执行的图像展示方法，具体可以由客户端设备101中的客户端(例如，视频播放器)执行，也可以由H5页面等执行。如图4所示，该方法包括：

S401、获取待处理图像；所述待处理图像包括第一图像和第二图像，所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据用于表征所述第一图像中对应像素的透明属性；

上述第一图像，例如，图3a；上述第二图像，例如，图3b；上述待处理图像，例如，图3c。

可理解的是，这里获取待处理图像的过程实际上是获取待处理图像的图像数据的过程。

在该步骤中，获取待处理图像是指从服务器102上获取待处理图像，具体的获取过程可以包括：

S4011、接收服务器发送来的所述待处理图像所对应的数据流；

由于待处理图像的图像数据存放在服务器102上，所以客户端设备101可以向服务器102发送一获取指令，当服务器102接收到这一指令后，会向客户端设备101发送待处理图像的数据流。当然，客户端设备101还可以通过其他的方式向服务器102获取待处理图像的数据流。

S4012、对所述数据流进行解码，得到解码数据；

这里对数据流的解码，可以是软解，也可以是硬解。其中，所谓的软解是指通过具有解码功能的代码进行解码，也可以是客户端设备101安装的解码器进行解码，例如，手机芯片上自带的解码器。对于具体的解码方式，本申请实例并不做限定。

S4013、将所述解码数据绘制到预设的表面纹理层；

这里的表面纹理层，也可以称之为SurfaceTexture，该层相当于位于解码层和显示层之间的一个中间层，将解码数据绘制到这一中间层上，其目的是不直接显示，从而方便后续的处理。

可理解的是，将解码数据绘制到表面纹理层，可以绘制出待处理图像。

S4014、从所述表面纹理层中获取纹理数据，并将所述纹理数据作为所述待处理图像的图像数据。

从表面纹理层中获取到的解码数据实际上是待处理图像的图像数据，从表面纹理层中获取该图像数据后，即可以执行后续的操作。

S402、从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据；

如图3a所示，由于第一图像为原图像，颜色比较丰富，每一个像素的颜色可以由多个颜色通道的分量组合形成，因此上述第一图像中每一像素的颜色数据可以是各个颜色通道的分量。举例来说，第一图像中每一像素的颜色为三通道RGB共同形成，通过计算256x256x 256，从0到255的红色、绿色和蓝色的值一共可以组合出1600万种不同的颜色，1600万种不同的颜色可以用一串十六进制的符号表示。第一图像中某一像素的颜色数据可以是(R，G，B)，也可以是由一串十六进制的符号，只要能够代表该像素的颜色即可。

如图3b所示，由于第二图像的颜色比较单一，一般为灰度图像或二值图像，因此第二图像中每一像素的颜色数据可以采用0或1表示。实际上，也可以采用(R，G，B)或者一串十六进制符号的表示方式，只不过针对灰度图像或二值图像，R、G、B三者的值是相同的。

上述第一图像中每一像素的颜色数据和第二图像中每一像素的颜色数据的具体获取过程可以包括：

S4021、将绘制到所述表面纹理层中所述待处理图像的图像数据映射到预设坐标系中的预设范围内；

由于不同的待处理图像，尺寸是有差异的，为了方便数据处理，可以进行统一化，即将待处理图像映射到预设坐标系的预设范围内。

举例来说，如图5所示，可以将待处理图像映射到横坐标在[0,1]范围内和纵坐标在[0,1]范围内的方形区域内。如果第一图像和第二图像为左右拼接，且第一图像位于第二图像的左侧的话，横坐标在[0,0.5]范围内的区域与第一图像对应，横坐标在[0.5,1]范围内的区域与第二图像对应。也就是说，左半部分为第一图像映射后的区域，右半部分为第二图像映射后的区域。

S4022、确定所述第一图像中每一像素在所述预设范围内的位置数据，并将该位置数据作为第一位置数据；

由于将待处理图像从表面纹理从到预设坐标的预设范围进行映射，因此待处理图像中像素的位置发生了变化，因此需要确定每一像素的位置。由于第二图像中每一像素的位置和第一图像中对应像素之间的位置存在一定的关系，因此可以先确定第一图像中每一像素的位置，然后根据该位置确定第二图像中对应像素的位置即可。其中，第一图像中每一像素的位置可以根据待处理图像从表面纹理层到预设坐标系中预设范围内的映射关系进行确定，具体确定方式可以采用如下公式：

textureCoordinateRGB＝vec2(textureTransform*vTexCoordinate).x，(textureTransform*vTexCoordinate).y)；

其中，vTexCoordinate为第一图像中像素在表面纹理层中的坐标，textureTransform为待处理图像从表面纹理层映射到预设坐标系中的预设范围内的变换矩阵，textureCoordinateRGB为第一像素中像素从表面纹理层映射到预设坐标系的预设范围内的坐标。

S4023、根据所述第一位置数据，确定所述第二图像中对应像素在所述预设范围内的位置数据，并将该位置数据作为第二位置数据；

当第一位置数据确定后，便可以根据第一位置数据确定第二位置数据，具体的确定方式与第一图像和第二图像之间的拼接方式有关，也与预设坐标系中预设范围有关。在预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b的前提下，介绍几种确定方式：

(1)如果所述第一图像和所述第二图像为左右拼接，且所述第一图像位于所述第二图像的左侧；则根据第一位置数据确定第二位置数据的方式为：

所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标相同，所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标之差为a/2。

也就是说，纵坐标不变，横坐标向右移动a/2即可。例如，第一图像中第i行第j列的像素在预设范围内的坐标为(x1，y1)，则第二图像中第i行第j列的像素在预设范围内的坐标为(x1+a/2，y1。如图5所示，第一图像对应的位置在(0.25,0.5)处的像素与第二图像对应的位置在(0.75,0.5)处的像素。

(2)如果所述第一图像和所述第二图像为左右拼接，且所述第一图像位于所述第二图像的右侧；则根据第一位置数据确定第二位置数据的方式为：

所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标相同，所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标之差为-a/2。

也就是说，纵坐标不变，而横坐标向左移动-a/2。例如，第一图像中第i行第j列的像素在预设范围内的坐标为(x1，y1)，则第二图像中第i行第j列的像素在预设范围内的坐标为(x1-a/2，y1)。

(3)所述第一图像和所述第二图像为上下拼接，且所述第一图像位于所述第二图像的下方；则根据第一位置数据确定第二位置数据的方式为：

所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标相同，所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标之差为b/2。

也就是说，横坐标不变，而纵坐标向上移动b/2。例如，第一图像中第i行第j列的像素在预设范围内的坐标为(x1，y1)，则第二图像中第i行第j列的像素在预设范围内的坐标为(x1，y1+b/2)。

(4)所述第一图像和所述第二图像为上下拼接，且所述第一图像位于所述第二图像的上方；则根据第一位置数据确定第二位置数据的方式为：

所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标相同，所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标之差为-b/2。

也就是说，横坐标不变，而纵坐标向上移动b/2。例如，第一图像中第i行第j列的像素在预设范围内的坐标为(x1，y1)，则第二图像中第i行第j列的像素在预设范围内的坐标为(x1，y1-b/2)。

S4024、根据所述第一位置数据，从所述预设范围内获取所述第一图像中每一像素的颜色数据；

当将第一图像中每一个像素的位置和第二像素中对应像素的位置确定后，便可以获取其中每个像素的颜色数据了。具体可以采用采样器从所述预设范围内获取所述第一图像中每一像素的颜色数据。

所谓的采样器具体为以下采样公式：

Rgbcolor＝texture2D(texture，textureCoordinateRGB)

其中，texture为待处理图像映射到预设坐标的预设范围内的纹理，textureCoordinateRGB为第一图像中某一像素在所述预设范围内的坐标，texture2D为采样公式，Rgbcolor为采样得到的第一图像中每一像素的颜色数据。该颜色值可以采用各颜色通道的分量表示，例如(R，G，B)。

S4025、根据所述第二位置数据，从所述预设范围内获取所述第二图像中每一像素的颜色数据。

可理解的是，也可以采用采样器从所述预设范围内获取所述第二图像中每一像素的颜色数据。

所谓的采样器具体为以下采样公式：

alphacolor＝texture2D(texture，textureCoordinateAlpha)

其中，textureCoordinateAlpha为第二图像中某一像素的坐标，alphacolor为采样到的第二图像中像素的颜色数据，第二图像中每一像素的颜色数据用于表示第一图像中对应像素的透明属性。

S403、根据所述第一图像和所述第二图像中每一像素的颜色数据，确定第三图像；其中，所述第三图像中的像素与所述第一图像中的像素一一对应，且所述第三图像中每一像素的颜色数据包括所述第一图像中对应像素的颜色数据和所述第二图像中对应像素的颜色数据；

由于第三图像中每一像素的颜色数据既包括第一图像中对应像素的颜色数据，也包括第二图像中对应像素的颜色数据，而第二图像中每一像素的颜色数据表征的是第一图像中对应像素的透明属性，因此第三图像的图像数据实际上是第一图像对应的携带有透明属性的图像数据。

上述颜色数据的具体形式有多种，例如采用向量的形式表示。若颜色数据采用向量的形式表示，则颜色数据也可以称为颜色向量，这样第一图像中每一个像素对应着一个颜色向量，若第一图像中有n个像素，则第二图像数据则包括n个颜色向量。因此第二图像数据的确定过程可以包括：将所述第一图像中每一像素的各个颜色通道的分量以及所述第二图像中对应像素对应的第二图像中对应像素的颜色值组合形成所述第一图像中该像素对应的颜色向量。例如，gl_FragColor＝vec4(Rgbcolor.r，Rgbcolor.g，Rgbcolor.b，alphacolor)。

S404、展示所述第三图像。

上述第三图像，实际上是将第三图像的图像数据绘制到显示界面上后形成的图像。该第三图像中某些部分区域是透明的，而有些部分区域是非透明的，这样当在第三图像的下层再绘制出一层图像的话，在第三图像的透明部分，则可以看到下层的图像，这样可以实现多层图像的层叠显示效果，

为展示第三图像，可以采用opengl进行绘制，在采用opengl进行绘制前使用混合功能，只需要在RGBA模式下调用glEnable(GL_BLEND)即可使用混合功能，然后设置透明因子，透明因子与各个像素的alphacolor有关，用来表示图像是否使用透明度属性，然后采用opengl进行绘制，即可得到第三图像。

本申请实例提供的图像展示方法，从待处理图像中获取第一图像中每一像素的颜色数据和第二图像中每一像素的颜色数据，然后根据这两张图像的颜色数据形成第三图像，由于第二图像中像素的颜色数据表征第一图像中对应像素的透明属性，因此形成的第三图像中的每一个像素是携带有透明属性的，这样使得展示的第三图像中有的区域为透明的，有的区域为不透明的，这样可以在第三图像的下层绘制其他图像，即可以实现两层图像的叠加显示效果。当然，也可以才用上述方法绘制多层不同的第三图像，不同第三图像的透明区域的不同，然后在所有第三图像的下层绘制其他的图像，这样可以实现多于两层的图像的叠加显示效果。

在实际应用时，上层包含透明区域的图像可以为静态图片，也可以为视频，下层不包含透明区域的图像可以为静态图片，也可以为视频。

在一些实例中，在采用上述步骤S401～S404将一层或者多层包括透明区域的图像(即一层或多层第三图像)绘制到显示界面上之后，能够在显示界面中展示一张或者多张具有透明区域的图像。在绘制一层或者多层包括透明区域的图像之前、同时或者之后，还可以获取预设的第四图像，并将所述第四图像绘制到所述显示界面上且所述第四图像位于所述第三图像的下层。

举例来说，将一张静态图片绘制在一个动态广告的下层，如图6a所示，图6a中当前的上层图像601为动态广告中的一帧图像(该图像为将图3a对应的第三图像)。在该图中可以看出，上层的图像601中有的区域是透明的，可以显示出下层图像602，而有的区域是非透明的，会将下层图像602的对应区域遮挡住，从而体现出两层叠加的效果。

举例来说，将一段视频绘制在一个静态logo的下层，如图6b所示，图6b中上层的图像为一个logo，而下层是一段视频中的一帧图像。从图中可以看出，画面中logo的区域为非透明的，logo之外的区域为透明的，因此可以看到下层的视频。在图6b中，logo为椭圆区域603内的文字-腾讯视频和图形形成的标识。

当然，还可以将一个动态水印显示在一个品牌展示的宣传页上等，本申请提供的图像展示方法还可以其他的应用场景，这里不再一一列举。

可理解的是，也可以在多层包括透明区域的图像绘制到显示界面上之后，不获取第四图像，仅在显示界面中展示多层包括透明区域的图像。

本申请实例还提供一种图像展示装置，该装置的硬件实体为客户端设备，具体可以由客户端设备上安装的视频客户端实现，如图7所示，该装置700具体包括：

第一获取模块701，获取待处理图像；所述待处理图像包括第一图像和第二图像，所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据用于表征所述第一图像中对应像素的透明属性；

第二获取模块702，从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据；

第一确定模块703，根据所述第一图像和所述第二图像中每一像素的颜色数据，确定第三图像；其中，所述第三图像中的像素与所述第一图像中的像素一一对应，且所述第三图像中每一像素的颜色数据包括所述第一图像中对应像素的颜色数据和所述第二图像中对应像素的颜色数据；

展示模块704，展示所述第三图像。

在一些实例中，第一获取模块具体：

接收服务器发送来的所述待处理图像所对应的数据流；

对所述数据流进行解码，得到解码数据；

将所述解码数据绘制到预设的表面纹理层；

从所述表面纹理层中获取纹理数据，并将所述纹理数据作为所述待处理图像的图像数据。

在一些实例中，第二获取模块具体包括：

映射单元，将绘制到所述表面纹理层中所述待处理图像的图像数据映射到预设坐标系中的预设范围内；

第一确定单元，确定所述第一图像中每一像素在所述预设范围内的位置数据，并将该位置数据作为第一位置数据；

第二确定单元，根据所述第一位置数据，确定所述第二图像中对应像素在所述预设范围内的位置数据，并将该位置数据作为第二位置数据；

第一获取单元，根据所述第一位置数据，从所述预设范围内获取所述第一图像中每一像素的颜色数据；

第二获取单元，根据所述第二位置数据，从所述预设范围内获取所述第二图像中每一像素的颜色数据。

在一些实例中，所述预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b；所述第一图像和所述第二图像为左右拼接，且所述第一图像位于所述第二图像的左侧；所述第二确定单元具体：所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标相同，所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标之差为a/2。

在一些实例中，所述预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b；所述第一图像和所述第二图像为左右拼接，且所述第一图像位于所述第二图像的右侧；所述第二确定单元具体：所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标相同，所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标之差为-a/2。

在一些实例中，所述预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b；所述第一图像和所述第二图像为上下拼接，且所述第一图像位于所述第二图像的下方；所述第二确定单元具体：所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标相同，所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标之差为b/2。

在一些实例中，所述预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b；所述第一图像和所述第二图像为上下拼接，且所述第一图像位于所述第二图像的上方；第二确定单元具体：所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标相同，所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标之差为-b/2。

在一些实例中，第一获取单元具体：采用采样器从所述预设范围内获取所述第一图像中每一像素的颜色数据；第二获取单元具体：采用采样器从所述预设范围内获取所述第二图像中每一像素的颜色数据。

在一些实例中，所述第一图像中每一像素的颜色数据为该像素的各个颜色通道的分量；所述第二图像中每一像素的颜色数据为该像素的颜色值，所述第三图像中每一像素的颜色数据为该像素的颜色向量；第一确定模块具体：将所述第一图像中每一像素的各个颜色通道的分量以及所述第二图像中对应像素的颜色值组合形成所述第三图像中对应像素的颜色向量。

可理解的是，本申请实例提供的图像展示装置与本申请实例中由客户端设备执行的图像展示方法相对应，有关内容的解释、举例、有益效果等部分可以参考以上内容的相应部分，此处不再赘述。

本申请实例还提供一种图像展示装置，该装置的硬件实体为服务器，如图8所示，该装置800包括：

第二确定模块801，确定第一图像中每一像素的透明属性；

第一生成模块802，根据所述第一图像中各个像素的透明属性，生成第二图像；所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色值表征所述第一图像中对应像素的透明属性；

第二生成模块803，根据所述第一图像和所述第二图像，生成待处理图像。

在一些实施例中，第二生成模块具体用于：将所述第一图像和所述第二图像进行拼接，得到所述待处理图像。

可理解的是，本申请实例提供的图像展示装置与本申请实例中由服务器执行的图像展示方法相对应，有关内容的解释、举例、有益效果等部分可以参考以上内容的相应部分，此处不再赘述。

本申请实例还提供一种存储介质，该其上存储有计算机程序，该程序被处理器执行时实现上述任一方法的步骤。

本申请实例还提供一种计算机设备，该设备可以为服务器，如图9所示，该计算机设备包括一个或者多个处理器(CPU)902、通信模块904、存储器906、用户接口910，以及用于互联这些组件的通信总线908，其中：

处理器902可通过通信模块904接收和发送数据以实现网络通信和/或本地通信。

用户接口910包括一个或多个输出设备912，其包括一个或多个扬声器和/或一个或多个可视化显示器。用户接口910也包括一个或多个输入设备914，其包括诸如，键盘，鼠标，声音命令输入单元或扩音器，触屏显示器，触敏输入板，姿势捕获摄像机或其他输入按钮或控件等。

存储器906可以是高速随机存取存储器，诸如DRAM、SRAM、DDR RAM、或其他随机存取固态存储设备；或者非易失性存储器，诸如一个或多个磁盘存储设备、光盘存储设备、闪存设备，或其他非易失性固态存储设备。

存储器906存储处理器902可执行的指令集，包括：

操作系统916，包括用于处理各种基本系统服务和用于执行硬件相关任务的程序；

应用918，包括用于图像处理等的各种应用程序，这种应用程序能够实现上述各实例中的处理流程，比如可以包括图像展示装置中的部分或者全部指令模块或单元。处理器902通过执行存储器906中各单元中至少一个单元中的机器可执行指令，进而能够实现上述各单元或模块中的至少一个模块的功能。

需要说明的是，上述各流程和各结构图中不是所有的步骤和模块都是必须的，可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的，可以根据需要进行调整。各模块的划分仅仅是为了便于描述采用的功能上的划分，实际实现时，一个模块可以分由多个模块实现，多个模块的功能也可以由同一个模块实现，这些模块可以位于同一个设备中，也可以位于不同的设备中。

各实例中的硬件模块可以以硬件方式或硬件平台加软件的方式实现。上述软件包括机器可读指令，存储在非易失性存储介质中。因此，各实例也可以体现为软件产品。

各例中，硬件可以由专门的硬件或执行机器可读指令的硬件实现。例如，硬件可以为专门设计的永久性电路或逻辑器件(如专用处理器，如FPGA或ASIC)用于完成特定的操作。硬件也可以包括由软件临时配置的可编程逻辑器件或电路(如包括通用处理器或其它可编程处理器)用于执行特定操作。

另外，本申请的每个实例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本申请。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和/或内存)中执行。因此，这样的存储介质也构成了本申请，本申请还提供了一种非易失性存储介质，其中存储有数据处理程序，这种数据处理程序可用于执行本申请上述方法实例中的任何一种实例。

图9模块对应的机器可读指令可以使计算机上操作的操作系统等来完成这里描述的部分或者全部操作。非易失性计算机可读存储介质可以是插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器。安装在扩展板或者扩展单元上的CPU等可以根据指令执行部分和全部实际操作。

以上所述仅为本申请的较佳实例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (15)

1.一种图像展示方法，其特征在于，包括：

获取待处理图像；所述待处理图像包括第一图像和第二图像，所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据用于表征所述第一图像中对应像素的透明属性；

从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据；

根据所述第一图像和所述第二图像中每一像素的颜色数据，确定第三图像；其中，所述第三图像中的像素与所述第一图像中的像素一一对应，且所述第三图像中每一像素的颜色数据包括所述第一图像中对应像素的颜色数据和所述第二图像中对应像素的颜色数据；

展示所述第三图像。

2.根据权利要求1所述的方法，其特征在于，所述获取待处理图像，包括：

接收服务器发送来的所述待处理图像的数据流；

对所述数据流进行解码，得到解码数据；

将所述解码数据绘制到预设的表面纹理层；

从所述表面纹理层中获取纹理数据，并将所述纹理数据作为所述待处理图像的图像数据。

3.根据权利要求2所述方法，其特征在于，所述从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据，包括：

将绘制到所述表面纹理层中所述待处理图像的图像数据映射到预设坐标系中的预设范围内；

确定所述第一图像中每一像素在所述预设范围内的位置数据，并将该位置数据作为第一位置数据；

根据所述第一位置数据，确定所述第二图像中对应像素在所述预设范围内的位置数据，并将该位置数据作为第二位置数据；

根据所述第一位置数据，从所述预设范围内获取所述第一图像中每一像素的颜色数据；

根据所述第二位置数据，从所述预设范围内获取所述第二图像中每一像素的颜色数据。

4.根据权利要求3所述方法，其特征在于，所述预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b；

所述第一图像和所述第二图像为左右拼接，且所述第一图像位于所述第二图像的左侧；所述根据所述第一位置数据，确定所述第二图像中对应像素在所述预设范围内的位置数据，并将该位置数据作为第二位置数据，包括：

所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标相同，所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标之差为a/2。

5.根据权利要求3所述方法，其特征在于，所述预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b；

所述第一图像和所述第二图像为左右拼接，且所述第一图像位于所述第二图像的右侧；所述根据所述第一位置数据，确定所述第二图像中对应像素在所述预设范围内的位置数据，并将该位置数据作为第二位置数据，包括：

所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标相同，所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标之差为-a/2。

6.根据权利要求3所述方法，其特征在于，所述预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b；

所述第一图像和所述第二图像为上下拼接，且所述第一图像位于所述第二图像的下方；所述根据所述第一位置数据，确定所述第二图像中对应像素在所述预设范围内的位置数据，并将该位置数据作为第二位置数据，包括：

所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标相同，所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标之差为b/2。

7.根据权利要求3所述方法，其特征在于，所述预设范围的最大横坐标和最小横坐标之差为a，最大纵坐标与最小纵坐标之差为b；

所述第一图像和所述第二图像为上下拼接，且所述第一图像位于所述第二图像的上方；所述根据所述第一位置数据，确定所述第二图像中对应像素在所述预设范围内的位置数据，并将该位置数据作为第二位置数据，包括：

所述第二图像中每一像素在所述预设范围内的横坐标与所述第一图像中对应像素在所述预设范围内的横坐标相同，所述第二图像中每一像素在所述预设范围内的纵坐标与所述第一图像中对应像素在所述预设范围内的纵坐标之差为-b/2。

8.根据权利要求3所述的方法，其特征在于，

所述从所述预设范围内获取所述第一图像中每一像素的颜色数据，包括：采用采样器从所述预设范围内获取所述第一图像中每一像素的颜色数据；

所述从所述预设范围内获取所述第二图像中每一像素的颜色数据，包括：采用采样器从所述预设范围内获取所述第二图像中每一像素的颜色数据。

9.根据权利要求1～8任一项所述方法，其特征在于，所述第一图像中每一像素的颜色数据为该像素的各个颜色通道的分量；所述第二图像中每一像素的颜色数据为该像素的颜色值，所述第三图像中每一像素的颜色数据为该像素的颜色向量；

其中，所述确定第三图像，包括：

将所述第一图像中每一像素的各个颜色通道的分量以及所述第二图像中对应像素的颜色值组合形成所述第三图像中对应像素的颜色向量。

10.根据权利要求1～8任一项所述的方法，其特征在于，还包括：

获取预设的第四图像，并将所述第四图像绘制到所述显示界面上且所述第四图像位于所述第三图像的下层。

11.一种图像展示方法，其特征在于，包括：

确定第一图像中每一像素的透明属性；

根据所述第一图像中各个像素的透明属性，生成第二图像；所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据表征所述第一图像中对应像素的透明属性；

根据所述第一图像和所述第二图像，生成待处理图像。

12.根据权利要求11所述的方法，其特征在于，所述根据所述第一图像和所述第二图像，生成待处理图像，包括：

将所述第一图像和所述第二图像进行拼接，得到所述待处理图像。

13.一种图像展示装置，其特征在于，包括：

第一获取模块，获取待处理图像；所述待处理图像包括第一图像和第二图像，所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据用于表征所述第一图像中对应像素的透明属性；

第二获取模块，从所述待处理图像中获取所述第一图像中每一像素的颜色数据和所述第二图像中每一像素的颜色数据；

第一确定模块，根据所述第一图像和所述第二图像中每一像素的颜色数据，确定第三图像；其中，所述第三图像中的像素与所述第一图像中的像素一一对应，且所述第三图像中每一像素的颜色数据包括所述第一图像中对应像素的颜色数据和所述第二图像中对应像素的颜色数据；

展示模块，展示所述第三图像。

14.一种图像展示装置，其特征在于，包括：

第二确定模块，确定第一图像中每一像素的透明属性；

第一生成模块，根据所述第一图像中各个像素的透明属性，生成第二图像；所述第二图像中的像素与所述第一图像中的像素一一对应，且所述第二图像中每一像素的颜色数据表征所述第一图像中对应像素的透明属性；

第二生成模块，根据所述第一图像和所述第二图像，生成待处理图像。

15.一种存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1～12任一所述方法的步骤。