一种用于生成与页面对应的图片的方法与设备与流程
本发明涉及计算机技术领域，尤其涉及一种用于生成与页面对应的图片的技术。
背景技术：
现有技术中，实现页面截图的方式大多为通过调用第三方截图工具或系统自带的截图功能对显示屏幕的图像进行截取，而没有直接针对页面内容进行截图的有效解决方案，因而当用户希望截图的页面呈现的页面内容信息一屏不能全部显示时，该用户将无法获得其目标页面信息所对应的完整图像。
因此，如何有效地生成与页面对应的图片，成为目前亟待解决的问题之一。
技术实现要素：
本发明的目的是提供一种用于生成与页面对应的图片的方法与设备。
根据本发明的一个方面，提供了一种计算机实现的用于生成与页面对应的图片的方法，该方法包括以下步骤：
a获取待处理的页面内容信息；
b根据所述页面内容信息，对所述页面内容信息进行解析，以获得与所述页面内容信息相对应的DOM树；
其中，还包括以下步骤：
x基于该DOM树，对该页面内容信息进行渲染处理，以获得可用于页面呈现的页面像素信息；
y基于所述页面像素信息来生成与所述页面对应的图片文件。
根据本发明的另一方面，还提供了一种用于生成与页面对应的图片的设备，该设备包括：
页面信息获取装置，用于获取待处理的页面内容信息；
DOM树获取装置，用于根据所述页面内容信息，对所述页面内容信息进行解析，以获得与所述页面内容信息相对应的DOM树；
其中，该设备还包括：
第一信息获取装置，用于基于该DOM树，对该页面内容信息进行渲染处理，以获得可用于页面呈现的页面像素信息；
第一图片生成装置，用于基于所述页面像素信息来生成与所述页面对应的图片文件。
与现有技术相比，本发明根据已获取的网页内容信息，如基于HTML的页面文件、基于CSS的页面文件、基于JavaScript的页面文件等，对该等网页内容信息进行解析以获得与该等网页内容信息相对应的DOM树；并基于该DOM树，对该页面内容信息进行渲染处理，以获得可用于页面呈现的页面像素信息，随后基于该页面像素信息来生成与该页面对应的图片文件；从而实现了当页面呈现的页面内容信息一屏不能全部显示时，也可生成与其对应的完整图片的目的；进一步还使得根据用户需求生成与页面对应的经缩放处理后的图片或经色调调整后的图片成为可能，以提高用户使用体验。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：
图1示出根据本发明一个方面的用于生成与页面对应的图片的设备示意图；
图2示出根据本发明一个方面的用于生成与页面对应的图片的一个示例图；
图3示出根据本发明一个方面的用于生成与页面对应的图片的另一示例图；
图4示出根据本发明一个优选实施例的用于生成与页面对应的图片的设备示意图；
图5示出根据本发明又一优选实施例的用于生成与页面对应的图片的设备示意图；
图6示出根据本发明另一优选实施例的用于生成与页面对应的图片的设备示意图；
图7示出根据本发明另一个方面的用于生成与页面对应的图片的方法流程图；
图8示出根据本发明一个优选实施例的用于生成与页面对应的图片的方法流程图；
图9示出根据本发明又一优选实施例的用于生成与页面对应的图片的方法流程图；
图10示出根据本发明另一优选实施例的用于生成与页面对应的图片的方法流程图。
附图中相同或相似的附图标记代表相同或相似的部件。
具体实施方式
下面结合附图对本发明作进一步详细描述。
图1示出根据本发明一个方面的用于生成与页面对应的图片的设备示意图。其中，生成设备1包括页面信息获取装置111、DOM树获取装置112、第一信息获取装置113和第一图片生成装置114。
在此，生成设备1可以是一个网络设备或位于其中的功能模块，其中，网络设备包括但不限于计算机、网络主机、单个网络服务器、多个网络服务器集或多个服务器构成的云，在此，云由基于云计算(Cloud Computing)的大量计算机或网络服务器构成，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个超级虚拟计算机。
以下参照图1来对生成设备1生成与页面对应的图片的过程进行详细描述：
具体地，首先，页面信息获取装置111获取待处理的页面内容信息。
在此，所述页面内容信息包括但不限于以下任一项：
1)基于HTML的页面文件，如HTML5文件；
2)基于CSS(层叠样式表)的页面文件，其为一种用来为结构化文档(如HTML文件)添加样式(字体、间距和颜色等)的计算机语言；
3)基于JavaScript的页面文件。
本领域技术人员应能理解上述页面内容信息仅为举例，其他现有的或今后可能出现的页面内容信息如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
在此，所述获取页面内容信息的方式包括但不限于以下任一情形：
1)根据用户通过用户设备输入的页面访问请求，从该页面访问请求中的统一资源定位符(URL)所指向的网站服务器处获取相应的原始网页；
在一示例中，首先，用户借助用户设备的交互装置，包括但不限于键盘、鼠标、遥控器、触摸板、或手写设备，与用户设备的浏览器软件或客户端软件进行交互，以键盘为例，用户在用户设备的浏览器软件的地址栏输入框中进行输入时，该用户设备实时地获取用户输入的按键序列，例如用户输入的一条统一资源定位符(URL)，并记录为与该用户输入操作相对应的页面访问请求，其中，该页面访问请求中包括该URL；接着，该用户设备从该页面访问请求中提取页面URL，并向该URL所指向网页所在的网络服务器发送获取该网页的请求，例如，可将其封装为一请求消息，如http请求消息，并通过相应的通信协议，如http、https通信协议，发送至该网络服务器；随后，生成设备1接收该网络服务器响应于该请求而反馈的网页，页面信息获取装置111提取该网页中的待处理的页面内容信息，如HTML文件、JavaScript、CSS等。
在此，用户设备与网络服务器之间可通过任何通信方式实现通信，包括但不限于，基于3GPP、LTE、WIMAX的移动通信、基于TCP/IP、UDP协议的计算机网络通信以及基于蓝牙、红外传输标准的近距无线传输方式。
2)从第三方设备中获取待处理的页面内容信息。
在另一示例中，页面信息获取装置111根据第三方设备提供的应用编程接口(API)，受预定条件或事件触发地、或定期地向该第三方设备发送接收网页的请求消息，并接收该第三方设备响应于该请求消息返回的网页，页面信息获取装置111从其中提取待处理的页面内容信息；或第三方设备主动向生成设备1推送网页，生成设备1接收该网页，接着，页面信息获取装置111从其中提取待处理的页面内容信息。
本领域技术人员应能理解上述获取待处理的页面内容信息的方式仅为举例，其他现有的或今后可能出现的获取待处理的页面内容信息的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
接着，DOM树获取装置112根据页面信息获取装置111获取的页面内容信息，对该等页面内容信息进行解析，以获得与该等页面内容信息相对应的DOM树。
在此，所述DOM树即为文档对象模型，其意指通过对标记语言文件进行解析而获得的树结构数据，该树中的各节点与标记语言文件中的标签以及标签内容相对应，通过该DOM树可操作标记语言文件中的数据；DOM树的每个节点表现为一个标记语言文件标签或者标记语言文件标签内的文本项，树形结构精确地描述了标记语言文件中标签间以及文本项间的相互关联关系，这种关联关系包括child(孩子)关系、parent(双亲)关系和sibling(兄弟)关系。
具体地，DOM树获取装置112遍历HTML文件，提取该HTML文件的标签及文本项内容，并同时执行构建DOM树的过程：首先确定以，例如标签<html>，为根的DOM树，然后将各个标签及文本项内容附加到树上；从而基于该等标签、文本项间内容以及其相互关联关系，以构建DOM树。
在一示例中，页面内容信息中的HTML文件如下：
在创建DOM树的过程中，DOM树获取装置112遍历该HTML文件，首先，提取标签<html>，从而创建以<html>为根节点R0的DOM树；接着，DOM树获取装置112提取到标签<body>，从而自动将该标签<body>添加到该DOM树中，以作为根节点R0的子节点R1；同理，随后提取到标签<p>，将该标签<P>添加到该DOM树中，以作为根节点R1的子节点R11；然后，DOM树获取装置112提取到字符串“Hello world！”，从而为该DOM树自动创建文本节点R111，其包括该字符串文本内容；根据预定的解析方式中示出的文本节点不会再包括子节点，当DOM树获取装置112提取到标签<div>时，会将该标签作为标签<body>对应的节点R1的子节点R12；同理可确定标签<imgsrc＝“example.png”/></div>为节点R12的子节点R121；直至该HTML文件结束，该DOM树的构建过程结束。
本领域技术人员应能理解上述获取DOM树的方式仅为举例，其他现有的或今后可能出现的获取DOM树的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
接着，第一信息获取装置113基于DOM树获取装置112获取的DOM树，对该页面内容信息进行渲染处理，以获得可用于页面呈现的页面像素信息。
在此，所述页面像素信息包括但不限于每一像素的位置坐标、分辨率、颜色信息、亮度信息等。
在一示例中，第一信息获取装置113解析页面内容信息中的CSS文件等样式信息，进而根据该等样式信息以及HTML文件中的样式相关指令构建渲染树(Render树)，基于该DOM树，将其各个节点映射至该渲染树对应的节点上；其中，渲染树由DOM树中的可见节点元素组成，它是文档的可视化表示，构建该渲染树是为了以正确的顺序绘制页面呈现的内容；随后，第一信息获取装置113对该渲染树中从根节点开始，从左到右，从到上下层级执行布局，以确定该渲染树中的节点在图像中的位置坐标、分辨率、颜色、亮度等，将其作为页面像素信息；在此，该页面像素信息可保存在显存中，也可存储在预定存储区域，以用于生成图片。
本领域技术人员应能理解上述获取页面像素信息的方式仅为举例，其他现有的或今后可能出现的获取页面像素信息的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
随后，第一图片生成装置114基于第一信息获取装置113获取的页面像素信息来生成与页面对应的图片文件。
在此，生成图片文件的方式包括但不限于：
-DOM树获取装置112在构建DOM树的过程中，在该DOM树的根节点处插入一绘图文件项；当第一图片生成装置114基于该DOM树，对该页面内容信息进行渲染处理时，该绘图文件项被调用，以基于该页面像素信息来生成与页面对应的图片文件。
在此，所述绘图文件项包括但不限于HTML5中的canvas元素；可通过调用其提供的应用编程接口(API)实现绘制图像功能。
本领域技术人员应能理解上述绘图文件项仅为举例，其他现有的或今后可能出现的绘图文件项如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
在一示例中，当HTML文件为HTML5时，如图3所示，首先，DOM树获取装置112在构建DOM树的过程中，首先，提取标签<html>，从而创建以<html>为根节点R0的DOM树，接着根据预定规则，执行创建新标签，如调用CreateElement方法：
var newNode＝document.createElement(“canvas”)
在该DOM树的根节点下插入canvas节点R2，即将canvas节点添加为该DOM树根节点的子节点；接着，当第一图片生成装置114基于该DOM树对该页面内容信息进行渲染处理时，该<canvas>节点被调用，该canvas节点可通过调用预定的应用编程接口(API)，如DrawWindow，从预定存储区域中获取该canvas节点下面的所有节点对应的页面元素的通过渲染处理获得的页面像素信息，执行绘图功能以生成与该页面对应的图片文件。
本领域技术人员应能理解上述插入绘图文件项的方式和/或生成图片文件的方式仅为举例，其他现有的或今后可能出现的插入绘图文件项的方式和/或生成图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
在此，所述图片文件的格式包括但不限于以下至少任一项：
1)PNG；
2)JPEG；
3)BMP。
本领域技术人员应能理解上述图片文件的格式仅为举例，其他现有的或今后可能出现的图片文件的格式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
本领域技术人员应能理解上述生成图片文件的方式仅为举例，其他现有的或今后可能出现的生成图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
优选地，生成设备1中的页面信息获取装置111、DOM树获取装置112、第一信息获取装置113和第一图片生成装置114之间是持续不断地工作。具体地，页面信息获取装置111获取待处理的页面内容信息；接着，DOM树获取装置112也持续地根据所述页面内容信息，对所述页面内容信息进行解析，以获得与所述页面内容信息相对应的DOM树；随后，第一信息获取装置113也持续地基于该DOM树，对该页面内容信息进行渲染处理，以获得可用于页面呈现的页面像素信息；随后，第一图片生成装置114也持续地基于所述页面像素信息来生成与所述页面对应的图片文件。在此，本领域技术人员应理解“持续”是指各装置不断进行上述页面内容信息的获取、DOM树的获取、页面像素信息的获取及图片文件的生成，直至满足预定停止条件，例如页面信息获取装置111在较长时间内停止对待处理的页面内容信息的获取。
图4示出根据本发明一个优选实施例的用于生成与页面对应的图片的设备示意图。其中，生成设备1还包括处理信息获取装置215。
在此，图4中所示装置211、212、213和214的功能与前面参照图1所描述的装置111、112、113和114的内容相同，为简明起见，将其以引用方式包含于此，而不做赘述。
具体地，处理信息获取装置215获取用户输入的图像处理信息；其中，所述第一图片生成装置214根据该图像处理信息，并基于页面像素信息来生成与页面对应的经图像处理后的图片文件。
在此，所述图像处理信息包括但不限于以下任一项：
1)缩放比例信息；其包括：缩小比例信息和放大比例信息；
2)色调调整信息；其包括但不限于：灰度调节信息、黑白调节信息等。
本领域技术人员应能理解上述图像处理信息仅为举例，其他现有的或今后可能出现的图像处理信息如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
在一示例中，首先，用户借助用户设备的交互装置，包括但不限于键盘、鼠标、遥控器、触摸板、或手写设备，与用户设备的浏览器软件或客户端软件进行交互，以键盘为例，用户在用户设备的浏览器软件的缩放比例输入框中进行输入时，该用户设备实时地获取用户输入的按键序列，例如用户输入“1/2”，并记录为与该用户输入操作相对应的缩放比例，然后将该缩放比例通过预定的通信方式发送到生成设备1；接着，处理信息获取装置215实时地接收该缩放比例。
接着，第一图片生成装置214根据该图像处理信息，并基于页面像素信息来生成与页面对应的经图像处理后的图片文件的方式包括但不限于以下任一项：
1)根据图像处理信息，对页面像素信息进行相应的图像处理，获得经图像处理后的页面像素信息；随后基于该经图像处理后的页面像素信息，来生成经图像处理后的图片文件；该方式的具体实施例将在后续予以详细阐述；
2)基于页面像素信息，来生成与页面对应的原始图片文件；随后根据图像处理信息，对该原始图片文件进行相应的图像处理，以获得经图像处理的图片文件；该方式的具体实施例将在后续予以详细阐述。
本领域技术人员应能理解上述获取图像处理信息的方式和/或生成图片文件的方式仅为举例，其他现有的或今后可能出现的获取图像处理信息的方式和/或生成图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
图5示出根据本发明又一优选实施例的用于生成与页面对应的图片的设备示意图。其中，第一图片生成装置314包括第二信息获取单元3141和第二图片生成单元3142。
在此，图5中所示装置311、312、313和315的功能与前面参照图4所描述的装置211、212、213和215的内容相同，为简明起见，将其以引用方式包含于此，而不做赘述。
第二信息获取单元3141根据处理信息获取装置315获取的图像处理信息，对页面像素信息进行相应的图像处理，获得经图像处理后的页面像素信息；第二图片生成单元3142基于第二信息获取单元3141获得的经图像处理后的页面像素信息，来生成经图像处理后的图片文件。
在此，所述根据图像处理信息对页面像素信息进行相应的图像处理，以获得经图像处理后的页面像素信息包括但不限于以下任一情形：
1)当图像处理信息为缩小比例信息时，第二信息获取单元3141通过等间采样的图像缩小方法、基于局部均值的图像缩小方法等，对页面像素信息中的像素信息进行抽样，以获得经缩小处理后的页面像素信息；
2)当图像处理信息为放大比例信息时，第二信息获取单元3141通过最近领域插值法、双线性插值法、双三次插值法等，对页面像素信息中的像素信息进行插值处理，以获得经放大处理后的页面像素信息；
3)当图像处理信息为色调调整信息中的灰度调节信息时，第二信息获取单元3141通过预定的色阶调节指数，对页面像素信息中的像素信息进行色阶调节处理，以获得经灰度调节处理后的页面像素信息；在此，所述色阶是指灰度分辨率，所述色阶调节即通过调整图像的阴影、中间调和高光的强度级别等，从而校正图像的色调范围和色彩平衡。
在一示例中，缩放比例信息示出放大至原页面展示图像的2倍，且该原页面展示图像的页面像素信息如以下公式1)所示矩阵F(i，j)标识，该矩阵大小为2×4(M×N)(i＝1，2；j＝1，2，3，4)，其中，该矩阵的行列值代表该原页面展示图像的页面像素信息：
第二信息获取单元3141通过最近领域法，将该页面像素信息添加至放大后的图像的2×2的子块中，即放大后的页面像素信息为H(i，j)，如以下公式2)所示，大小为4×8(＝2M×2N)：
接着，第二图片生成单元3142在基于DOM树对该页面内容信息进行渲染处理时，DOM树获取装置312在该DOM树根节点下插入的<canvas>节点被调用，则该canvas节点可通过调用预定的API从预定存储区域中获取该canvas节点下面的所有节点对应的页面元素的经图像处理后的页面像素信息，执行绘图功能以生成与该页面对应的图片文件来生成经图像处理后的图片文件。
本领域技术人员应能理解上述获取经图像处理后的页面像素信息的方式和/或生成图片文件的方式仅为举例，其他现有的或今后可能出现的获取经图像处理后的页面像素信息的方式和/或生成图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
图6示出根据本发明另一优选实施例的用于生成与页面对应的图片的设备示意图。其中，第一图片生成装置414包括第三图片生成单元4141和处理图片获取单元4142。
在此，图6中所示装置411、412、413和415的功能与前面参照图4所描述的装置211、212、213和215的内容相同，为简明起见，将其以引用方式包含于此，而不做赘述。
具体地，第三图片生成单元4141基于第一信息获取装置413获取的页面像素信息，来生成与页面对应的原始图片文件。
在一示例中，当第三图片生成单元4141基于DOM树对页面内容信息进行渲染处理时，DOM树获取装置412在该DOM树根节点下插入的<canvas>节点被调用，则该canvas节点可通过调用预定的API从预定存储区域中获取该canvas节点下面的所有节点对应的页面元素的原始的页面像素信息，执行绘图功能以生成与该页面对应的原始图片文件。
接着，处理图片获取单元4142根据处理信息获取装置415获取的图像处理信息，对第三图片生成单元4141获取的原始图片文件进行相应的图像处理，以获得经图像处理的图片文件。
在此，所述获得经图像处理的图片文件的方式包括但不限于以下任一项：
1)根据图像处理信息，如缩放处理信息和/或色调调节信息，对原始图片文件进行相应的缩放处理和/或色调调节，已生成经图像处理的图片文件；
2)根据图像处理信息，在图片存储库中进行匹配查询，以获得与原始图片文件对应的且已经根据该图像处理信息处理后的图片文件；在此，所述图片存储库中包括原始图片文件及与其对应的经图像处理的图片文件；其包括但不限于关系数据库、Key-Value存储系统、文件系统等中。
在一示例中，当图像处理信息为缩小至原图像的1/2时，首先，处理图片获取单元4142提取第三图片生成单元4141获取的原始图片文件的像素信息，且用矩阵F(i，j)标识，该矩阵大小为2×4(M×N)(i＝1，2；j＝1，2，3，4)，其中，该矩阵的行列值代表原图像的像素信息；接着，根据该缩小比例信息，通过等间采样的图像缩小方法对已提取的原始图片文件的像素信息进行抽样，以获得抽样处理后的像素信息G(i，j)，如以下公式3)所示，其大小为1×2(＝(1/2)M×(1/2)N)：
G＝[f12 f14] 3)
并将该抽样处理后的像素信息存储在预定存储区域中；接着，处理图片获取单元4142通过调用预定的应用编程接口(API)，从图片存储库中进行匹配查询，获得与该抽样处理后的像素信息G(i，j)相对应的图片，以作为缩小后的图片文件。
本领域技术人员应能理解上述获取生成原始图片文件的方式和/或获得经图像处理的图片文件的方式仅为举例，其他现有的或今后可能出现的获取生成原始图片文件的方式和/或获得经图像处理的图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
图7示出根据本发明一个方面的用于生成与页面对应的图片的方法流程图。
在此，生成设备1可以是一个网络设备或位于其中的功能模块，其中，网络设备包括但不限于计算机、网络主机、单个网络服务器、多个网络服务器集或多个服务器构成的云，在此，云由基于云计算(Cloud Computing)的大量计算机或网络服务器构成，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个超级虚拟计算机。
以下参照图7来对生成设备1生成与页面对应的图片的过程进行详细描述：
具体地，首先，在步骤S501中，生成设备1获取待处理的页面内容信息。
在此，所述页面内容信息包括但不限于以下任一项：
1)基于HTML的页面文件，如HTML5文件；
2)基于CSS(层叠样式表)的页面文件，其为一种用来为结构化文档(如HTML文件)添加样式(字体、间距和颜色等)的计算机语言；
3)基于JavaScript的页面文件。
本领域技术人员应能理解上述页面内容信息仅为举例，其他现有的或今后可能出现的页面内容信息如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
在此，所述获取页面内容信息的方式包括但不限于以下任一情形：
1)根据用户通过用户设备输入的页面访问请求，从该页面访问请求中的统一资源定位符(URL)所指向的网站服务器处获取相应的原始网页；
在一示例中，首先，用户借助与用户设备的交互方式，包括但不限于键盘、鼠标、遥控器、触摸板、或手写设备，与用户设备的浏览器软件或客户端软件进行交互，以键盘为例，用户在用户设备的浏览器软件的地址栏输入框中进行输入时，该用户设备实时地获取用户输入的按键序列，例如用户输入的一条统一资源定位符(URL)，并记录为与该用户输入操作相对应的页面访问请求，其中，该页面访问请求中包括该URL；接着，该用户设备从该页面访问请求中提取页面URL，并向该URL所指向网页所在的网络服务器发送获取该网页的请求，例如，可将其封装为一请求消息，如http请求消息，并通过相应的通信协议，如http、https通信协议，发送至该网络服务器；随后，生成设备1接收该网络服务器响应于该请求而反馈的网页，在步骤S501中，生成设备1提取该网页中的待处理的页面内容信息，如HTML文件、JavaScript、CSS等。
在此，用户设备与网络服务器之间可通过任何通信方式实现通信，包括但不限于，基于3GPP、LTE、WIMAX的移动通信、基于TCP/IP、UDP协议的计算机网络通信以及基于蓝牙、红外传输标准的近距无线传输方式。
2)从第三方设备中获取待处理的页面内容信息。
在另一示例中，在步骤S501中，生成设备1根据第三方设备提供的应用编程接口(API)，受预定条件或事件触发地、或定期地向该第三方设备发送接收网页的请求消息，并接收该第三方设备响应于该请求消息返回的网页，生成设备1从其中提取待处理的页面内容信息；或第三方设备主动向生成设备1推送网页，生成设备1接收该网页，接着，在步骤S501中，生成设备1从其中提取待处理的页面内容信息。
本领域技术人员应能理解上述获取待处理的页面内容信息的方式仅为举例，其他现有的或今后可能出现的获取待处理的页面内容信息的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
接着，在步骤S502中，生成设备1根据其在步骤S501中获取的页面内容信息，对该等页面内容信息进行解析，以获得与该等页面内容信息相对应的DOM树。
在此，所述DOM树即为文档对象模型，其意指通过对标记语言文件进行解析而获得的树结构数据，该树中的各节点与标记语言文件中的标签以及标签内容相对应，通过该DOM树可操作标记语言文件中的数据；DOM树的每个节点表现为一个标记语言文件标签或者标记语言文件标签内的文本项，树形结构精确地描述了标记语言文件中标签间以及文本项间的相互关联关系，这种关联关系包括child(孩子)关系、parent(双亲)关系和sibling(兄弟)关系。
具体地，在步骤S502中，生成设备1遍历HTML文件，提取该HTML文件的标签及文本项内容，并同时执行构建DOM树的过程：首先确定以，例如标签<html>，为根的DOM树，然后将各个标签及文本项内容附加到树上；从而基于该等标签、文本项间内容以及其相互关联关系，以构建DOM树。
在一示例中，页面内容信息中的HTML文件如下：
在创建DOM树的过程中，在步骤S502中，生成设备1遍历该HTML文件，首先，提取标签<html>，从而创建以<html>为根节点R0的DOM树；接着，生成设备1提取到标签<body>，从而自动将该标签<body>添加到该DOM树中，以作为根节点R0的子节点R1；同理，随后提取到标签<p>，将该标签<P>添加到该DOM树中，以作为根节点R1的子节点R11；然后，生成设备1提取到字符串“Hello world！”，从而为该DOM树自动创建文本节点R111，其包括该字符串文本内容；根据预定的解析方式中示出的文本节点不会再包括子节点，当生成设备1提取到标签<div>时，会将该标签作为标签<body>对应的节点R1的子节点R12；同理可确定标签<img src＝“example.png”/></div>为节点R12的子节点R121；直至该HTML文件结束，该DOM树的构建过程结束。
本领域技术人员应能理解上述获取DOM树的方式仅为举例，其他现有的或今后可能出现的获取DOM树的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
接着，在步骤S503中，生成设备1基于其在步骤S502中获取的DOM树，对该页面内容信息进行渲染处理，以获得可用于页面呈现的页面像素信息。
在此，所述页面像素信息包括但不限于每一像素的位置坐标、分辨率、颜色信息、亮度信息等。
在一示例中，在步骤S503中，生成设备1解析页面内容信息中的CSS文件等样式信息，进而根据该等样式信息以及HTML文件中的样式相关指令构建渲染树(Render树)，基于该DOM树，将其各个节点映射至该渲染树对应的节点上；其中，渲染树由DOM树中的可见节点元素组成，它是文档的可视化表示，构建该渲染树是为了以正确的顺序绘制页面呈现的内容；随后，生成设备1对该渲染树中从根节点开始，从左到右，从到上下层级执行布局，以确定该渲染树中的节点在图像中的位置坐标、分辨率、颜色、亮度等，将其作为页面像素信息；在此，该页面像素信息可保存在显存中，也可存储在预定存储区域，以用于生成图片。
本领域技术人员应能理解上述获取页面像素信息的方式仅为举例，其他现有的或今后可能出现的获取页面像素信息的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
随后，在步骤S504中，生成设备1基于其在步骤S503中获取的页面像素信息来生成与页面对应的图片文件。
在此，生成图片文件的方式包括但不限于：
-在步骤S502中，生成设备1在构建DOM树的过程中，在该DOM树的根节点处插入一绘图文件项；当生成设备1在步骤S504中基于该DOM树，对该页面内容信息进行渲染处理时，该绘图文件项被调用，以基于该页面像素信息来生成与页面对应的图片文件。
在此，所述绘图文件项包括但不限于HTML5中的canvas元素；可通过调用其提供的应用编程接口(API)实现绘制图像功能。
本领域技术人员应能理解上述绘图文件项仅为举例，其他现有的或今后可能出现的绘图文件项如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
在一示例中，当HTML文件为HTML5时，如图3所示，首先，在步骤S502中，生成设备1在构建DOM树的过程中，首先，提取标签<html>，从而创建以<html>为根节点R0的DOM树，接着根据预定规则，执行创建新标签，如调用CreateElement方法：
var newNode＝document.createElement(“canvas”)
在该DOM树的根节点下插入canvas节点R2，即将canvas节点添加为该DOM树根节点的子节点；接着，当生成设备1在步骤S504中基于该DOM树对该页面内容信息进行渲染处理时，该<canvas>节点被调用，该canvas节点可通过调用预定的应用编程接口(API)，如DrawWindow，从预定存储区域中获取该canvas节点下面的所有节点对应的页面元素的通过渲染处理获得的页面像素信息，执行绘图功能以生成与该页面对应的图片文件。
本领域技术人员应能理解上述插入绘图文件项的方式和/或生成图片文件的方式仅为举例，其他现有的或今后可能出现的插入绘图文件项的方式和/或生成图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
在此，所述图片文件的格式包括但不限于以下至少任一项：
1)PNG；
2)JPEG；
3)BMP。
本领域技术人员应能理解上述图片文件的格式仅为举例，其他现有的或今后可能出现的图片文件的格式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
本领域技术人员应能理解上述生成图片文件的方式仅为举例，其他现有的或今后可能出现的生成图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
优选地，生成设备1在步骤S501、步骤S502、步骤S503和步骤S504中是持续不断地工作。具体地，在步骤S501中，生成设备1获取待处理的页面内容信息；接着，在步骤S502中，生成设备1也持续地根据所述页面内容信息，对所述页面内容信息进行解析，以获得与所述页面内容信息相对应的DOM树；随后，在步骤S503中，生成设备1也持续地基于该DOM树，对该页面内容信息进行渲染处理，以获得可用于页面呈现的页面像素信息；随后，在步骤S504中，生成设备1也持续地基于所述页面像素信息来生成与所述页面对应的图片文件。在此，本领域技术人员应理解“持续”是指生成设备1在各步骤中不断进行上述页面内容信息的获取、DOM树的获取、页面像素信息的获取及图片文件的生成，直至满足预定停止条件，例如生成设备1在较长时间内停止对待处理的页面内容信息的获取。
图8示出根据本发明一个优选实施例的用于生成与页面对应的图片的方法流程图。其中，该过程还包括步骤S605。
在此，图8中所示生成设备1在步骤S601、步骤S602、步骤S603和步骤S604中的功能与前面参照图7所描述的生成设备1在步骤S501、步骤S502、步骤S503和步骤S504中的内容相同，为简明起见，将其以引用方式包含于此，而不做赘述。
具体地，在步骤S605中，生成设备1获取用户输入的图像处理信息；其中，在步骤S604中，生成设备1根据该图像处理信息，并基于页面像素信息来生成与页面对应的经图像处理后的图片文件。
在此，所述图像处理信息包括但不限于以下任一项：
1)缩放比例信息；其包括：缩小比例信息和放大比例信息；
2)色调调整信息；其包括但不限于：灰度调节信息、黑白调节信息等。
本领域技术人员应能理解上述图像处理信息仅为举例，其他现有的或今后可能出现的图像处理信息如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
在一示例中，首先，用户借助与用户设备的交互方式，包括但不限于键盘、鼠标、遥控器、触摸板、或手写设备，与用户设备的浏览器软件或客户端软件进行交互，以键盘为例，用户在用户设备的浏览器软件的缩放比例输入框中进行输入时，该用户设备实时地获取用户输入的按键序列，例如用户输入“1/2”，并记录为与该用户输入操作相对应的缩放比例，然后将该缩放比例通过预定的通信方式发送到生成设备1；接着，在步骤S605中，生成设备1实时地接收该缩放比例。
接着，在步骤S604中，生成设备1根据该图像处理信息，并基于页面像素信息来生成与页面对应的经图像处理后的图片文件的方式包括但不限于以下任一项：
1)根据图像处理信息，对页面像素信息进行相应的图像处理，获得经图像处理后的页面像素信息；随后基于该经图像处理后的页面像素信息，来生成经图像处理后的图片文件；该方式的具体实施例将在后续予以详细阐述；
2)基于页面像素信息，来生成与页面对应的原始图片文件；随后根据图像处理信息，对该原始图片文件进行相应的图像处理，以获得经图像处理的图片文件；该方式的具体实施例将在后续予以详细阐述。
本领域技术人员应能理解上述获取图像处理信息的方式和/或生成图片文件的方式仅为举例，其他现有的或今后可能出现的获取图像处理信息的方式和/或生成图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
图9示出根据本发明又一优选实施例的用于生成与页面对应的图片的方法流程图。其中，该过程中步骤S704包括步骤S7041和S7042。
在此，图9中所示生成设备1在步骤S701、S702、S703和S705中的功能与前面参照图8所描述的生成设备1在步骤S601、S602、S603和S605中的内容相同，为简明起见，将其以引用方式包含于此，而不做赘述。
在步骤S7041中，生成设备1根据其在步骤S705中获取的图像处理信息，对页面像素信息进行相应的图像处理，获得经图像处理后的页面像素信息；在步骤S7042中，生成设备1基于其在步骤S7041中获得的经图像处理后的页面像素信息，来生成经图像处理后的图片文件。
在此，所述根据图像处理信息对页面像素信息进行相应的图像处理，以获得经图像处理后的页面像素信息包括但不限于以下任一情形：
1)当图像处理信息为缩小比例信息时，在步骤S7041中，生成设备1通过等间采样的图像缩小方法、基于局部均值的图像缩小方法等，对页面像素信息中的像素信息进行抽样，以获得经缩小处理后的页面像素信息；
2)当图像处理信息为放大比例信息时，在步骤S7041中，生成设备1通过最近领域插值法、双线性插值法、双三次插值法等，对页面像素信息中的像素信息进行插值处理，以获得经放大处理后的页面像素信息；
3)当图像处理信息为色调调整信息中的灰度调节信息时，在步骤S7041中，生成设备1通过预定的色阶调节指数，对页面像素信息中的像素信息进行色阶调节处理，以获得经灰度调节处理后的页面像素信息；在此，所述色阶是指灰度分辨率，所述色阶调节即通过调整图像的阴影、中间调和高光的强度级别等，从而校正图像的色调范围和色彩平衡。
在一示例中，缩放比例信息示出放大至原页面展示图像的2倍，且该原页面展示图像的页面像素信息如以下公式1)所示矩阵F(i，j)标识，该矩阵大小为2×4(M×N)(i＝1，2；j＝1，2，3，4)，其中，该矩阵的行列值代表该原页面展示图像的页面像素信息：
在步骤S7041中，生成设备1通过最近领域法，将该页面像素信息添加至放大后的图像的2×2的子块中，即放大后的页面像素信息为H(i，j)，如以下公式2)所示，大小为4×8(＝2M×2N)：
接着，在步骤S7042中，生成设备1在基于DOM树对该页面内容信息进行渲染处理时，生成设备1在该DOM树根节点下插入的<canvas>节点被调用，则该canvas节点可通过调用预定的API从预定存储区域中获取该canvas节点下面的所有节点对应的页面元素的经图像处理后的页面像素信息，执行绘图功能以生成与该页面对应的图片文件来生成经图像处理后的图片文件。
本领域技术人员应能理解上述获取经图像处理后的页面像素信息的方式和/或生成图片文件的方式仅为举例，其他现有的或今后可能出现的获取经图像处理后的页面像素信息的方式和/或生成图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
图10示出根据本发明另一优选实施例的用于生成与页面对应的图片的方法流程图。其中，该过程中步骤S804包括步骤S8041和步骤S8042。
在此，图10中所示生成设备1在步骤S801、S802、S803和S805中的功能与前面参照图8所描述的生成设备1在步骤S601、S602、S603和S605中的内容相同，为简明起见，将其以引用方式包含于此，而不做赘述。
具体地，在步骤S8041中，生成设备1基于其在步骤S803中获取的页面像素信息，来生成与页面对应的原始图片文件。
在一示例中，当在步骤S8041中，生成设备1基于DOM树对页面内容信息进行渲染处理时，生成设备1在步骤S802中在该DOM树根节点下插入的<canvas>节点被调用，则该canvas节点可通过调用预定的API从预定存储区域中获取该canvas节点下面的所有节点对应的页面元素的原始的页面像素信息，执行绘图功能以生成与该页面对应的原始图片文件。
接着，在步骤S8042中，生成设备1根据其在步骤S805中获取的图像处理信息，对其在步骤S8041中获取的原始图片文件进行相应的图像处理，以获得经图像处理的图片文件。
在此，所述获得经图像处理的图片文件的方式包括但不限于以下任一项：
1)根据图像处理信息，如缩放处理信息和/或色调调节信息，对原始图片文件进行相应的缩放处理和/或色调调节，已生成经图像处理的图片文件；
2)根据图像处理信息，在图片存储库中进行匹配查询，以获得与原始图片文件对应的且已经根据该图像处理信息处理后的图片文件；在此，所述图片存储库中包括原始图片文件及与其对应的经图像处理的图片文件；其包括但不限于关系数据库、Key-Value存储系统、文件系统等中。
在一示例中，当图像处理信息为缩小至原图像的1/2时，首先，在步骤S8042中，生成设备1提取其在步骤S8041中获取的原始图片文件的像素信息，且用矩阵F(i，j)标识，该矩阵大小为2×4(M×N)(i＝1，2；j＝1，2，3，4)，其中，该矩阵的行列值代表原图像的像素信息；接着，根据该缩小比例信息，通过等间采样的图像缩小方法对已提取的原始图片文件的像素信息进行抽样，以获得抽样处理后的像素信息G(i，j)，如以下公式3)所示，其大小为1×2(＝(1/2)M×(1/2)N)：
G＝[f12 f14] 3)
并将该抽样处理后的像素信息存储在预定存储区域中；接着，生成设备1通过调用预定的应用编程接口(API)，从图片存储库中进行匹配查询，获得与该抽样处理后的像素信息G(i，j)相对应的图片，以作为缩小后的图片文件。
本领域技术人员应能理解上述获取生成原始图片文件的方式和/或获得经图像处理的图片文件的方式仅为举例，其他现有的或今后可能出现的获取生成原始图片文件的方式和/或获得经图像处理的图片文件的方式如可适用于本发明，也应包含在本发明保护范围以内，并以引用方式包含于此。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。
- 还没有人留言评论。精彩留言会获得点赞！