CN103856507B - 网络动态图片的静态显示方法和装置 - Google Patents

Abstract

本申请公开了一种网络动态图片的静态显示方法和装置。包括：图片访问下载模块从服务器下载网络动态图片到本地；第一标签建立模块在所述动态图片下载完成后，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，在网页的指定位置上***该文本标签；第一显示模块执行所述文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。利用本发明，可以节省服务器的计算资源和存储资源。

Description

网络动态图片的静态显示方法和装置

技术领域

本申请涉及网络信息显示技术领域，尤其涉及一种网络动态图片的静态显示方法和装置。

背景技术

目前的互联网络上出现了大量的动态图片。最常见的动态图片为图像互换格式（GIF，Graphics Interchange Format）图片。动态图片的一个重要特点是其在一个文件中可以存多幅图像，并可以把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，从而加载显示一种最简单的动画，构成了动态的效果。

目前业界出现了一种将网络上的动态图片静态化的技术需求，即在浏览器或其它客户端中加载显示动态图片的静态图片。例如在一些网络网页中，一个网页含有大量的动态图片，如果同时动态显示，会严重干扰浏览者的视觉判断，妨碍浏览者浏览目标信息，在这种情况下就需要将动态图片静态化为静态图片加载显示。

现有的将网络上的动态图片静态加载显示在网页中的技术方案主要是一种脱离客户端的显示处理技术，即采用后台服务器对同一张gif图片生成两张图片，一张为动态的gif图，一张为该gif图的第一帧静态png图。当客户端（如浏览器或其他可以浏览网页的客户端）向服务器发起访问所述动态图片的请求后，服务器会默认返回所述静态图片，即所述静态png图，客户端会默认加载显示该静态png图，从而实现动态图片的静态化显示。当用于希望显示动态效果的时候，则客户端向服务器重新发起动态请求，服务器返回对应的动态的gif图，客户端再加载显示该动态的gif图，这样可以达到动态图片的静态化和动态化之间的转换显示。

但是，上述现有技术存在如下技术问题：

服务器上需要为每一张动态图片转换一张对应的静态图片，需要占用计算资源；同时还要保存两张图片，一张为动态图片（即所述动态的gif图片），一张为静态图片（即所述静态png图），这样会比较浪费服务器的硬盘空间。通常在网络侧，一台服务器所要保存的网页的数量非常庞大，而大多数网页中往往包括多张动态图片，现有技术需要对每张动态图片进行转换静态图片的处理，计算量巨大；同时服务器还要保存每张动态图片对应的两张图片，所占用的硬盘存储空间也非常巨大。

发明内容

有鉴于此，本发明的主要目的在于提供一种网络动态图片的静态显示方法和装置，以节省服务器的计算资源和存储资源。

本发明的技术方案是这样实现的：

一种网络动态图片的静态显示方法，包括：

从服务器下载网络动态图片到本地；

在所述动态图片下载完成后，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，在网页的指定位置上***该文本标签；

执行所述文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

一种网络动态图片的静态显示装置，该装置包括：

图片访问下载模块，用于从服务器下载网络动态图片到本地；

第一标签建立模块，用于在所述动态图片下载完成后，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，在网页的指定位置上***该文本标签；

第一显示模块，用于执行所述文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

与现有技术相比，本发明只需要一次请求下载动态图片在本地，然后利用本地操作***的图片处理滤镜从动态图片中提取出一帧图片作为该动态图片的静态图片加载显示。这种方案中，针对一张动态图片，在服务器上只需要保存一张该动态图片即可，不必再保存静态图片，也省去了服务器将动态图片转换为静态图片的计算量。针对保存有大量含有动态图片的网页的服务器来讲，如此巨大量的动态图片，每张动态图片从保存两张图片削减到只保存一张图片，因此可以大大节省服务器的存储资源；同时，由于服务器不必对如此巨量的动态图片进行转换静态图片的计算处理，而是将静态化的处理交给发起访问请求的客户端设备，从而由大量分散的客户端设备代替了服务器进行巨量的动态图片静态化处理，节省了服务器的计算资源。

附图说明

图1为本发明所述网络动态图片的静态显示方法的一种流程图；

图2为本发明所述方法的进一步实施例的一种流程图；

图3为本发明所述网络动态图片的静态显示装置的一种实施例组成示意图；

图4为所述图片访问下载模块的具体组成示意图；

图5为本发明所述网络动态图片的静态显示装置的又一种实施例组成示意图。

具体实施方式

下面结合附图及具体实施例对本发明再作进一步详细的说明

图1为本发明所述网络动态图片的静态显示方法的一种流程图。参见图1，该方法主要包括：

步骤101、从服务器下载网络动态图片到本地。

