CN104504090A - 一种网页中图像的处理方法和装置 - Google Patents

Abstract

提供了一种网页中图像的处理方法和装置，其中，所述方法包括：对当前显示的页面进行截图操作，以获取页面截图，对页面截图进行处理，以获取所述页面截图中静态对象的边缘轮廓的像素位置，依据所述像素位置绘制针对所述当前显示的页面的效果图，将得到的所述效果图叠加于当前显示的页面以进行显示，从而获得在页面中进行动画显示的效果，丰富了页面的内容、增加了浏览页面或其他显示界面时的趣味，改善了浏览静态页面时的用户体验。

Description

一种网页中图像的处理方法和装置

技术领域

本发明涉及网页显示的技术领域，尤其是涉及一种网页中图像的处理方法和装置。

背景技术

随着社会的发展和信息化程度的不断提高，电脑、手机等智能终端的使用越来越普及，人们利用各种智能终端进行工作、学习和生活娱乐等，提升了工作和学习效率，改善了生活质量。

现在，网络信息技术已经深刻地影响着每个人的工作和生活，例如，许多行业的部分或全部工作都需要利用电脑完成的；或者，用户可以利用网络信息技术来获取信息，包括利用电脑浏览页面以检索资料或阅读网页新闻等。然而，当人们在浏览电脑、手机等智能终端显示的页面时，眼睛常常需要长时间盯着页面，这种情况损害了用户的视力。而且，由于页面中的文字和图像等内容都是静态的、位置都是固定的，使页面显得刻板和僵化，用户在长时间浏览各种页面时，常会因为枯燥地浏览静态的页面而影响心理状态，产生枯燥、烦闷的负面情绪，导致学习和工作的效率比较低。

发明内容

本发明提供一种网页中图像的处理方法和装置，用于解决现有技术中用户在浏览各种页面时，会因为枯燥地浏览静态的页面而影响心理状态，产生负面情绪，导致学习和工作的效率比较低的技术问题。

为解决现有技术中的上述问题，本发明提供了一种网页中图像的处理方法，其中，包括：

a)对当前显示的页面进行截图操作，以获取页面截图；

b)对所述页面截图进行处理，以获取所述页面截图中静态对象的边缘轮廓的像素位置；

c)依据所述像素位置绘制针对所述当前显示的页面的效果图；以及

d)将得到的所述效果图叠加于所述当前显示的页面以进行显示。

本发明还提供了一种网页中图像的处理装置，其中，包括：

截图模块，用于对当前显示的页面进行截图操作，以获取页面截图；

处理模块，用于对所述页面截图进行处理，以获取所述页面截图中静态对象的边缘轮廓的像素位置；

绘制模块，用于依据所述像素位置绘制针对所述当前显示的页面的效果图；以及

显示模块，用于将得到的所述效果图叠加于所述当前显示的页面以进行显示。

本发明提供的实施例的有益效果：

本发明提供的实施例中，对当前显示的页面进行截图操作，以获取页面截图，对页面截图进行处理，以获取所述页面截图中静态对象的边缘轮廓的像素位置，依据所述像素位置绘制针对所述当前显示的页面的效果图，将得到的所述效果图叠加于当前显示的页面以进行显示，从而获得在页面中进行动画显示的效果，丰富了页面的内容、增加了浏览页面或其他显示界面时的趣味，改善了用户浏览静态页面时的心理状态，避免用户浏览静态页面或其他显示界面时的可能产生的负面情绪，提高了用户在浏览页面时的学习效率或工作效率。

附图说明

本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1为本发明网页中图像的处理方法第一实施例的流程示意图；

图2为本发明网页中图像的处理方法第二实施例的流程示意图；

图3为本发明网页中图像的处理装置第一实施例的结构示意图；

图4为本发明网页中图像的处理装置第二实施例的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明实施例中的技术方案，并使本发明实施例的上述目的、特征和优点能够更加明显易懂，下面结合附图对本发明实施例中技术方案作进一步详细的说明。

