CN105894558B - Gif图像渲染方法及装置 - Google Patents

Abstract

本公开揭示了一种GIF图像渲染方法及装置，属于图像处理领域。所述GIF图像渲染方法包括：通过检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像；若GIF图像位于浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作；解决了当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然对GIF图像中的每一帧单帧图像进行渲染，导致CPU资源的大量浪费的问题；达到了当GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作，提高了浏览器的渲染性能，在不影响用户体验的同时节省了CPU的计算资源的效果。

Description

GIF图像渲染方法及装置

技术领域

本公开涉及图像处理领域，特别涉及一种GIF图像渲染方法及装置。

背景技术

图像互换格式(Graphics Interchange Format，GIF)图像可由多帧单帧图像组成。在定时器控制下，GIF图像通过依次显示各个单帧图像而产生动画效果。

GIF图像被广泛应用于网页中。当网页中的GIF图像出现在浏览器的显示区时，浏览器通过定时器机制依次对GIF图像中的每一帧单帧图像进行渲染，从而给用户呈现非常好的动画效果。但是，当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然会对GIF图像中的每一帧单帧图像进行渲染，从而导致中央处理器(Central ProcessingUnit，CPU)资源的大量浪费。

发明内容

为了解决当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然对GIF图像中的每一帧单帧图像进行渲染，导致CPU资源的大量浪费的问题，本公开提供一种GIF图像渲染方法及装置。所述技术方案如下：

根据本公开实施例的第一方面，提供一种GIF图像渲染方法，该方法包括：

检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像；

若GIF图像位于浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作。

可选的，检测网页中的GIF图像是否位于浏览器的显示区中，包括：

获取第一区域信息，第一区域信息用于指示浏览器的显示区在网页中对应的第一区域；

获取第二区域信息，第二区域信息用于指示GIF图像在网页中对应的第二区域；

根据第一区域信息和第二区域信息，检测第一区域和第二区域是否存在交集，交集用于表示GIF图像位于浏览器的显示区中。

可选的，获取第一区域信息，包括：

在网页被加载后或者接收到移动信号时，调用浏览器的内核提供的预定函数接口获取第一区域信息，第一区域信息包括第一区域的左顶点位置、横向长度和纵向长度。

可选的，获取第二区域信息，包括：

从渲染图像列表中获取与GIF图像对应的第二区域信息，第二区域信息包括第二区域的左顶点位置、横向长度和纵向长度。

可选的，暂停对GIF图像中的子图像的渲染操作，包括：

向浏览器的内核提供的GIF图像渲染组件发送第一指令，第一指令用于触发GIF图像渲染组件将与GIF图像对应的定时器暂停，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，定时器在每次超时后重置，k＝i mod n。

可选的，该方法还包括：

若GIF图像位于浏览器的显示区中，则执行对GIF图像中的子图像的渲染操作。

可选的，执行对GIF图像中的子图像的渲染操作，包括：

向浏览器的内核提供的GIF图像渲染组件发送第二指令，第二指令用于触发GIF图像渲染组件将与GIF图像对应的定时器开启，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，定时器在每次超时后重置，k＝i mod n。

根据本公开实施例的第二方面，提供一种GIF图像渲染装置，该装置包括：

检测模块，被配置为检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像；

暂停模块，被配置为在GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作。

可选的，检测模块，包括：

第一获取子模块，被配置为获取第一区域信息，第一区域信息用于指示浏览器的显示区在网页中对应的第一区域；

第二获取子模块，被配置为获取第二区域信息，第二区域信息用于指示GIF图像在网页中对应的第二区域；

交集检测子模块，被配置为根据第一区域信息和第二区域信息，检测第一区域和第二区域是否存在交集，交集用于表示GIF图像位于浏览器的显示区中。

可选的，第一获取子模块，被配置为在网页被加载后或者接收到移动信号时，调用浏览器的内核提供的预定函数接口获取第一区域信息，第一区域信息包括第一区域的左顶点位置、横向长度和纵向长度。

可选的，第二获取子模块，被配置为从渲染图像列表中获取与GIF图像对应的第二区域信息，第二区域信息包括第二区域的左顶点位置、横向长度和纵向长度。

可选的，暂停模块，被配置为向浏览器的内核提供的GIF图像渲染组件发送第一指令，第一指令用于触发GIF图像渲染组件将与GIF图像对应的定时器暂停，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，定时器在每次超时后重置，k＝i mod n。

可选的，该装置，还包括：

执行模块，被配置为在GIF图像位于浏览器的显示区中时，执行对GIF图像中的子图像的渲染操作。

可选的，执行模块，被配置为向浏览器的内核提供的GIF图像渲染组件发送第二指令，第二指令用于触发GIF图像渲染组件将与GIF图像对应的定时器开启，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，定时器在每次超时后重置，k＝i mod n。