步骤102、在所述动态图片下载完成后，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，在网页的指定位置上***该文本标签。

步骤103、执行所述文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

本发明的方法由具有网络信息浏览功能的客户端执行，所述客户端例如可以是浏览器，也可以是其它具有网页浏览器内核的客户端。具体可以由网页脚本语言（如javascript）实现所述步骤。

在所述步骤101中，所述从服务器下载网络动态图片到本地，具体包括以下两个步骤111和步骤112：

步骤111、客户端从服务器请求得到所述动态图片在服务器中的访问地址。

本步骤中，客户端需要预先得到所述动态图片所在网页的访问地址，并访问该网页，在访问该网页的过程中，会得到所述动态图片在服务器中的访问地址。其中，如果该网页中包括多个动态图片，则会请求得到每张动态图片的访问地址，之后针对每张动态图片，都需要执行本发明的后续步骤。即后续步骤（步骤112和后续的步骤102、103等步骤）是针对单张动态图片的执行步骤。

步骤112、客户端利用前端脚本语言调用新建图片标签命令，在内存中新建图片标签，设置该图片标签的地址为所述动态图片在服务器中的访问地址，之后浏览器内核会按照该图片标签的地址从服务器下载对应的动态图片到本地，同时可以通过脚本语言设置图片下载事件监听，以监听该动态图片的下载状态，在下载完毕后执行后续的步骤102。

在所述步骤102中，客户端在监听到所述动态图片下载完成后，通过脚本语言调用新建文本标签命令，新建一文本标签，例如新建一个SPAN标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，从而使所述动态图片可以作为输入信息输入到所述图片处理滤镜中处理。并且，通过脚本语言的***命令，在网页的指定位置上***该文本标签。所述网页的指定位置是指该动态图片在原网页上的原位置。所述SPAN标签本用于显示文字，但是在本发明中该文字标签中的文字设置为本地操作***图片处理滤镜的调用命令，从而可以调用所述图片处理滤镜，在该SPAN标签的***位置显示所述图片处理滤镜的输出结果，即可以用于显示静态图片。

本发明的一个具体实施例中，所述本地操作***图片处理滤镜为可以从所述动态图片中提取一帧的图片处理滤镜。不同的操作***中对应的具体图片处理滤镜可以不同。例如，在windows操作***中的IE浏览器中的图片处理滤镜，是一种独特的级联样式表（CSS，Cascading Style Sheet）样式，这些图片处理滤镜主要是用来实现图像的各种特殊效果。其中有一种图片处理滤镜为AlphaImageLoader滤镜，这个AlphaImageLoader滤镜可以在对象容器边界内，在对象的背景和内容之间显示一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式，则也可以对该PNG图片进行0%-100%的透明度处理。通过该AlphaImageLoader滤镜处理显示动态gif图片，则该AlphaImageLoader滤镜会自动进行图片的裁剪，只显示gif图片的第一帧，即显示的是一张静态图片。

在本实施例中，步骤102中利用脚本语言设置文本标签的CSS的滤镜为AlphaImageLoader滤镜，在这种情况下所述客户端需要采用IE浏览器内核。在所述步骤103中，客户端调用所述文本标签，通过文本标签中的调用命令可以调用操作***中的AlphaImageLoader滤镜从所述缓存地址中读取所述动态图片，该AlphaImageLoader滤镜再将所述动态图片的第一帧图片提取出来，将该第一帧图片加载显示到所文本标签在网页中的对应的位置。从而可以实现网络动态图片的静态化显示。当然对于其它滤镜来讲，也有可能是从动态图片中提取其它帧的图片作为静态图片加载显示。

此后，当用户需要预览所述静态图片对应的动态图片时，会向客户端发出预览动态图片的指令，例如该指令一般是鼠标移动到网页中的已经静态化的图片上发出的，客户端需要将静态图片再动态化。然后，当用户不需要预览动态图片时，会向客户端发出停止预览所述动态图片的指令，例如该指令一般是鼠标移出所述预览的动态图片到网页其它位置所发出的，客户端需要将所述预览的动态图片再静态化。

图2为本发明所述方法的进一步实施例的一种流程图。参见图2，在该进一步的实施例中，进一步包括：

步骤104、客户端检测鼠标是否移动到经过上述静态化处理后加载显示的所述某一个静态图片上，如果是则针对该静态图片执行后续处理。

步骤105、客户端利用脚本语言调用删除文本标签的命令，删除所述静态图片对应的文本标签。

步骤106、利用脚本语言新建图片标签，设置该图片标签的地址为所删除的所述文本标签对应的所述动态图片在本地的缓存地址，将该图片标签***到所删除的所述文本标签对应的网页位置。