本发明提供的实施例，是通过在原页面上叠加透明效果图来实现的，不断更新效果图(效果对象在每张图中不同)来实现动画效果，在效果对象触及原页面截图中静态对象的边缘(依据像素位置判断静态对象的边缘)时，使此效果对象的位置不再变化来达到雪落在静态对象上的效果。

图1为本发明网页中图像的处理方法第一实施例的流程图。如图1所示，本实施例网页中图像的处理方法的流程具体包括如下步骤：

步骤101、对当前显示的页面进行截图操作，以获取页面截图。

在本实施例中，执行截图操作的可以是浏览器的截屏模块，也可以是能够页面截图、屏幕截图或其他显示界面截图的应用软件。当用户浏览当前显示的页面的时候，可以通过选择键、按钮或其他方式来启动浏览器的截屏模块或用于页面截图的应用以获取页面截图。获取当前显示的页面的canvas页面截图之后，进入步骤102。

步骤102、对页面截图进行处理，以获取页面截图中静态对象的边缘轮廓的像素位置。

在本步骤中，对步骤101获取的页面截图进行像素处理，像素处理包括对页面截图进行去色处理和查找边缘处理等流程，以获取页面截图中静态对象的边缘轮廓的像素位置。其中，页面截图中的静态对象可以是各种字体的文字、也可以山水风景图像或动植物图像等。去色处理主要是将页面截图中彩色的静态对象转换为灰度静态对象，获得灰度静态对象中各个像素的灰度信息；查找边缘处理可以利用灰度静态对象中各个像素的灰度信息，找出页面截图中静态对象的边缘轮廓的像素位置，然后进入步骤103。

步骤103、依据像素位置绘制针对当前显示的页面的效果图。

所述的效果图是单独绘制的一张图，其中除了效果对象外，其他部分可以是透明的。效果图中依据之前得到的像素位置预设了静态对象的边缘轮廓的位置，其在与当前页面叠加显示时与当前页面中静态对象的边缘轮廓位置重合。在本步骤中，根据页面截图中静态对象的边缘轮廓的像素位置，在页面截图中静态对象的边缘轮廓之外绘制效果对象，效果对象可以是雪花、云和沙尘等，效果对象的数量可以是一个，也可以是很多个。在实际应用中，按照预设频率在页面截图中静态对象的边缘轮廓的位置绘制效果图，例如，每秒钟绘制60帧效果图，每一帧效果图中效果对象的数量和/或位置不同、运动轨迹不同，累积到静态对象边缘轮廓上的位置可以相同，也可以不同。

在本实施例中，如果是雪花的效果对象，则可以在静态对象的边缘轮廓上方绘制效果对象，效果对象向静态对象方向的运动轨迹可以是从上向下的直线、折线或曲线等，效果对象可以在随风飘洒或下落的过程中而放大、缩小或透明度发生变化等。当效果对象运动到静态对象的边缘轮廓位置时，效果对象将停留在静态对象的边缘轮廓的位置，从而得到针对当前显示的页面的关于效果对象的效果图，然后进入步骤104。

步骤104、将得到的效果图叠加于当前显示的页面以进行显示。

在本步骤中，在得到针对当前显示的页面的关于效果对象的效果图之后，将效果图叠加于当前显示的页面进行显示并不断更新，从而得到作为效果对象的雪花落在页面中的文字、动物、植物、山、房屋或地面上，在静态的页面上形成雪花飘落的动态风景图画，以增加浏览网页的乐趣，放松用户的心情，烘托圣诞节、元旦等节日的喜庆气氛。在将得到的效果图叠加于当前显示的页面进行显示时，可以根据页面的亮度、静态对象的形状等信息对效果图进行光效果的设置，以提高页面进行动态图画的亮度、对比度的显示效果，增加浏览页面时的趣味性。

在本实施例中，对当前显示的页面进行截图操作，以获取页面截图，对页面截图进行处理，以获取页面截图中静态对象的边缘轮廓的像素位置，依据像素位置绘制针对当前显示的页面的效果图，将得到的效果图叠加于当前显示的页面以进行显示，从而获得在页面中进行动画显示的效果，丰富了页面的内容、增加了浏览页面或其他显示界面时的趣味，改善了用户浏览静态页面时的心理状态，避免用户浏览静态页面或其他显示界面时的可能产生的负面情绪，提高了用户在浏览页面时的学习效率或工作效率。