根据本公开实施例的第三方面，提供一种GIF图像渲染装置，该装置包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，处理器被配置为：

检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像；

若GIF图像位于浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作。

本公开的实施例提供的技术方案可以包括以下有益效果：

通过检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像；若GIF图像位于浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作；解决了当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然对GIF图像中的每一帧单帧图像进行渲染，导致CPU资源的大量浪费的问题；达到了当GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作，提高了浏览器的渲染性能，在不影响用户体验的同时节省了CPU的计算资源的效果。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并于说明书一起用于解释本公开的原理。

图1是根据一示例性实施例示出的一种GIF图像渲染方法的流程图；

图2A是根据另一示例性实施例示出的一种GIF图像渲染方法的流程图；

图2B是根据一示例性实施例示出的一种第一区域和第二区域是否存在交集的示意图；

图3A是根据再一示例性实施例示出的一种GIF图像渲染方法的流程图；

图3B是根据一示例性实施例示出的一种浏览器显示区在网页中的第二区域的示意图；

图3C是根据一示例性实施例示出的一种GIF图像在网页中的第一区域的示意图；

图3D根据一示例性实施例示出的一种第一区域和第二区域在网页中的示意图；

图4是根据一示例性实施例示出的一种GIF图像渲染装置的框图；

图5是根据另一示例性实施例示出的一种GIF图像渲染装置的框图；

图6是根据一示例性实施例示出的一种GIF图像渲染装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种GIF图像渲染方法的流程图，如图1所示，本实施例以该方法应用于浏览器中来举例说明。该GIF图像渲染方法可以包括以下步骤。

在步骤101中，检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像。

GIF图像通常包括静态GIF图像和动画GIF图像两种类型，本公开实施例中的GIF图像是指动画GIF图像。GIF图像包括n帧子图像。GIF图像中的n帧子图像在定时器控制下被逐帧渲染后，会产生动画效果。

可选地，网页中包括一个或一个以上的GIF图像，每个GIF图像中包括n帧子图像，n为大于或者等于2的整数。

由于浏览器的显示区大小的限制，使得被浏览器加载的网页通常不能在浏览器的显示区中全部呈现。因此，网页中的GIF图像可能位于浏览器的显示区中，也可能位于浏览器的显示区之外。

在步骤102中，若GIF图像位于浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作。

综上所述，本公开实施例中提供的GIF图像渲染方法，通过检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像；若GIF图像位于浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作；解决了当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然对GIF图像中的每一帧单帧图像进行渲染，导致CPU资源的大量浪费的问题；达到了当GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作，提高了浏览器的渲染性能，在不影响用户体验的同时节省了CPU的计算资源的效果。

图2A是根据另一示例性实施例示出的一种GIF图像渲染方法的流程图，如图2A所示，本实施例以该方法应用于浏览器中来举例说明。该GIF图像渲染方法可以包括以下步骤。

在步骤201中，获取第一区域信息，第一区域信息用于指示浏览器的显示区在网页中对应的第一区域。

由于浏览器的显示区大小的限制，使得被浏览器加载的网页通常不能在浏览器的显示区中全部呈现。用户为了查看被浏览器加载的网页中的不同区域的网页内容，一般通过上下左右移动网页，改变浏览器的显示区在网页中所对应的第一区域，从而在浏览器的显示区中查看到网页中不同区域的网页内容。

可选的，在将网页向上移动时相当于将浏览器的显示区向下移动。

当网页被浏览器加载后，获取用于指示浏览器的显示区在网页中对应的第一区域的第一区域信息。

可选的，浏览器的显示区对应的第一区域通常为矩形区域。

在步骤202中，获取第二区域信息，第二区域信息用于指示GIF图像在网页中对应的第二区域。

浏览器在获取到第一区域信息后，获取用于指示GIF图像在网页中对应的第二区域的第二区域信息。

网页中包括一个或一个以上的GIF图像，浏览器获取网页中每个GIF图像在网页中的第二区域信息。

可选的，GIF图像对应的第二区域通常为矩形区域。

在步骤203中，根据第一区域信息和第二区域信息，检测第一区域和第二区域是否存在交集。

交集用于表示GIF图像位于浏览器的显示区中。

浏览器在获取到第一区域信息和第二区域信息后，获取第一区域信息对应的第一区域，获取第二区域信息对应的第二区域，在读取到第一区域和第二区域后，通过矩形求交算法检测获取到的第一区域和第二区域是否存在交集。

在步骤203的检测过程中会出现两种检测结果，当第一区域和第二区域不存在交集时，执行步骤204；当第一区域和第二区域存在交集时，执行步骤205。

