发明内容
本发明所要解决的技术问题是提供一种网页中图片的显示方法和装置,以解决现有技术中,用户需要拖动滚动条才能浏览整张尺寸较大的图片的问题。
为了解决上述问题,本发明公开了一种网页中图片的显示方法,包括:
对网页浏览器中加载网页的DOM树进行解析;
基于DOM树解析结果遍历并获取加载网页中的图片,并调整所述图片的图片尺寸参数至预定范围中;
在网页浏览器所处的系统桌面上创建一个显示窗口,显示所述遍历并获取的加载网页中的图片,其中所述遍历获取的图片包括所述调整后的图片。
优选的,所述加载网页为在对网页进行预加载时加载的网页。
优选的,所述基于DOM树解析结果遍历并获取加载网页中的图片的步骤包括:
在浏览器以本地缓存的网页进行预加载网页时,基于本地缓存的网页进行DOM树解析;
遍历DOM树获取包含有图片的节点;
从节点中获取所述网页中的图片信息。
优选的,所述调整图片的图片尺寸参数至预定范围中的步骤包括:
获取所述图片的尺寸信息;
对于像素尺寸大于桌面显示像素的图片,进行缩放处理至预定的桌面显示像素尺寸。
优选的,所述预定范围的图片尺寸为用户配置的。
优选的,所述在网页浏览器所处的系统桌面上创建一个显示窗口的步骤包括:
获取网页浏览器中所述图片所在页签的浏览器窗口;
获取浏览器窗口的容器窗口;
以容器窗口为父窗口创建一弹出类型的显示窗口。
优选的,所述显示所述遍历并获取的加载网页中的图片的步骤包括:
将所述图片信息转换为JSON对象;
循环JSON对象,转换为HTML结构的图片进行显示。
优选的,进一步包括:
在所述显示窗口中加载图片操作工具;
所述图片操作工具包括:下载图片工具、截图工具、放缩图片工具、分享图片工具、预加载下一网页中的图片工具中的至少一个。
优选的,所述显示所述遍历并获取的加载网页中的图片的步骤包括:
按照所述图片在网页中的顺序在桌面上的显示窗口内逐一显示。
优选的,进一步包括:接收用户操作,将所述在桌面上的显示窗口内显示的图片切换为相邻顺序的图片进行显示。
本发明还公开了一种网页中图片的显示装置,包括:
DOM树解析模块,其配置为对网页浏览器中加载网页的DOM树进行解析;
图片遍历获取模块,其配置为基于DOM树解析结果遍历并获取加载网页中的图片;
图片尺寸参数调整模块,其配置为并调整所述图片的图片尺寸参数至预定范围中;
显示窗口创建模块,其配置为在网页浏览器所处的系统桌面上创建一个显示窗口;
图片显示模块,其配置为显示所述遍历并获取的加载网页中的图片,其中所述遍历获取的图片包括所述调整后的图片。
优选的,所述加载网页为在对网页进行预加载时加载的网页。
优选的,所述图片遍历获取模块在浏览器以本地缓存的网页进行预加载网页时,基于本地缓存的网页进行DOM树解析,包括:
节点获取子模块,其配置为遍历DOM树获取包含有图片的节点;
图片信息获取子模块,其配置为从节点中获取所述网页中的图片信息。
优选的,所述图片尺寸参数调整模块包括:
尺寸信息获取子模块,其配置为获取所述图片的尺寸信息;
缩放处理子模块,其配置为对于像素尺寸大于桌面显示像素的图片,进行缩放处理至预定的桌面显示像素尺寸。
优选的,所述预定范围的图片尺寸为用户配置的。
优选的,所述显示窗口创建模块包括:
浏览器窗口获取子模块,其配置为获取网页浏览器中所述图片所在页签的浏览器窗口;
容器窗口获取子模块,其配置为获取浏览器窗口的容器窗口;
弹出类型的显示窗口创建子模块,其配置为以容器窗口为父窗口创建一弹出类型的显示窗口。
优选的,所述图片显示模块包括:
JSON对象转换子模块,其配置为将所述图片信息转换为JSON对象;
图片显示子模块,其配置为循环JSON对象,转换为HTML结构的图片进行显示。
优选的,进一步包括:
图片操作工具加载模块,其配置为在所述显示窗口中加载图片操作工具;
所述图片操作工具包括:下载图片工具、截图工具、放缩图片工具、分享图片工具、预加载下一网页中的图片工具中的至少一个。
优选的,所述图片显示模块按照所述图片在网页中的顺序在桌面上的显示窗口内逐一显示。
优选的,进一步包括:
图片切换模块,其配置为接收用户操作,将所述在桌面上的显示窗口内显示的图片切换为相邻顺序的图片进行显示。
与现有技术相比,本发明包括以下优点:
本发明提供的一种网页中图片的显示方法和装置,基于DOM树的解析结果,遍历并获取加载网页中的图片,并调整所述图片的图片尺寸参数至预定范围中,将遍历并获取的图片本在桌面上创建的窗口内显示和操作,其中所述遍历获取的图片包括所述调整后的图片。方便浏览网页中尺寸较大的图片,简便了用户对网页中图片的操作。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂,下面结合附图和具体实施方式对本发明作进一步详细的说明。
本发明提出的一种网页中的图片显示方法和装置,获取到网页中的图片,调整图片的尺寸参数至预定范围中,在桌面上进行显示和操作。本发明提出的一种网页中的图片显示方法和装置涉及到对文档对象模型(DocumentObject Model,DOM)进行解析。DOM是一种用于可扩展标记语言(Extensible Markup Language,XML)文档的对象模型,可用于直接访问XML文档的各个部分。在DOM中,文档被模拟为树状,其中XML语法的每个组成部分(例如元素或文本内容)都被表示为一个节点。作为一种应用程序编程接口(Application Programming Interface,API),DOM允许遍历文档树,从父节点移动到子节点和兄弟节点等,并可以利用各种节点类型特有的属性(元素具有属性)。
DOM树是指通过DOM将超文本标记语言(HyperText MarkupLanguage,HTML)页面进行解析,并生成HTML树树状结构和对应的访问方法。解析DOM树,能直接而且简易的操作HTML页面上的每个标记内容。
下面通过列举几个具体的实施例详细介绍本发明提出的一种网页中图片的显示方法和装置。
实施例一,详细介绍本发明所述一种网页中图片的显示方法。
参照图1,示出了本发明实施例一所述一种网页中图片的显示方法流程图。
步骤11,对网页浏览器中加载网页的DOM树进行解析;
网页浏览器在访问网页时,向网页所在的服务器发送各种请求,并对从服务器发来的超文本信息和各种多媒体数据格式进行解析、显示和播放。
在网页浏览器的上述工作过程中,网页所包含的信息和数据保存在DOM中,对DOM进行解析,形成DOM树,得到网页所包含的信息和数据等元素的结构和属性,再对DOM树进行解析,进一步得到网页中各元素的相关内容。所述网页中各元素的相关内容为DOM树解析后得到的解析结果。
例如,网页中的图片,在DOM树解析结果中包括图片的名称、大小以及尺寸参数等信息。
步骤12,基于DOM树解析结果遍历并获取加载网页中的图片,并调整所述图片的图片尺寸参数至预定范围中;
得到DOM树的解析结果后,逐一检测DOM树解析结果中的图片尺寸参数,并获取所述图片,将所述图片尺寸参数在预定范围外的图片进行尺寸参数调整,调整至预定范围中。
步骤13,在网页浏览器所处的系统桌面上创建一个显示窗口,显示所述遍历并获取的加载网页中的图片,其中所述遍历获取的图片包括所述调整后的图片。
在网页浏览器所处的操作系统桌面上创建一个显示窗口,此显示窗口可以是传统意义上操作系统中的一个实际窗口,也可以是一个虚拟出来的窗口,当作一个显示载体出现。
在创建的所述显示窗口内,包括在实际窗口和虚拟出来的窗口内,将遍历并获取的加载网页中的图片显示出来,所述遍历获取的图片包括所述调整后的图片和图片尺寸参数默认在预定范围中,不需要调整的图片。
综上所述,本发明实施例一所述的一种网页中的图片显示方法,与现有技术相比具有以下优点:
本发明实施例一提供的一种网页中图片的显示方法,基于DOM树的解析结果,遍历并获取加载网页中的图片,并调整所述图片的图片尺寸参数至预定范围中,,将遍历并获取的图片本在桌面上创建的窗口内显示和操作,其中所述遍历获取的图片包括所述调整后的图片。方便浏览网页中尺寸较大的图片,简便了用户对网页中图片的操作。
实施例二,详细介绍本发明所述一种网页中图片的显示方法。
参照图2,示出了本发明实施例二所述一种网页中图片的显示方法流程图。
步骤21,对网页浏览器中加载网页的DOM树进行解析;
网页浏览器在访问网页时,向网页所在的服务器发送各种请求,并对从服务器发来的超文本信息和各种多媒体数据格式进行解析、显示和播放。
在网页浏览器的上述工作过程中,网页所包含的信息和数据保存在DOM中,对DOM进行解析,形成DOM树,得到网页所包含的信息和数据等元素的结构和属性,再对DOM树进行解析,进一步得到网页中各元素的相关内容。所述网页中各元素的相关内容为DOM树解析后得到的解析结果。
例如,网页中的图片,在DOM树解析结果中包括图片的名称、大小以及尺寸参数等信息。
所述加载网页为在对网页进行预加载时加载的网页。
步骤22,基于DOM树解析结果遍历并获取加载网页中的图片,并调整所述图片的图片尺寸参数至预定范围中;
得到DOM树的解析结果后,逐一检测DOM树解析结果中的图片尺寸参数,并获取所述图片,将所述图片尺寸参数在预定范围外的图片进行尺寸参数调整,调整至预定范围中。
所述预定范围的图片尺寸为用户配置的。
例如,预先范围的尺寸参数为"1024"≥width≥"800"、"768"≥height≥"600",表示为【800x600,1024x768】。
所述步骤22包括:
步骤221,在浏览器以本地缓存的网页进行预加载网页时,基于本地缓存的网页进行DOM树解析;
如果浏览器访问过当前网页,则当前网页中的网页元素等相关内容保存在本地缓存中,当浏览器再次访问该网页时,以本地缓存的网页进行预加载网页,并且也是基于本地缓存的网页进行DOM树解析。
步骤222,遍历DOM树获取包含有图片的节点;
DOM树包括许多节点,各节点内又包括各种网页元素内容,如有的节点内包含图片,有的几点内包含文字文本,有的节点内包含音视频文件。
遍历DOM树中的各个节点,从中获取到包含有图片的节点。
步骤223,从节点中获取所述网页中的图片信息;
在获取到包含有图片的节点后,从节点中获取所述网页中的图片信息,所述图片信息包括:图片的名称,图片的格式,图片的尺寸信息等。
步骤224,获取所述图片的尺寸信息;
在所述图片信息中获取出所述图片的尺寸信息。
步骤225,对于像素尺寸大于桌面显示像素的图片,进行缩放处理至预定的桌面显示像素尺寸;
如果桌面显示的最优像素为800x600,在获取的图片中,如果某一图片的像素尺寸为1280x800,则所述图片的像素尺寸大于桌面显示像素尺寸;对所述图片进行缩放处理,将所述图片的像素尺寸调整为800x600的桌面显示的最优像素尺寸。
步骤23,在网页浏览器所处的系统桌面上创建一个显示窗口,显示所述遍历并获取的加载网页中的图片,其中所述遍历获取的图片包括所述调整后的图片;
在网页浏览器所处的操作系统桌面上创建一个显示窗口,此显示窗口可以是传统意义上操作系统中的一个实际窗口,也可以是一个虚拟出来的窗口,当作一个显示载体出现。
在创建的所述显示窗口内,包括在实际窗口和虚拟出来的窗口内,将遍历并获取的加载网页中的图片显示出来,所述遍历获取的图片包括所述调整后的图片和图片尺寸参数默认在预定范围中,不需要调整的图片。
所述显示所述遍历并获取的加载网页中的图片的步骤包括:
按照所述图片在网页中的顺序在桌面上的显示窗口内逐一显示。
所述步骤23包括:
步骤231,获取网页浏览器中所述图片所在页签的浏览器窗口;
根据所述图片所在页签绑定的唯一ID,确定与所述ID对应的页签数据,获取其中的浏览器窗口。
步骤232,获取浏览器窗口的容器窗口;
获取到所述浏览器窗口后,根据所述浏览器窗口的属性信息,获取到容器窗口。
步骤233,以容器窗口为父窗口创建一弹出类型的显示窗口;
以所述容器窗口为父窗口,在桌面上创建弹出类型的显示窗口(具有ws_popup窗口风格);因为是以容器窗口为父窗口创建的,并且容器窗口为所述页签的浏览器窗口的容器窗口,所以显示窗口与所述页签有对应关系。
步骤234,将所述图片信息转换为JSON对象;
将所述图片信息转换为JSON对象,如
步骤235,循环JSON对象,转换为HTML结构的图片进行显示;
循环所述JSON对象,提取其中的“imgid”、“imgname”和“imgsize”等信息,并转换为HTML代码的结构显示所述图片。
步骤24,在所述显示窗口中加载图片操作工具;
所述图片操作工具包括:下载图片工具、截图工具、放缩图片工具、分享图片工具、预加载下一网页中的图片工具中的至少一个。
在所述显示窗口中可以加载一些对显示窗口或所述图片进行控制的工具,以丰富用户的操作体验。
步骤25,接收用户操作,将所述在桌面上的显示窗口内显示的图片切换为相邻顺序的图片进行显示。
可以通过鼠标左键点击所述显示窗口内显示的图片的左侧部分或者右侧部分,或者按下键盘的左、右键,控制显示图片的切换,将图片切换为上一张或者下一张进行显示。
实施例三,详细介绍本发明所述一种网页中图片的显示装置。
参照图3,示出了本发明实施例三所述一种网页中图片的显示装置结构图。
所述网页中图片的显示装置包括:
DOM树解析模块31,图片遍历获取模块32,图片尺寸参数调整模块33,显示窗口创建模块34,以及,图片显示模块35。
下面分别详细介绍各模块的功能以及模块之间的关系。
DOM树解析模块31,其配置为对网页浏览器中加载网页的DOM树进行解析;
所述DOM树解析模块31对网页浏览器中加载网页的DOM树进行解析,得到包括网页中各元素相关内容的DOM树解析结果。
图片遍历获取模块32,其配置为基于DOM树解析结果遍历并获取加载网页中的图片;
在所述DOM树解析模块31对DOM树进行解析后,所述图片遍历获取模块32基于DOM树解析结果,逐一检测DOM树解析结果中的图片尺寸参数,并获取所述图片。
图片尺寸参数调整模块33,其配置为并调整所述图片的图片尺寸参数至预定范围中;
所述图片尺寸参数调整模块33将所述图片尺寸参数在预定范围外的图片进行尺寸参数调整,调整至预定范围中。
显示窗口创建模块34,其配置为在网页浏览器所处的系统桌面上创建一个显示窗口;
所述显示窗口创建模块34在网页浏览器所处的操作系统桌面上创建一个显示窗口,此显示窗口可以是传统意义上操作系统中的一个实际窗口,也可以是一个虚拟出来的窗口,当作一个显示载体出现。
图片显示模块35,其配置为显示所述遍历并获取的加载网页中的图片,其中所述遍历获取的图片包括所述调整后的图片。
所述图片显示模块35在所述显示窗口创建模块34创建的所述显示窗口内,包括在实际窗口和虚拟出来的窗口内,将遍历并获取的加载网页中的图片显示出来,所述遍历获取的图片包括所述调整后的图片和图片尺寸参数默认在预定范围中,不需要调整的图片。
综上所述,本发明实施例三所述的一种网页中的图片显示装置,与现有技术相比具有以下优点:
本发明实施例三提供的一种网页中图片的显示装置,基于DOM树的解析结果,遍历并获取加载网页中的图片,并调整所述图片的图片尺寸参数至预定范围中,,将遍历并获取的图片本在桌面上创建的窗口内显示和操作,其中所述遍历获取的图片包括所述调整后的图片。方便浏览网页中尺寸较大的图片,简便了用户对网页中图片的操作。
实施例四,详细介绍本发明所述一种网页中图片的显示装置。
参照图4,示出了本发明实施例四所述一种网页中图片的显示装置结构图。
所述网页中图片的显示装置包括:
DOM树解析模块41,图片遍历获取模块42,图片尺寸参数调整模块43,显示窗口创建模块44,图片显示模块45,图片操作工具加载模块46,以及,图片切换模块47。
其中,所述图片遍历获取模块42包括:
节点获取子模块421,以及,图片信息获取子模块422。
所述图片尺寸参数调整模块43包括:
尺寸信息获取子模块431,以及,缩放处理子模块432。
所述显示窗口创建模块44包括:
浏览器窗口获取子模块441,容器窗口获取子模块442,以及,弹出类型的显示窗口创建子模块443。
所述图片显示模块45包括:
JSON对象转换子模块451,以及,图片显示子模块452。
下面分别详细介绍各模块的功能以及模块之间的关系。
DOM树解析模块41,其配置为对网页浏览器中加载网页的DOM树进行解析;
所述DOM树解析模块41对网页浏览器中加载网页的DOM树进行解析,得到包括网页中各元素相关内容的DOM树解析结果。
其中,所述加载网页为在对网页进行预加载时加载的网页。
所述DOM树解析模块41在浏览器以本地缓存的网页进行预加载网页时,基于本地缓存的网页进行DOM树解析。
如果浏览器访问过当前网页,则当前网页中的网页元素等相关内容保存在本地缓存中,当浏览器再次访问该网页时,所述DOM树解析模块41以本地缓存的网页进行预加载网页,并且也是基于本地缓存的网页进行DOM树解析。
图片遍历获取模块42,其配置为基于DOM树解析结果遍历并获取加载网页中的图片;
所述图片遍历获取模块42基于所述DOM树解析模块41解析得到的DOM树解析结果,逐一检测DOM树解析结果中的图片尺寸参数,并获取所述图片。
所述图片遍历获取模块42包括:
节点获取子模块421,其配置为遍历DOM树获取包含有图片的节点;
DOM树包括许多节点,各节点内又包括各种网页元素内容,如有的节点内包含图片,有的几点内包含文字文本,有的节点内包含音视频文件。
所述节点获取子模块421遍历DOM树中的各个节点,从中获取到包含有图片的节点。
图片信息获取子模块422,其配置为从节点中获取所述网页中的图片信息;
在所述节点获取子模块421获取到包含有图片的节点后,所述图片信息获取子模块422从节点中获取所述网页中的图片信息,所述图片信息包括:图片的名称,图片的格式,图片的尺寸信息等。
图片尺寸参数调整模块43,其配置为并调整所述图片的图片尺寸参数至预定范围中;
所述图片尺寸参数调整模块43将所述图片尺寸参数在预定范围外的图片进行尺寸参数调整,调整至预定范围中。
所述预定范围的图片尺寸为用户配置的。
例如,预先范围的尺寸参数为"1024"≥width≥"800"、"768"≥height≥"600",表示为【800x600,1024x768】。
所述图片尺寸参数调整模块43包括:
尺寸信息获取子模块431,其配置为获取所述图片的尺寸信息;
所述尺寸信息获取子模块431在所述图片信息中获取出所述图片的尺寸信息。
缩放处理子模块432,其配置为对于像素尺寸大于桌面显示像素的图片,进行缩放处理至预定的桌面显示像素尺寸;
如果桌面显示的最优像素为800x600,在获取的图片中,如果某一图片的像素尺寸为1280x800,则所述图片的像素尺寸大于桌面显示像素尺寸;所述缩放处理子模块432对所述图片进行缩放处理,将所述图片的像素尺寸调整为800x600的桌面显示的最优像素尺寸。
显示窗口创建模块44,其配置为在网页浏览器所处的系统桌面上创建一个显示窗口;
所述显示窗口创建模块44在网页浏览器所处的操作系统桌面上创建一个显示窗口,此显示窗口可以是传统意义上操作系统中的一个实际窗口,也可以是一个虚拟出来的窗口,当作一个显示载体出现。
所述显示窗口创建模块44包括:
浏览器窗口获取子模块441,其配置为获取网页浏览器中所述图片所在页签的浏览器窗口;
所述浏览器窗口获取子模块441根据所述图片所在页签绑定的唯一ID,确定与所述ID对应的页签数据,获取其中的浏览器窗口。
容器窗口获取子模块442,其配置为获取浏览器窗口的容器窗口;
在所述浏览器窗口获取子模块441获取到所述浏览器窗口后,所述容器窗口获取子模块442根据所述浏览器窗口的属性信息,获取到容器窗口。
弹出类型的显示窗口创建子模块443,其配置为以容器窗口为父窗口创建一弹出类型的显示窗口;
所述弹出类型的显示窗口创建子模块443以所述容器窗口为父窗口,在桌面上创建弹出类型的显示窗口(具有ws_popup窗口风格)。
图片显示模块45,其配置为显示所述遍历并获取的加载网页中的图片,其中所述遍历获取的图片包括所述调整后的图片;
在所述显示窗口创建模块44创建的所述显示窗口内,包括在实际窗口和虚拟出来的窗口内,所述图片显示模块45将遍历并获取的加载网页中的图片显示出来,所述遍历获取的图片包括所述调整后的图片和图片尺寸参数默认在预定范围中,不需要调整的图片。
所述图片显示模块45按照所述图片在网页中的顺序在桌面上的显示窗口内逐一显示。
所述图片显示模块45包括:
JSON对象转换子模块451,其配置为将所述图片信息转换为JSON对象;
所述JSON对象转换子模块451将所述图片信息转换为JSON对象。
图片显示子模块452,其配置为循环JSON对象,转换为HTML结构的图片进行显示;
所述图片显示子模块452循环所述JSON对象,提取其中的与图片相关的属性信息等,最主要的是图片的尺寸参数信息,并转换为HTML代码的结构显示所述图片。
图片操作工具加载模块46,其配置为在所述显示窗口中加载图片操作工具;
所述图片操作工具包括:下载图片工具、截图工具、放缩图片工具、分享图片工具、预加载下一网页中的图片工具中的至少一个。
所述图片操作工具加载模块46在所述显示窗口中可以加载一些对显示窗口或所述图片进行控制的工具,以丰富用户的操作体验。
图片切换模块47,其配置为接收用户操作,将所述在桌面上的显示窗口内显示的图片切换为相邻顺序的图片进行显示。
所述图片切换模块47可以接收到用户鼠标左键点击所述显示窗口内显示的图片的左侧部分或者右侧部分,或者按下键盘的左、右键等操作,控制显示图片的切换,将图片切换为上一张或者下一张进行显示。
对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明实施例并不受所描述的动作顺序的限制,因为依据本发明实施例,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本发明实施例所必须的。
对于装置实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。
上述本发明实施例中的方法和装置适用于各种网络或者客户端环境中,例如可以实现在诸如个人计算机设备之类的计算机设备中,或者可以实现在诸如移动电话、移动通信设备、个人数字助理(PDA)等其他便携式电子设备或者非便携式电子设备中。因此本领域技术人员要明确的是,本发明的保护范围并不限于PC上运行浏览器中的调整图片尺寸参数的功能和在创建的显示窗口内显示所述遍历并获取以及尺寸参数调整后的图片的功能,仅是出于描述的简洁和方便而在本发明实施例中采用了PC上运行浏览器中的复制文本字幕信息功能和在创建的显示窗口内显示文本字幕信息功能进行描述。
以上对本发明所提供的一种网页中图片的显示方法和装置,进行了详细介绍,本文中应用了具体个例对本发明的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本发明的方法及其核心思想;同时,对于本领域的一般技术人员,依据本发明的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本发明的限制。