图2为本发明网页中图像的处理方法第二实施例的流程示意图。如图2所示，本实施例网页中图像的处理方法的流程具体包括如下步骤：

步骤201、接收效果图的触发按键的事件。

在本实施例中，用户安装能够显示页面效果图的功能或应用软件之后，可以在智能终端的显示界面上设置快捷键或按键，如果用户希望在网页、屏幕保护或终端操作界面等各种当前显示的界面上显示效果图时，用户可以手动触发效果图的触发按键。或者，用户也可以设定显示效果图的时间间隔，例如，设定用户在打开在网页上的时长达到预设时长T时，启动页面开始进行获取效果图的操作，其中，预设时长T可以设置为10分钟，也就是说，当用户浏览网页的时长超过10分钟之后，终端系统会自动触发获取效果图的按键，并将效果图显示在当前页面上，以提醒用户休息一下眼睛或者调整坐姿等，确保用户的身心健康。在接收到效果图的触发按键的事件之后，进入步骤202。

步骤202、对页面进行截图操作，获取页面截图后转换为canvas图像。

在本实施例中，以执行截图操作的可以是浏览器的截屏模块为例来介绍技术方案。如果用户希望在浏览器页面中实现效果图，可以启动浏览器的截屏模块，本实施例中的截屏模块利用html2canvas库实现对页面的截图功能，以将页面上的所有元素(包括文字、图片和输入框等)绘制在canvas中，最后合成canvas图像。在本步骤中，在接收到效果图的触发按键的事件之后，智能终端的系统将启动浏览器中的canvas功能对页面进行截图操作，获取页面截图，浏览器中的canvas功能将页面截图转换为canvas图像，然后进入步骤203。

步骤203、对canvas图像进行像素处理，获取页面截图中静态对象的边缘轮廓。

在本步骤中，对canvas图像进行像素处理，以获取页面截图中静态对象的边缘轮廓的像素位置。其中，页面截图中的静态对象可以是各种字体的文字、山水风景的静态对象或动植物的静态对象等。去色处理主要是将canvas图像中彩色的静态对象转换为灰度静态对象，获得灰度静态对象中各个像素的灰度信息；查找边缘处理是利用灰度静态对象中各个像素的灰度信息，找出页面截图中静态对象的边缘轮廓的像素位置，然后进入步骤204。

步骤204、在canvas图像中的静态对象边缘轮廓之外绘制效果对象，得到效果图。

在本步骤中，在canvas图像中静态对象的边缘轮廓之外绘制效果对象，效果对象可以是雪花、云和沙尘等，效果对象的数量可以是一个，也可以是很多个。在本实施例中，如果是云和沙尘的效果对象，则可以在静态对象的边缘轮廓上方绘制效果对象，效果对象的运动轨迹可以是从上向下进行折线、曲线；也可以是在静态对象的边缘轮廓左侧或右侧绘制效果对象，效果对象的运动轨迹是水平方向上延伸的直线、折线、曲线等。当效果对象运动到静态对象的边缘轮廓位置时，效果对象将停留、堆积或挂搭在静态对象的边缘轮廓的位置，从而得到针对当前显示的页面的关于效果对象的效果图，然后进入步骤205。

步骤205、将得到的效果图叠加于当前显示的页面进行显示。

在本步骤中，在得到针对当前显示的页面的关于效果对象的效果图之后，雪花、云和沙尘等成为效果图中的效果对象，将效果图叠加于当前显示的页面进行显示，从而得到作为效果对象的雪花、云和/或沙尘等落在页面中的文字、动物、植物、山、房屋或地面上，例如，雪花洒落在地面上、云飘浮在山顶上、沙堆积在地面上等。

步骤206、按照预设频率重复执行上述步骤，获得在页面中进行动画显示的效果。