步骤107、执行所述图片标签，在该图片标签对应的网页位置加载显示所述动态图片。

现有技术中，为了加载显示一张动态图片需要向服务器发起两次http请求并下载两张图片，一次为请求下载静态图片，一次为请求下载动态图片，不但浪费了网络的带宽资源，而且在将静态图片切换成动态图片的时候，需要再次等待动态图片的下载，操作延时较长，客户端浏览显示动态图片的流畅度差，用户体验不好。

而本发明中，通过上述操作，由于所述动态图片已经下载到本地了，客户端会直接读取本地缓存的该动态图片，不需要重新下载，然后脚本语言调用***命令，将该动态图片***到原文本标签的位置，这样网页就能正常显示动态图片，从而实现了静态化图片切换到动态图片的显示过程，而对应的HTTP请求却缩小为一次，即所述的一次下载动态图片的请求，因此可以节省客户端设备发起多余请求的计算资源，以及节省由于多余下载所占用的网络的带宽资源，并可以提升静态图片重新动态化的处理效率，减少延迟时间，提升浏览动态图片的流畅度，进而提升用户体验。

步骤108、客户端检测鼠标是否移出所述预览的动态图片，如果是则针对该动态图片执行后续处理。

步骤109、客户端利用脚本语言调用删除图片标签的命令，删除所述动态图片对应的图片标签。

步骤110、利用脚本语言新建文本标签，在该文本标签中设置本地操作***图片处理滤镜如所述AlphaImageLoader滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，将该文本标签***到所删除的所述图片标签的网页位置。

步骤111、执行所述文本标签，调用本地操作***的AlphaImageLoader滤镜从所述动态图片中提取一帧图片（例如此处为第一帧图片），将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

从而通过上述操作，可以在不需要预览动态图片的时候，将所述动态图片重新恢复到静态图片，从而可以实现动态图片的再次静态化。之后，还可以返回步骤104，如果检测到鼠标移动到静态图片上后，再次显示动态图片，如此循环。

另外，本发明采用调用本地操作***图片处理滤镜对所述动态图片的第一帧图片进行提取处理，而不是由客户端进行提取处理。这样，可以节省客户端的计算资源，提高图片提取处理的处理效率，不会导致由于客户端进行图片提取处理导致客户端处理速度降低进而卡住整个网页，也可以避免由于客户端同时提取处理多张动态图片所导致的客户端崩溃的问题。

与本发明的所述方法对应，本发明还公开了一种网络动态图片的静态显示装置。图3为本发明所述网络动态图片的静态显示装置的一种实施例组成示意图。参见图3，该装置包括：

图片访问下载模块301，用于从服务器下载网络动态图片到本地。

第一标签建立模块302，用于在所述动态图片下载完成后，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，在网页的指定位置上***该文本标签；

第一显示模块303，用于执行所述文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

该装置可以设置在具有网络信息浏览功能的客户端上，从而可以实现网络动态图片在客户端上的静态加载显示。

图4为所述图片访问下载模块的具体组成示意图。参见图4，该图片访问下载模块301包括：

访问地址获取模块311，用于从服务器请求得到所述动态图片在服务器中的访问地址；

下载模块312，用于新建图片标签（在内存中），设置该图片标签的地址为所述动态图片在服务器中的访问地址，按照该图片标签的地址从服务器下载对应的动态图片到本地；

监听模块313，用于监听所述动态图片的下载状态，在下载完毕后触发所述第一标签建立模块。

图5为本发明所述网络动态图片的静态显示装置的又一种实施例组成示意图。参见图5，该实施例中，所述装置进一步包括：

第一检测模块304，用于检测是否收到预览所述静态图片对应的动态图片的指令（例如检测检测鼠标是否移动到所述静态图片之上），如果是则触发所述第二标签建立模块。

第二标签建立模块305，用于删除所述静态图片对应的文本标签，新建图片标签，设置该图片标签的地址为所述动态图片在本地的缓存地址，将该图片标签***到所删除的所述文本标签对应的网页位置。

第二显示模块306，用于执行所述第二标签建立模块305建立的图片标签，在该图片标签对应的网页位置加载显示所述动态图片。

通过图5的实施例，不但可以实现网络动态图片的静态化输出，在需要预览动态图片时，还可以显示动态图片，完成静态图片到动态图片的切换。

在该实施例中，所述装置还可以进一步包括：

第二检测模块307，用于检测是否收到停止预览所述第二显示模块加载显示的动态图片的指令（例如检测鼠标是否移出所述第二显示模块加载显示的动态图片），如果是则触发所述第三标签建立模块308。

第三标签建立模块308，用于删除所述动态图片对应的图片标签，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，将该文本标签***到所删除的所述图片标签的网页位置。