在步骤204中，若第一区域和第二区域不存在交集时，则暂停对GIF图像中的子图像的渲染操作。

当第一区域和第二区域不存在交集时，说明第二区域对应的GIF图像位于第一区域对应的浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作。

在步骤205中，若第一区域和第二区域存在交集时，则执行对GIF图像中的子图像的渲染操作。

当第一区域和第二区域存在交集时，说明第二区域对应的GIF图像位于第一区域对应的浏览器的显示区中，则执行对GIF图像中的子图像的渲染操作。

在一个具体的例子中，如图2B所示，以网页21被浏览器加载为例，当网页21被浏览器初始加载后，浏览器的显示区的左顶点位于网页21的左顶点处，获取浏览器的显示区在网页21中对应的第一区域22；获取GIF图像在网页21中对应的第二区域23；在获取到第一区域22和第二区域23后，检测第一区域22对应的矩形和第二区域23对应的矩形是否存在交集；如图2B所示，第一区域22对应的矩形和第二区域23对应的矩形之间不存在交集，说明GIF图像位于浏览器的显示区之外，则暂停对网页21中第一区域对应的GIF图像中的子图像的渲染操作。

综上所述，本公开实施例中提供的GIF图像渲染方法，通过获取第一区域信息；获取第二区域信息；根据第一区域信息和第二区域信息，检测第一区域和第二区域是否存在交集；若第一区域和第二区域不存在交集时，则暂停对GIF图像中的子图像的渲染操作；解决了当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然对GIF图像中的每一帧单帧图像进行渲染，导致CPU资源的大量浪费的问题；达到了当GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作，提高了浏览器的渲染性能，在不影响用户体验的同时节省了CPU的计算资源的效果。

图3A是根据再一示例性实施例示出的一种GIF图像渲染方法的流程图，如图3A所示，本实施例以该方法应用于浏览器中来举例说明。该GIF图像渲染方法可以包括以下步骤。

在步骤301中，在网页被加载后或者接收到移动信号时，调用浏览器的内核提供的预定函数接口获取第一区域信息，第一区域信息包括第一区域的左顶点位置、横向长度和纵向长度。

其中，第一区域信息由浏览器的内核进行维护。

移动信号包括浏览器中接收到的用于滚动网页的信号。比如：向上滚动网页、向下滚动网页、向左移动网页或者向右移动网页等。

在网页被加载后或者接收到移动信号后，浏览器的内核对浏览器的显示区在网页中对应的第一区域信息进行维护，确定出浏览器的显示区在网页中对应的第一区域信息。

浏览器通过调用浏览器的内核提供的预定函数接口获取由浏览器的内核维护的第一区域信息，其中，预定函数接口可以为与Viewport相关的函数接口。

第一区域信息包括：第一区域的左顶点位置、横向长度和纵向长度。也即，第一区域信息包括第一区域的左顶点位置和大小。

比如：如图3B所示，以网页31的左顶点为原点，以网页31的横向长度为横坐标，以网页31的纵向长度为纵坐标建立坐标轴；假定网页31的横向长度为20，纵向长度为50，浏览器的显示区域的横向长度为15，纵向长度为20；当网页31被加载后，浏览器的内核默认的浏览器的显示区在网页31中对应的第一区域32的左顶点的坐标为(0,0)，则根据左顶点坐标(0,0)、浏览器的显示区域的横向长度为15和纵向长度为20，确定第一区域信息。又比如：当浏览器接收到向下移动信号时，浏览器的内核根据向下移动信号确定出第一区域信息，如图3B所示，假定接收到向下移动10格，则浏览器的内核确定出浏览器的显示区在网页31中对应的第一区域32的左顶点的坐标为(10,0)，则根据左顶点坐标(10,0)、浏览器的显示区域的横向长度为15和纵向长度为20，确定第一区域信息。

可选的，第一区域信息可以包括：第一区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置。

在步骤302中，从渲染图像列表中获取与GIF图像对应的第二区域信息，第二区域信息包括第二区域的左顶点位置、横向长度和纵向长度。

渲染图像列表是指网页中GIF图像对应的第二区域信息的列表，也即，渲染图像列表中存储有网页中的GIF图像与对应的第二区域信息之间的对应关系。

可选的，浏览器通过调用renderView函数从render image list中获取与GIF图像对应的第二区域信息。其中，render image list为渲染图像列表。

第二区域信息包括：第二区域的左顶点位置、横向长度和纵向长度。也即，第二区域信息包括第二区域的左顶点位置和大小。