依据上述步骤，对当前显示的页面进行截图操作，得到页面截图，然后将页面截图转换为canvas图像。当步骤206执行时，按照预设频率重复执行步骤204-205的操作，获取新的效果图，以实现动画效果，其中，预设频率可以是60帧/秒。在当前效果图中效果对象的位置与静态对象边缘轮廓的像素位置重合时，在下一次生成的效果图中该效果对象的位置保持不变，以体现效果对象不断堆积叠加的效果。在将新的效果图叠加于当前显示的页面之前，删除上一次叠加的效果图，从而可以得到雪花、云或沙尘等效果对象在页面中不停地飘落并堆积、挂搭或停留在页面中的文字、动物、植物、山、房屋或地面等静态对象上，使页面中的雪花、云或沙尘逐渐变厚、变高或变多，从而得到雪花飘落、云层随风流转或沙尘堆积等动画效果。通过在页面中将动态对象堆积到静态对象上，可以丰富页面的内容，将内容静止的页面转换成带有动态变化的页面，增加了浏览页面时的兴趣。

进一步的，如果用户希望在屏幕保护或终端操作界面等其他显示界面上显示效果图时，也可以通过独立的应用软件来实现截屏、绘图以实现效果图，获得在各种显示界面中进行动画显示的效果，其具体过程与浏览器利用html2canvas库实现对页面的截屏功能的过程相似，在此不再赘述。

在本实施例中，既可以利用浏览器的截屏模块在网页中实现效果图，也可以利用独立的应用软件在终端操作界面、屏幕保护等各种显示界面上实现效果图，获得在各种显示界面中进行动画显示的效果，以增加使用终端的趣味性，尤其是在节日的时候，提供节日的喜庆气氛。

在本实施例中，接收效果图的触发按键的事件之后，启动对页面进行截图操作、绘制动态对象等以得到效果图，将得到的效果图叠加于当前页面进行显示，并按照预设频率重复对效果图叠加于当前显示的页面后得到的叠加页面继续进行截图操作，从而实现动态对象持续地堆积在静态对象上，获得在页面中进行动画显示的效果，丰富了页面的内容并增加了浏览页面时的趣味，改善了用户浏览静态页面时的心理状态，避免用户浏览静态页面时的可能产生的负面情绪，提高了用户在浏览页面时的学习效率或工作效率。

图3为本发明网页中图像的处理装置第一实施例的结构示意图。如图3所示，本实施例网页中图像的处理装置具体包括：截图模块301、处理模块302、绘制模块303和显示模块304。其中，截图模块301用于对当前显示的页面进行截图操作，以获取当前显示的页面的截图；处理模块302用于对页面截图进行处理，以获取页面截图中静态对象的边缘轮廓的像素位置；绘制模块303用于依据像素位置绘制针对当前显示的页面的效果图；显示模块304用于将得到的效果图叠加于当前显示的页面以进行显示。

在本实施例中，截图模块对当前显示的页面进行截图操作，以获取页面截图，处理模块对页面截图进行处理，以获取页面截图中静态对象的边缘轮廓的像素位置，绘制模块依据像素位置绘制针对当前显示的页面的效果图，显示模块得到的效果图叠加于当前显示的页面以进行显示，从而获得在页面中进行动画显示的效果，丰富了页面的内容、增加了浏览页面时的趣味，改善了用户浏览静态页面时的心理状态，避免用户浏览静态页面时的可能产生的负面情绪，提高了用户在浏览页面时的学习效率或工作效率。

图4为本发明网页中图像的处理装置第二实施例的结构示意图。如图4所示，本实施例网页中图像的处理装置还包括：重复启动模块305，用于依据预设频率重复启动绘制模块303和显示模块304，实现按照预设频率将动态对象持续地堆积在静态对象上，获得在页面中进行动画显示的效果。在新的效果图叠加于当前显示的页面之前，绘制模块303还用于将删除上一次叠加的效果图。