第三显示模块309，用于执行所述第三标签建立模块308建立的文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

通过图5所述的实施例，所述预览的动态图片还可以重新静态化。从而实现动态图片和静态图片的随意切换。

在本发明所述装置的一种实施例中，所述本地操作***图片处理滤镜为windows操作***中IE浏览器的AlphaImageLoader滤镜。所述客户端为采用IE浏览器内核的客户端。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块或组件可以结合或者可以集成到另一个***或装置，或一些特征可以忽略，或不执行。

本发明的每一个实施例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本发明。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备（如硬盘和或内存）中执行。因此，这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式，例如纸张存储介质（如纸带等）、磁存储介质（如软盘、硬盘、闪存等）、光存储介质（如CD-ROM等）、磁光存储介质（如MO等）等。

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

Claims (11)

1.一种网络动态图片的静态显示方法，其特征在于，包括：

从服务器下载网络动态图片到本地；

在所述动态图片下载完成后，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，在网页的指定位置上***该文本标签；

执行所述文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

2.根据权利要求1所述的方法，其特征在于，在检测到预览所述静态图片对应的动态图片的指令后，进一步包括：

删除所述静态图片对应的文本标签；

新建图片标签，设置该图片标签的地址为所述动态图片在本地的缓存地址，将该图片标签***到所删除的所述文本标签对应的网页位置；

执行所述图片标签，在该图片标签对应的网页位置加载显示所述动态图片。

3.根据权利要求2所述的方法，其特征在于，在检测到停止预览所述动态图片的指令后，进一步包括：

删除所述动态图片对应的图片标签；

新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，将该文本标签***到所删除的所述图片标签的网页位置；

执行所述文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

4.根据权利要求1所述的方法，其特征在于，所述从服务器下载网络动态图片到本地，具体包括：

从服务器请求得到所述动态图片在服务器中的访问地址；

新建图片标签，设置该图片标签的地址为所述动态图片在服务器中的访问地址，按照该图片标签的地址从服务器下载对应的动态图片到本地，同时监听下载状态，在下载完毕后执行后续操作。

5.根据权利要求1至4任一项所述的方法，其特征在于，所述从所述动态图片中提取一帧图片，具体为从所述动态图片中提取第一帧图片。

6.根据权利要求5所述的方法，其特征在于，所述本地操作***图片处理滤镜为windows操作***中IE浏览器的AlphaImageLoader滤镜。

7.一种网络动态图片的静态显示装置，其特征在于，该装置包括：

图片访问下载模块，用于从服务器下载网络动态图片到本地；

第一标签建立模块，用于在所述动态图片下载完成后，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，在网页的指定位置上***该文本标签；

第一显示模块，用于执行所述文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

8.根据权利要求7述的装置，其特征在于，该装置进一步包括：

第一检测模块，用于检测是否收到预览所述静态图片对应的动态图片的指令，如果是则触发第二标签建立模块；

第二标签建立模块，用于删除所述静态图片对应的文本标签，新建图片标签，设置该图片标签的地址为所述动态图片在本地的缓存地址，将该图片标签***到所删除的所述文本标签对应的网页位置；

第二显示模块，用于执行所述第二标签建立模块建立的图片标签，在该图片标签对应的网页位置加载显示所述动态图片。

9.根据权利要求8所述的装置，其特征在于，该装置进一步包括：

第二检测模块，用于检测是否收到停止预览所述第二显示模块加载显示的动态图片的指令，如果是则触发第三标签建立模块；

第三标签建立模块，用于删除所述动态图片对应的图片标签，新建文本标签，在该文本标签中设置本地操作***图片处理滤镜的调用命令，将该调用命令的处理地址设置为所述动态图片在本地的缓存地址，将该文本标签***到所删除的所述图片标签的网页位置；

第三显示模块，用于执行所述第三标签建立模块建立的文本标签，调用本地操作***图片处理滤镜从所述动态图片中提取一帧图片，将提取出的该一帧图片作为静态图片加载显示在所述文本标签对应的网页位置。

10.根据权利要求7所述的装置，其特征在于，所述图片访问下载模块具体包括：

访问地址获取模块，用于从服务器请求得到所述动态图片在服务器中的访问地址；

下载模块，用于新建图片标签，设置该图片标签的地址为所述动态图片在服务器中的访问地址，按照该图片标签的地址从服务器下载对应的动态图片到本地；

监听模块，用于监听所述动态图片的下载状态，在下载完毕后触发所述第一标签建立模块。

11.根据权利要求7至10任一项所述的装置，其特征在于，所述本地操作***图片处理滤镜为windows操作***中IE浏览器的AlphaImageLoader滤镜。