比如：如图3C所示，以网页35的左顶点为原点，以网页35的横向长度为横坐标，以网页35的纵向长度为纵坐标建立坐标轴；获取GIF图像的左顶点坐标在网页35中的位置，根据GIF图像的左顶点坐标、GIF图像的横向长度和纵向长度确定出第二区域信息。假定网页31的横向长度为20，纵向长度为50，GIF图像的左顶点坐标为(5,10)、GIF图像的横向长度为10、纵向长度也为10，则获取得到的第二区域36的左顶点坐标为(5,10)、横向长度为10、纵向长度也为10的区域。

可选的，第二区域信息可以包括：第二区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置。

在步骤303中，根据第一区域信息和第二区域信息，检测第一区域和第二区域是否存在交集。

交集用于表示GIF图像位于浏览器的显示区中。

浏览器在获取到第一区域信息和第二区域信息后，读取第一区域信息对应的第一区域，读取第二区域信息对应的第二区域，在读取到第一区域和第二区域后，检测读取到的第一区域和第二区域是否存在交集。

可选的，浏览器调用rect.intersects函数检测第一区域对应的矩形与第二区域对应的矩形之间是否存在交集。

比如：如图3D所示，由图3B中确定的第一区域信息可知，第一区域38的左顶点坐标为(10,0)、右顶点坐标为(10,15)、左下顶点坐标为(30,0)和右下顶点坐标为(30,15)；由图3C中获取到的第二区域信息可知，第二区域39的左顶点坐标为(5,10)、右顶点坐标为(15,10)、左下顶点坐标为(5,20)和右下顶点坐标为(15,20)。从图3D中可以看出，图3B中确定的第一区域38与图3C中获取的第二区域39之间存在交集。若第二区域40的左顶点坐标为(5,40)、右顶点坐标为(15,40)、左下顶点坐标为(5,50)和右下顶点坐标为(15,50)。从图3D中可以看出，图3B中确定的第一区域38与第二区域40之间不存在交集。

在步骤303的检测过程中会出现两种检测结果，当第一区域和第二区域不存在交集时，执行步骤304；当第一区域和第二区域存在交集时，执行步骤305。

在步骤304中，若第一区域和第二区域不存在交集时，则向浏览器的内核提供的GIF图像渲染组件发送第一指令，第一指令用于触发GIF图像渲染组件将与GIF图像对应的定时器暂停，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，定时器在每次超时后重置，k＝i mod n。

当第一区域和第二区域不存在交集时，说明第二区域对应的GIF图像位于第一区域对应的浏览器的显示区之外，则向浏览器的内核提供的GIF图像渲染组件发送第一指令，GIF图像渲染组件根据接收到的第一指令将与GIF图像对应的定时器暂停。也即，停止对GIF图像中的子图像的渲染操作。

GIF图像渲染组件用于根据接收到的指令控制GIF图像对应的定时器的开启和暂停。每个GIF图像都对应一个定时器和一个寄存器，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，且定时器在每次超时后都进行重置。寄存器用于在定时器超时后，保存最新的k值。可选地，当定时器每次超时时，GIF图像渲染组件先将寄存器中的k值加一，然后对n取余，将取余结果重新写入寄存器。寄存器中的k值用于指示GIF图像渲染组件需要对GIF图像中的第k帧子图像进行渲染，n为GIF图像中的子图像总数。

GIF图像渲染组件在接收到第一指令后，对该GIF图像对应的寄存器中的k值进行清空，或者，对该GIF图像对应的寄存器中的k值继续缓存。

在步骤305中，若第一区域和第二区域存在交集时，则向浏览器的内核提供的GIF图像渲染组件发送第二指令，第二指令用于触发GIF图像渲染组件将与GIF图像对应的定时器开启，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，定时器在每次超时后重置，k＝i modn。

当第一区域和第二区域存在交集时，说明第二区域对应的GIF图像位于第一区域对应的浏览器的显示区中，则向浏览器的内核提供的GIF图像渲染组件发送第二指令，GIF图像渲染组件根据接收到的第二指令将与GIF图像对应的定时器开启。也即，执行对GIF图像中的子图像的渲染操作。

可选的，当GIF图像渲染组件接收到第二指令后，如果与该GIF图像对应的寄存器中的k值为空，则GIF图像渲染组件从GIF图像中的第1帧子图像开始渲染；如果与该GIF图像对应的寄存器中的k值缓存有暂停时的k值，则GIF图像渲染组件从GIF图像中的第k帧子图像开始渲染。

比如：若GIF图像在浏览器的移动过程中，一开始位于浏览器的显示区中，则GIF图像渲染组件接收第一指令对GIF图像中的子图像进行渲染操作，当渲染到第3张子图像时，GIF图像位于浏览器的显示区之外了，则GIF图像渲染组件接收第二指令暂停对GIF图像中第4张子图像的渲染，一段时间后，GIF图像又再次位于浏览器的显示区中，则GIF图像渲染组件再次接收第一指令，对GIF图像中的子图像进行渲染，此时，GIF图像渲染组件可以对GIF图像中的第1张子图像开始进行渲染，也可以从GIF图像中的第4张子图像继续进行渲染。