在本实施例中，用户可以手动触发效果图的触发按键，或者，用户也可以设定在网页上自动启动显示效果图的预设时长为10分钟，当用户打开网页的时长达到10分钟之后，终端系统将自动触发截面模块301对页面进行截图操作，并将获取的当前显示页面的页面截图。

进一步的，本实施例中，绘制模块303还用于在当前效果图中效果对象的位置与像素位置重合时，在下一次生成的效果图中保持效果对象的位置不变。处理模块302还用于对页面截图进行去色处理和查找边缘处理；以及依据处理后的页面截图获取静态对象的边缘轮廓的像素位置。

在本实施例中，通过重复启动模块预设频率重复启动绘制模块和显示模块，实现动态对象持续地堆积在静态对象上，获得在页面中进行动画显示的效果，丰富了页面的内容并增加了浏览页面时的趣味，改善了用户浏览静态页面时的心理状态，避免用户浏览静态页面时的可能产生的负面情绪，提高了用户在浏览页面时的学习效率或工作效率。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅是本发明的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (12)

1.一种网页中图像的处理方法，其特征在于，包括：

a)对当前显示的页面进行截图操作，以获取页面截图；

b)对所述页面截图进行处理，以获取所述页面截图中静态对象的边缘轮廓的像素位置；

c)依据所述像素位置绘制针对所述当前显示的页面的效果图；以及

d)将得到的所述效果图叠加于所述当前显示的页面以进行显示。

2.根据权利要求1所述的网页中图像的处理方法，其特征在于，所述方法进一步包括：

依据预设频率重复上述步骤c)和d)，其中，在新的效果图叠加于所述当前显示的页面之前，删除上一次叠加的效果图。

3.根据权利要求2所述的网页中图像的处理方法，其特征在于，所述效果图中包括效果对象，以及在当前效果图中所述效果对象的位置与所述像素位置重合时，在下一次生成的效果图中保持所述效果对象的位置不变。

4.根据权利要求3所述的网页中图像的处理方法，其特征在于，所述效果对象包括如下中的至少一种：

雪花、云和沙尘。

5.根据权利要求1-4中任一项所述的网页中图像的处理方法，其特征在于，对所述页面截图进行处理，以获取所述页面截图中静态对象的边缘轮廓的像素位置的步骤进一步包括：

对所述页面截图进行去色处理和查找边缘处理；以及

依据处理后的所述页面截图获取静态对象的边缘轮廓的像素位置。

6.根据权利要求1-5中任一项所述的网页中图像的处理方法，其特征在于，所述静态对象包括如下中的至少一种：

文字、风景图像和动物图像。

7.一种网页中图像的处理装置，其特征在于，包括：

截图模块，用于对当前显示的页面进行截图操作，以获取页面截图；

处理模块，用于对所述页面截图进行处理，以获取所述页面截图中静态对象的边缘轮廓的像素位置；

绘制模块，用于依据所述像素位置绘制针对所述当前显示的页面的效果图；以及

显示模块，用于将得到的所述效果图叠加于所述当前显示的页面以进行显示。

8.根据权利要求7所述的网页中图像的处理装置，其特征在于，还包括：

重复启动模块，用于依据预设频率重复启动所述绘制模块和所述显示模块，以绘制新效果图并将得到的新效果图叠加于所述当前显示的页面以进行显示。

9.根据权利要求8所述的网页中图像的处理装置，其特征在于，所述显示模块进一步用于：

在新的效果图叠加于所述当前显示的页面之前，删除上一次叠加的效果图。

10.根据权利要求9所述的网页中图像的处理装置，其特征在于，所述绘制模块进一步用于：

在当前效果图中所述效果对象的位置与所述像素位置重合时，在下一次生成的效果图中保持所述效果对象的位置不变。

11.根据权利要求10所述的网页中图像的处理装置，其特征在于，所述效果对象包括如下中的至少一种：

雪花、云和沙尘。

12.根据权利要求7-9任一所述的网页中图像的处理装置，其特征在于，所述处理模块进一步用于：

对所述页面截图进行去色处理和查找边缘处理；以及

依据处理后的所述页面截图获取静态对象的边缘轮廓的像素位置。