综上所述，本公开实施例中提供的GIF图像渲染方法，通过在网页被加载后或者接收到移动信号时，调用浏览器的内核提供的预定函数接口获取第一区域信息；从渲染图像列表中获取与GIF图像对应的第二区域信息；根据第一区域信息和第二区域信息，检测第一区域和第二区域是否存在交集；若第一区域和第二区域不存在交集时，则暂停对GIF图像中的子图像的渲染操作；解决了当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然对GIF图像中的每一帧单帧图像进行渲染，导致CPU资源的大量浪费的问题；达到了当GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作，提高了浏览器的渲染性能，在不影响用户体验的同时节省了CPU的计算资源的效果。

另外，通过GIF图像渲染组件控制GIF图像对应的定时器的开启和暂停，可以实现在GIF图像再次位于浏览器的显示区时，从GIF图像中的第k张图像进行渲染操作的效果。

下述为本公开装置实施例，可以用于执行本公开方法实施例。对于本公开装置实施例中未披露的细节，请参照本公开方法实施例。

图4是根据一示例性实施例示出的一种GIF图像渲染装置的框图，如图4所示，该GIF图像渲染装置包括但不限于：

检测模块420，被配置为检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像。

GIF图像通常包括静态GIF图像和动画GIF图像两种类型，本公开实施例中的GIF图像是指动画GIF图像。GIF图像包括n帧子图像。GIF图像中的n帧子图像在定时器控制下被逐帧渲染后，会产生动画效果。

可选地，网页中包括一个或一个以上的GIF图像，每个GIF图像中包括n帧子图像，n为大于或者等于2的整数。

由于浏览器的显示区大小的限制，使得被浏览器加载的网页通常不能在浏览器的显示区中全部呈现。因此，网页中的GIF图像可能位于浏览器的显示区中，也可能位于浏览器的显示区之外。

暂停模块440，被配置为在GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作。

综上所述，本公开实施例中提供的GIF图像渲染装置，通过检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像；若GIF图像位于浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作；解决了当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然对GIF图像中的每一帧单帧图像进行渲染，导致CPU资源的大量浪费的问题；达到了当GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作，提高了浏览器的渲染性能，在不影响用户体验的同时节省了CPU的计算资源的效果。

图5是根据一示例性实施例示出的一种GIF图像渲染装置的框图，如图5所示，该GIF图像渲染装置包括但不限于：

检测模块420，被配置为检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像。

可选的，检测模块420可以包括：

第一获取子模块421，被配置为获取第一区域信息，第一区域信息用于指示浏览器的显示区在网页中对应的第一区域。

由于浏览器的显示区大小的限制，使得被浏览器加载的网页通常不能在浏览器的显示区中全部呈现。用户为了查看被浏览器加载的网页中的不同区域的网页内容，一般通过上下左右移动网页，改变浏览器的显示区在网页中所对应的第一区域，从而在浏览器的显示区中查看到网页中不同区域的网页内容。

可选的，在将网页向上移动时相当于将浏览器的显示区向下移动。

当网页被浏览器加载后，获取用于指示浏览器的显示区在网页中对应的第一区域的第一区域信息。

可选的，浏览器的显示区对应的第一区域通常为矩形区域。

可选的，第一获取子模块421，被配置为在网页被加载后或者接收到移动信号时，调用浏览器的内核提供的预定函数接口获取第一区域信息，第一区域信息包括第一区域的左顶点位置、横向长度和纵向长度。

其中，第一区域信息由浏览器的内核进行维护。

移动信号包括浏览器滚动网页的信号。比如：向上滚动网页、向下滚动网页、向左移动网页或者向右移动网页等。

在网页被加载后或者接收到移动信号后，浏览器的内核对浏览器的显示区在网页中对应的第一区域信息进行维护，确定出浏览器的显示区在网页中对应的第一区域信息。

浏览器通过调用浏览器的内核提供的预定函数接口获取由浏览器的内核维护的第一区域信息，其中，预定函数接口可以为Viewport函数接口。

第一区域信息包括：第一区域的左顶点位置、横向长度和纵向长度。也即，第一区域信息包括第一区域的左顶点位置和大小。

可选的，第一区域信息可以包括：第一区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置。

第二获取子模块422，被配置为获取第二区域信息，第二区域信息用于指示GIF图像在网页中对应的第二区域。

浏览器在获取到第一区域信息后，获取用于指示GIF图像在网页中对应的第二区域的第二区域信息。

网页中包括一个或一个以上的GIF图像，浏览器获取网页中每个GIF图像在网页中的第二区域信息。

可选的，GIF图像对应的第二区域通常为矩形区域。

可选的，第二获取子模块422，被配置为从渲染图像列表中获取与GIF图像对应的第二区域信息，第二区域信息包括第二区域的左顶点位置、横向长度和纵向长度。

渲染图像列表是指网页中GIF图像对应的第二区域信息的列表，也即，渲染图像列表中存储有网页中的GIF图像与对应的第二区域信息之间的对应关系。

可选的，浏览器通过调用renderView函数从render image list中获取与GIF图像对应的第二区域信息。其中，render image list为渲染图像列表。

第二区域信息包括：第二区域的左顶点位置、横向长度和纵向长度。也即，第二区域信息包括第二区域的左顶点位置和大小。

可选的，第二区域信息可以包括：第二区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置。

交集检测子模块423，被配置为根据第一区域信息和第二区域信息，检测第一区域和第二区域是否存在交集，交集用于表示GIF图像位于浏览器的显示区中。

浏览器在获取到第一区域信息和第二区域信息后，读取第一区域信息对应的第一区域，读取第二区域信息对应的第二区域，在读取到第一区域和第二区域后，检测读取到的第一区域和第二区域是否存在交集。

可选的，浏览器调用rect.intersects函数检测第一区域对应的矩形与第二区域对应的矩形之间是否存在交集。

暂停模块440，被配置为在GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作。

当第一区域和第二区域不存在交集时，说明第二区域对应的GIF图像位于第一区域对应的浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作。

可选的，暂停模块440，被配置为向浏览器的内核提供的GIF图像渲染组件发送第一指令，第一指令用于触发GIF图像渲染组件将与GIF图像对应的定时器暂停，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，定时器在每次超时后重置，k＝i mod n。

当第一区域和第二区域不存在交集时，说明第二区域对应的GIF图像位于第一区域对应的浏览器的显示区之外，则向浏览器的内核提供的GIF图像渲染组件发送第一指令，GIF图像渲染组件根据接收到的第一指令将与GIF图像对应的定时器暂停。也即，停止对GIF图像中的子图像的渲染操作。

GIF图像渲染组件用于根据接收到的指令控制GIF图像对应的定时器的开启和暂停。每个GIF图像都对应一个定时器和一个寄存器，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，且定时器在每次超时后都进行重置。寄存器用于在定时器超时后，保存最新的k值。可选地，当定时器每次超时时，GIF图像渲染组件先将寄存器中的k值加一，然后对n取余，将取余结果重新写入寄存器。寄存器中的k值用于指示GIF图像渲染组件需要对GIF图像中的第k帧子图像进行渲染，n为GIF图像中的子图像总数。

GIF图像渲染组件在接收到第一指令后，对该GIF图像对应的寄存器中的k值进行清空，或者，对该GIF图像对应的寄存器中的k值继续缓存。

可选的，该装置还可以包括：

执行模块460，被配置为在GIF图像位于浏览器的显示区中时，执行对GIF图像中的子图像的渲染操作。

当第一区域和第二区域存在交集时，说明第二区域对应的GIF图像位于第一区域对应的浏览器的显示区中，则执行对GIF图像中的子图像的渲染操作。

可选的，执行模块460，被配置为向浏览器的内核提供的GIF图像渲染组件发送第二指令，第二指令用于触发GIF图像渲染组件将与GIF图像对应的定时器开启，定时器用于在第i次超时后触发GIF图像渲染组件对GIF图像中的第k张子图像进行渲染，定时器在每次超时后重置，k＝i mod n。

当第一区域和第二区域存在交集时，说明第二区域对应的GIF图像位于第一区域对应的浏览器的显示区中，则向浏览器的内核提供的GIF图像渲染组件发送第二指令，GIF图像渲染组件根据接收到的第二指令将与GIF图像对应的定时器开启。也即，执行对GIF图像中的子图像的渲染操作。

可选的，当GIF图像渲染组件接收到第二指令后，如果与该GIF图像对应的寄存器中的k值为空，则GIF图像渲染组件从GIF图像中的第1帧子图像开始渲染；如果与该GIF图像对应的寄存器中的k值缓存有暂停时的k值，则GIF图像渲染组件从GIF图像中的第k帧子图像开始渲染。

综上所述，本公开实施例中提供的GIF图像渲染装置，通过获取第一区域信息；获取第二区域信息；根据第一区域信息和第二区域信息，检测第一区域和第二区域是否存在交集；若第一区域和第二区域不存在交集时，则暂停对GIF图像中的子图像的渲染操作；解决了当用户滚动网页，使得GIF图像处于浏览器的显示区之外时，浏览器仍然对GIF图像中的每一帧单帧图像进行渲染，导致CPU资源的大量浪费的问题；达到了当GIF图像位于浏览器的显示区之外时，暂停对GIF图像中的子图像的渲染操作，提高了浏览器的渲染性能，在不影响用户体验的同时节省了CPU的计算资源的效果。

另外，通过GIF图像渲染组件控制GIF图像对应的定时器的开启和暂停，可以实现在GIF图像再次位于浏览器的显示区时，从GIF图像中的第k张图像进行渲染操作的效果。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本公开一示例性实施例提供了一种GIF图像渲染装置，能够实现本公开提供的GIF图像渲染方法，该GIF图像渲染装置包括：处理器、用于存储处理器可执行指令的存储器；

其中，处理器被配置为：

检测网页中的GIF图像是否位于浏览器的显示区中；网页是指被浏览器加载的网页，GIF图像包括n帧子图像；

若GIF图像位于浏览器的显示区之外，则暂停对GIF图像中的子图像的渲染操作。

图6是根据一示例性实施例示出的一种GIF图像渲染装置的框图。例如，装置600可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图6，装置600可以包括以下一个或多个组件：处理组件602，存储器604，电源组件606，多媒体组件608，音频组件610，输入/输出(I/O)接口612，传感器组件614，以及通信组件616。

处理组件602通常控制装置600的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件602可以包括一个或多个处理器618来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件602可以包括一个或多个模块，便于处理组件602和其他组件之间的交互。例如，处理组件602可以包括多媒体模块，以方便多媒体组件608和处理组件602之间的交互。

存储器604被配置为存储各种类型的数据以支持在装置600的操作。这些数据的示例包括用于在装置600上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器604可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件606为装置600的各种组件提供电力。电源组件606可以包括电源管理系统，一个或多个电源，及其他与为装置600生成、管理和分配电力相关联的组件。

多媒体组件608包括在装置600和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件608包括一个前置摄像头和/或后置摄像头。当装置600处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件610被配置为输出和/或输入音频信号。例如，音频组件610包括一个麦克风(MIC)，当装置600处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器604或经由通信组件616发送。在一些实施例中，音频组件610还包括一个扬声器，用于输出音频信号。

I/O接口612为处理组件602和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件614包括一个或多个传感器，用于为装置600提供各个方面的状态评估。例如，传感器组件614可以检测到装置600的打开/关闭状态，组件的相对定位，例如组件为装置600的显示器和小键盘，传感器组件614还可以检测装置600或装置600一个组件的位置改变，用户与装置600接触的存在或不存在，装置600方位或加速/减速和装置600的温度变化。传感器组件614可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件614还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件614还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件616被配置为便于装置600和其他设备之间有线或无线方式的通信。装置600可以接入基于通信标准的无线网络，如Wi-Fi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件616经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，通信组件616还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置600可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述GIF图像渲染方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器604，上述指令可由装置600的处理器618执行以完成上述GIF图像渲染方法。例如，非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (8)

1.一种GIF图像渲染方法，其特征在于，所述方法包括：

获取第一区域信息，所述第一区域信息用于指示浏览器的显示区在网页中对应的第一区域，所述第一区域信息包括第一区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置；

从渲染图像列表中获取与所述GIF图像对应的第二区域信息，所述渲染图像列表中存储有所述网页中的GIF图像与对应的第二区域信息之间的对应关系，所述第二区域信息用于指示GIF图像在网页中对应的第二区域，所述第二区域信息包括第二区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置；

根据所述第一区域信息和所述第二区域信息，通过矩形求交集算法检测所述第一区域和所述第二区域是否存在交集，所述交集用于表示所述GIF图像位于所述浏览器的显示区中；所述网页是指被所述浏览器加载的网页，所述GIF图像包括n帧子图像，所述n帧子图像在定时器控制下被逐帧渲染后，会产生动画效果；

若所述GIF图像位于所述浏览器的显示区之外，则暂停对所述GIF图像中的所述子图像的渲染操作；

若所述GIF图像位于所述浏览器的显示区中，则向所述浏览器的内核提供的GIF图像渲染组件发送第二指令，所述第二指令用于触发所述GIF图像渲染组件将与所述GIF图像对应的定时器开启，所述定时器用于在第i次超时后触发所述GIF图像渲染组件对所述GIF图像中的第k张子图像进行渲染，k值为所述GIF图像对应的寄存器中的k值缓存暂停时的值，所述定时器在每次超时后重置，k＝i mod n。

2.根据权利要求1所述的方法，其特征在于，所述获取第一区域信息，包括：

在所述网页被加载后或者接收到移动信号时，调用所述浏览器的内核提供的预定函数接口获取由所述浏览器的内核维护所述第一区域信息，所述移动信号包括所述浏览器中接收到的用于滚动所述网页的信号。

3.根据权利要求1或2所述的方法，其特征在于，所述暂停对所述GIF图像中的所述子图像的渲染操作，包括：

向所述浏览器的内核提供的GIF图像渲染组件发送第一指令，所述第一指令用于触发所述GIF图像渲染组件将与所述GIF图像对应的定时器暂停，所述定时器用于在第i次超时后触发所述GIF图像渲染组件对所述GIF图像中的第k张子图像进行渲染，所述定时器在每次超时后重置，k＝i mod n。

4.一种GIF图像渲染装置，其特征在于，所述装置包括：

检测模块，包括：

第一获取子模块，被配置为获取第一区域信息，所述第一区域信息用于指示浏览器的显示区在网页中对应的第一区域，所述第一区域信息包括第一区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置；

第二获取子模块，被配置为从渲染图像列表中获取与所述GIF图像对应的第二区域信息，所述渲染图像列表中存储有所述网页中的GIF图像与对应的第二区域信息之间的对应关系，所述第二区域信息用于指示GIF图像在网页中对应的第二区域，所述第二区域信息包括第二区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置；

交集检测子模块，被配置为根据所述第一区域信息和所述第二区域信息，通过矩形求交集算法检测所述第一区域和所述第二区域是否存在交集，所述交集用于表示所述GIF图像位于所述浏览器的显示区中；所述网页是指被所述浏览器加载的网页，所述GIF图像包括n帧子图像，所述n帧子图像在定时器控制下被逐帧渲染后，会产生动画效果；

暂停模块，被配置为在所述GIF图像位于所述浏览器的显示区之外时，暂停对所述GIF图像中的所述子图像的渲染操作；

执行模块，被配置为在所述GIF图像位于所述浏览器的显示区中时，向所述浏览器的内核提供的GIF图像渲染组件发送第二指令，所述第二指令用于触发所述GIF图像渲染组件将与所述GIF图像对应的定时器开启，所述定时器用于在第i次超时后触发所述GIF图像渲染组件对所述GIF图像中的第k张子图像进行渲染，k值为所述GIF图像对应的寄存器中的k值缓存暂停时的值，所述定时器在每次超时后重置，k＝i mod n。

5.根据权利要求4所述的装置，其特征在于，所述第一获取子模块，被配置为在所述网页被加载后或者接收到移动信号时，调用所述浏览器的内核提供的预定函数接口获取由所述浏览器的内核维护所述第一区域信息，所述移动信号包括所述浏览器中接收到的用于滚动所述网页的信号。

6.根据权利要求4或5所述的装置，其特征在于，所述暂停模块，被配置为向所述浏览器的内核提供的GIF图像渲染组件发送第一指令，所述第一指令用于触发所述GIF图像渲染组件将与所述GIF图像对应的定时器暂停，所述定时器用于在第i次超时后触发所述GIF图像渲染组件对所述GIF图像中的第k张子图像进行渲染，所述定时器在每次超时后重置，k＝imod n。

7.一种GIF图像渲染装置，其特征在于，所述装置包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取第一区域信息，所述第一区域信息用于指示浏览器的显示区在网页中对应的第一区域，所述第一区域信息包括第一区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置；

从渲染图像列表中获取与所述GIF图像对应的第二区域信息，所述渲染图像列表中存储有所述网页中的GIF图像与对应的第二区域信息之间的对应关系，所述第二区域信息用于指示GIF图像在网页中对应的第二区域，所述第二区域信息包括第二区域的左顶点位置、右顶点位置、左下顶点位置和右下顶点位置；

根据所述第一区域信息和所述第二区域信息，通过矩形求交集算法检测所述第一区域和所述第二区域是否存在交集，所述交集用于表示所述GIF图像位于所述浏览器的显示区中；所述网页是指被所述浏览器加载的网页，所述GIF图像包括n帧子图像，所述n帧子图像在定时器控制下被逐帧渲染后，会产生动画效果；

若所述GIF图像位于所述浏览器的显示区之外，则暂停对所述GIF图像中的所述子图像的渲染操作；

若所述GIF图像位于所述浏览器的显示区中，则向所述浏览器的内核提供的GIF图像渲染组件发送第二指令，所述第二指令用于触发所述GIF图像渲染组件将与所述GIF图像对应的定时器开启，所述定时器用于在第i次超时后触发所述GIF图像渲染组件对所述GIF图像中的第k张子图像进行渲染，k值为所述GIF图像对应的寄存器中的k值缓存暂停时的值，所述定时器在每次超时后重置，k＝i mod n。

8.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令或至少一段程序，所述至少一条指令或至少一段程序在被执行时以实现所述权利要求1-3中任一所述的GIF图像渲染方法。

Images