CN114154095A - 页面图片生成方法、装置、设备和存储介质 - Google Patents

Abstract

本发明实施例公开了一种页面图片生成方法、装置、设备和存储介质，该方法包括：获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成；根据所述第一元素信息对所述第一页面图片中包含的元素进行布局转换处理得到第二元素信息，所述布局转换处理包括位移转换处理和样式转换处理；根据所述第二元素信息生成第二页面图片。本方案实现了页面图片布局的自动调整，显著减少了开发人员的工作量。

Description

页面图片生成方法、装置、设备和存储介质

技术领域

本申请实施例涉及计算机技术领域，尤其涉及一种页面图片生成方法、装置、设备和存储介质。

背景技术

随着产品全球化部署的趋势，需要考虑不同国家的阅读习惯存在一定的差异性，如使用阿拉伯语、乌尔都语、希伯来语的用户，其语言的阅读习惯跟英文、中文不同，为从右向左的顺序进行阅读，为了使产品同时符合全球化和本地化的使用习惯，需要兼顾不同类型的用户的使用体验，进行相应的页面适配，如将由左向右布局的页面图片转换为由右向左布局的页面图片。

现有的生成由右向左布局的页面图片时，需要额外的人力进行适配开发，要求开发人员如UI设计师、web开发者进行修改维护，常见的为UI设计师使用photoshop、sketch等绘图软件分别输出页面图片的常规LTR(left to right，由左向右)布局图片和RTL(rightto left，由右向左)布局图片，但生成的RTL图片属于静态资源，图片输出后文案内容已栅格化，在用户侧或运营侧不能动态进行更改，不能根据配置的页面数据进行展示，灵活地满足业务场景；由web开发者通过开发适配RTL布局页面时，其通过后端服务进行页面截图的方式适配，其每次发布新页面都需要重新适配，工作量大，开发成本比较高。由此可知，上述生成页面图片的流程无法重复利用，需要进行大量重复劳动，占用开发资源并且加大了开发成本。

发明内容

本发明实施例提供了一种页面图片生成方法、装置、设备和存储介质，解决了现有技术中进行页面图片适配时效率低、开发成本高的问题，实现了页面图片布局的自动调整，显著减少了开发人员的工作量。

第一方面，本发明实施例提供了一种页面图片生成方法，该方法包括：

获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成；

根据所述第一元素信息对所述第一页面图片中包含的元素进行布局转换处理得到第二元素信息，所述布局转换处理包括位移转换处理和样式转换处理；

根据所述第二元素信息生成第二页面图片。

第二方面，本发明实施例还提供了一种页面图片生成装置，包括：

信息获取模块，用于获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成；

布局转换模块，用于根据所述第一元素信息对所述第一页面图片中包含的元素进行布局转换处理得到第二元素信息，所述布局转换处理包括位移转换处理和样式转换处理；

图片生成模块，用于根据所述第二元素信息生成第二页面图片。

第三方面，本发明实施例还提供了一种页面图片生成设备，该设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明实施例所述的页面图片生成方法。

第四方面，本发明实施例还提供了一种存储计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行本发明实施例所述的页面图片生成方法。

本发明实施例中，通过获取第一页面图片的第一元素信息，其中，第一元素信息由第一页面图片的节点数据解析生成，再根据元素信息对第一页面图片中包含的元素进行布局转换处理得到第二元素信息，其中，布局转换处理包括位移转换处理和样式转换处理，再根据第二元素信息自动生成第二页面图片，实现了页面图片布局的自动调整，显著减少了开发人员的工作量。

附图说明

图1为本发明实施例提供的一种页面图片生成方法的流程图；

图2为本发明实施例提供的一种生成第一页面图片对应的第一元素信息的方法的流程图；

图3为本发明实施例提供的一种根据第二元素信息生成第二页面图片的方法的流程图；

图4为本发明实施例提供的另一种页面图片生成方法的流程图；

图5为本发明实施例提供的一种确定第二位置坐标的方法的流程图；

图6为本发明实施例提供的一种第一页面图片示意图；

图7为本发明实施例提供的一种对第一页面图片进行布局转换后得到的第二页面图片的示意图；

图8为本发明实施例提供的一种元素位置关系示意图；

图9为本发明实施例提供的另一种页面图片生成方法的流程图；

图10为本发明实施例提供的另一种页面图片生成方法的流程图；

图11为本发明实施例提供的一种页面图片转换前后示意图；

图12为本发明实施例提供的一种页面图片生成装置的结构框图；

图13为本发明实施例提供的一种页面图片生成设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明实施例作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明实施例，而非对本发明实施例的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明实施例相关的部分而非全部结构。

本申请的说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施，且“第一”、“第二”等所区分的对象通常为一类，并不限定对象的个数，例如第一对象可以是一个，也可以是多个。此外，说明书以及权利要求中“和/或”表示所连接对象的至少其中之一，字符“/”，一般表示前后关联对象是一种“或”的关系。

图1为本发明实施例提供的一种页面图片生成方法的流程图，可应用于页面图片布局的自动转换得到不同布局的页面图片，该方法可以由客户端浏览器执行，具体包括如下步骤：

步骤S101、获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成。

其中，元素信息用于表征页面图片中元素的位置和样式。如页面图片中包含元素的位置信息、边框属性信息以及元素背景信息等。

在一个实施例中，该第一元素信息由第一页面图片的节点数据解析生成。其中，该第一页面图片为进行页面图片布局调整前的图片，如LTR布局的海报图片、活动配置图片或者网页图片等。第一页面的节点数据示例性的可以是第一页面的DOM(Document ObjectModel，文档对象模型)节点数据，其定义了第一页面图片中所有元素的对象和属性，以及访问该元素对象和属性的方法。通过对第一页面图片的节点数据进行解析以得到第一页面图片的第一元素信息。

在一个实施例中，如图2所示，图2为本发明实施例提供的一种生成第一页面图片对应的第一元素信息的方法的流程图，给出了获取第一页面图片的第一元素信息之前得到第一元素信息的方式，具体包括：

步骤S1011、通过本地客户端遍历第一页面图片对应的节点数据中的元素节点。

步骤S1012、通过本地客户端对所述元素节点进行拷贝生成第一元素信息。

具体的，在获取到第一页面图片节点数据后，对其中包含的元素节点进行遍历，并使用浏览器提供的接口、函数方法等进行元素节点相关信息的拷贝。可选的，对于信息的拷贝过程中仅复制元素的位置信息，如坐标位置、尺寸大小等，以及元素的样式数据，如边框属性信息等。通过对第一页面图片对应节点数据中的元素节点进行遍历以及信息拷贝的方式得到包含元素位置信息、样式信息的第一元素信息。该生成第一元素信息的方式中，通过本地客户端的形式实现对第一页面图片的处理，由此以减轻服务器压力，可以实现页面图片在离线情况下的布局转换。

步骤S102、根据所述第一元素信息对所述第一页面图片中包含的元素进行布局转换处理得到第二元素信息，所述布局转换处理包括位移转换处理和样式转换处理。

其中，在获取到第一元素信息后，基于该第一元素信息实现对第一页面图片中包含元素的布局转换处理。如将LTR布局的第一页面图片转换为RTL布局的第二页面图片。当然，也可以是将RTL布局的第一页面图片转换为LTR布局的第二页面图片，或者是其它自定义的布局样式的转换。

其中，该布局转换处理包括位移转换处理和样式转换处理。该位移转换处理实现对元素所在位置的转换，如页面图片中元素的位置由左边移至右边；该样式转换处理实现对元素样式的转换，如针对不同布局下元素样式的转换。在通过对元素进行相应的布局转换处理后，将原始的第一页面图片的第一元素信息转换变更为第二元素信息，其中，该第二元素信息为和第一页面图片布局方式不同的第二页面图片中元素对应的相关信息，如元素的位置信息、样式信息等。

步骤S103、根据所述第二元素信息生成第二页面图片。

在确定第二元素信息后，基于该第二元素信息以生成第二页面图片。如第一页面图片原始为LTR布局的图片，转换后的第二页面图片为RTL布局的页面图片。

在一个实施例中，如图3所示，图3为本发明实施例提供的一种根据第二元素信息生成第二页面图片的方法的流程图，给出了一种具体的生成第二页面图片的方法，具体包括：

步骤S1031、获取预设的层叠顺序规则，根据所述层叠顺序规则对第二元素信息中的元素进行分类。

其中，该层叠顺序规则为浏览器进行元素展示上下层关系的依据，层叠顺序指元素发生层叠时特定的垂直显示顺序。以CSS(Cascading Style Sheets，层叠样式表)层叠顺序为例，从低层到高层的顺序依次为：background/border、负z-index、block块状水平盒子、float浮动盒子、inline/inline-block水平盒子、z-index:auto或z-index:0、正z-index。其中，高层元素显示在前且遮挡底层元素。通过层叠顺序规则的定义，对第二元素信息中的元素进行分类，以确定每个元素属于哪一层级。

步骤S1032、根据不同的元素分类以及对应的层叠类型优先级进行画布描绘生成第二页面图片。

在进行元素分类后，基于前述的层叠顺序规则确定出层叠类型优先级，即由低层到高层的顺序后，依次进行元素的描绘，如描绘至Canvas画布。示例性的，如进行元素背景、边框样式和文字内容的描绘绘制。

由上述方案可知，本方案中在将第一页面图片进行布局转换生成第二页面图片的过程中，首先获取第一页面图片的第一元素信息，根据第一元素信息对第一页面图片中包含的元素进行布局转换处理得到第二元素信息后，基于该第二元素信息生成第二页面图片，其中，第一元素信息由第一页面图片的节点数据解析生成，无需用户手动操作，在进行布局转换处理过程中，实现对第一页面图片元素的位移转换处理和样式转换处理以生成转换后的第二元素信息并得到对应的第二页面图片，显著减少了人工工作量，避免了大量的重复劳动，节省了人力物力。

图4为本发明实施例提供的另一种页面图片生成方法的流程图，给出了一种具体的对第一页面图片中包含的元素的位置进行位移转换处理的过程，如图4所示，包括：

步骤S201、获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成。

步骤S202、根据所述第一元素信息确定所述第一页面图片中包含的元素的第一位置坐标、元素尺寸以及画布尺寸。

其中，该第一元素信息中包含由多个具体的元素，如文本元素(包括汉字元素、英文单词元素等)、边框元素、元素背景元素等。其中，该第一位置坐标表征元素在第一页面图片中所在的位置，以由LTR布局的页面图片转换为RTL布局的页面图片为例，在水平建立的x坐标轴中，该第一位置坐标可以是元素的起始位置的x轴坐标，元素尺寸为元素宽度，画布尺寸为画布长度。

步骤S203、根据所述第一位置坐标、所述元素尺寸以及所述画布尺寸计算得到第二位置坐标，将所述第二位置坐标确定为所述元素的位置得到第二元素信息。

在确定出每个元素的第一位置坐标、元素尺寸以及画布尺寸后，相应的进行计算以得到该元素的第二位置坐标，即该元素在转换后的第二页面图片中所在的位置。

在一个实施例中，如图5所示，图5为本发明实施例提供的一种确定第二位置坐标的方法的流程图，给出了一种具体的根据第一位置坐标、元素尺寸和画布尺寸确定第二位置坐标的方法，具体包括：

步骤S2031、确定所述第一页面图片的布局转换类型，根据所述布局转换类型确定对应的坐标变换公式。

其中，布局转换类型表示第一页面图片需要进行适配性的布局转换的类型，如原始的第一页面图片为LTR布局类型，对应的布局转换类型为由LTR布局类型转换为RTL布局类型。针对不同的布局转换类型对应不同的位置坐标的计算公式。示例性的，图6为本发明实施例提供的一种第一页面图片示意图，图7为本发明实施例提供的一种对第一页面图片进行布局转换后得到的第二页面图片的示意图。图6所示的第一页面图片包含有元素06，其经过布局转换后所在的位置由图7所示的第二页面图片所示。图8为本发明实施例提供的一种元素位置关系示意图，如图8所示，其中以对元素06进行由左至右的位置变换为例，元素06的第一位置坐标为x1，元素06的元素宽度为x2，画布长度为x4，元素06的第二位置坐标为x3。坐标变换公式为x3＝x4-x1-x2。

步骤S2032、将所述第一位置坐标、所述元素尺寸以及所述画布尺寸代入所述坐标变换公式计算得到第二位置坐标。

在确定元素06的第一位置坐标为x1、元素宽度为x2以及画布长度为x4，并确定对应的坐标变换公式为x3＝x4-x1-x2后，将x1值、x2值和x4值代入该公式以得到第二位置坐标x3的具体数值，以完成该元素06的位移转换处理。

步骤S204、根据所述第二元素信息生成第二页面图片。

由上述方案可知，针对页面图片中包含元素的位移转换处理，通过确定的预设公式以及获取的元素的位置进行计算得到变换后的元素所在位置，并基于此重新生成布局变换后的页面图片，实现了页面图片布局的自动转换，全程自动化处理，可根据不同的布局需求进行高效的页面图片的转换，能够满足各种阅读习惯的地区文化，使得用户阅读体验和开发人员的开发过程更佳。

图9为本发明实施例提供的另一种页面图片生成方法的流程图，给出了一种具体的对第一页面图片中包含的元素的样式进行样式转换处理的过程，如图9所示，包括：

步骤S301、获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成。

步骤S302、根据所述第一元素信息将所述第一页面图片中包含的元素的第一样式调整为第二样式得到第二元素信息。

其中，在对页面图片布局进行调整的过程中，包括对页面元素的样式的调整。在一个实施例中，不同页面图片布局形式中，元素对应不同的样式。示例性的，以将LTR布局形式的第一页面图片适配为RTL布局形式的第二页面图片时，第一页面图片中元素的样式示例性的记为第一样式，第二页面图片中元素的样式示例性的记为第二样式。进行样式转换处理的过程即将第一样式的元素转换为第二样式的元素。具体的变换过程示例性的为：如果第一页面图片元素的样式为左元素样式，则调整为右元素样式；如果第一页面图片的元素样式为右元素样式，则调整为左元素样式。由此，实现页面图片中元素位置调整后对应样式的转换调整。

具体调整样式示例性的包括：background-position、background-position-x、border-bottom-left-radius、border-bottom-right-radius、border-color、border-left、border-left-color、border-left-style、border-left-width、border-radius、border-right、border-right-color、border-right-style、border-right-width、border-style、border-top-left-radius、border-top-right-radius、border-width以及box-shadow。

步骤S303、根据所述第二元素信息生成第二页面图片。

在第二页面图片的绘制过程中，对于需要绘制的每个元素使用前述确定的第二样式进行元素样式的绘制以生成第二页面图片。

由上述方案可知，在进行页面图片的布局变换过程中，根据第一元素信息将第一页面图片中包含的元素的第一样式调整为第二样式得到第二元素信息，以实现对页面图片中元素样式的自动调整，使得适配过程全程自动化处理，且布局变换结果满足用户阅读需求。

在上述技术方案的基础上，在根据第二元素信息生成第二页面图片后，还包括将该第二页面图片进行输出，以Canvas画布为例，通过调用Canvas.toDataURL()函数实现第二页面图片的输出，以进行页面图片的展示。

在上述技术方案的基础上，页面图片生成过程中，还包括对配置信息进行初始化，如向业务开发用户提供配置参数，例如Canvas画布的宽高设置，背景颜色，执行时生命周期回调函数等接口的配置，以灵活满足更多的场景需求。后续将用户配置参数与默认配置参数进行整合初始化，得到Canvas画布渲染执行前的全局参数，页面图片生成时的执行流程基于全局参数进行绘制。

图10为本发明实施例提供的另一种页面图片生成方法的流程图，给出了一种具体的同时对页面图片中包含元素进行移转换处理和样式转换处理的流程，如图10所示，包括：

步骤S401、通过本地客户端遍历第一页面图片对应的节点数据中的元素节点，对所述元素节点进行拷贝生成第一元素信息。

步骤S402、获取第一页面图片的第一元素信息，根据所述第一元素信息确定所述第一页面图片中包含的元素的第一位置坐标、元素尺寸以及画布尺寸。

步骤S403、根据所述第一位置坐标、所述元素尺寸以及所述画布尺寸计算得到第二位置坐标，将所述第二位置坐标确定为所述元素的位置，将所述第一页面图片中包含的元素的第一样式调整为第二样式，以得到第二元素信息。

步骤S404、获取预设的层叠顺序规则，根据所述层叠顺序规则对第二元素信息中的元素进行分类，根据不同的元素分类以及对应的层叠类型优先级进行画布描绘生成第二页面图片。

需要说明的是，在进行页面图片的布局调整过程中，进行的布局转换处理可以是位移转换处理或者样式转换处理，也可以是同时进行元素的位移转换处理和样式转换处理，可根据具体的布局需求依据元素类型和元素的位置进行合理的处理方式的选择。图11为本发明实施例提供的一种页面图片转换前后示意图，如图所示通过本方案的页面图片生成方法，可以实现将LTR布局的页面图片010转换为RTL布局的页面图片011，显著减少了人工工作量，避免了大量的重复劳动，节省了人力物力。

图12为本发明实施例提供的一种页面图片生成装置的结构框图，该装置用于执行上述实施例提供的页面图片生成方法，具备执行方法相应的功能模块和有益效果。如图12所示，该装置具体包括：信息获取模块101、布局转换模块102和图片生成模块103，其中，

信息获取模块101，用于获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成；

布局转换模块102，用于根据所述第一元素信息对所述第一页面图片中包含的元素进行布局转换处理得到第二元素信息，所述布局转换处理包括位移转换处理和样式转换处理；

图片生成模块103，用于根据所述第二元素信息生成第二页面图片。

由上述方案可知，本方案中在将第一页面图片进行布局转换生成第二页面图片的过程中，首先获取第一页面图片的第一元素信息，根据第一元素信息对第一页面图片中包含的元素进行布局转换处理得到第二元素信息后，基于该第二元素信息生成第二页面图片，其中，第一元素信息由第一页面图片的节点数据解析生成，无需用户手动操作，在进行布局转换处理过程中，实现对第一页面图片元素的位移转换处理和样式转换处理以生成转换后的第二元素信息并得到对应的第二页面图片，显著减少了人工工作量，避免了大量的重复劳动，节省了人力物力。

在一个可能的实施例中，该装置还包括信息生成模块，用于在获取第一页面图片的第一元素信息之前，通过本地客户端遍历第一页面图片对应的节点数据中的元素节点；通过本地客户端对所述元素节点进行拷贝生成第一元素信息。

在一个可能的实施例中，所述布局转换模块102具体用于：

对所述第一页面图片中包含的元素的位置进行位移转换处理；

对所述第一页面图片中包含的元素的样式进行样式转换处理。

在一个可能的实施例中，，所述布局转换模块102具体用于：

确定所述第一页面图片中包含的元素的第一位置坐标、元素尺寸以及画布尺寸；

根据所述第一位置坐标、所述元素尺寸以及所述画布尺寸计算得到第二位置坐标，将所述第二位置坐标确定为所述元素的位置。

在一个可能的实施例中，所述布局转换模块102具体用于：

确定所述第一页面图片的布局转换类型，根据所述布局转换类型确定对应的坐标变换公式；

将所述第一位置坐标、所述元素尺寸以及所述画布尺寸代入所述坐标变换公式计算得到第二位置坐标。

在一个可能的实施例中，所述布局转换模块102具体用于：

将所述第一页面图片中包含的元素的第一样式调整为第二样式，所述第二样式为预设的与所述第一样式不同布局类型对应的元素样式。

在一个可能的实施例中，所述图片生成模块103具体用于：

获取预设的层叠顺序规则，根据所述层叠顺序规则对第二元素信息中的元素进行分类；

根据不同的元素分类以及对应的层叠类型优先级进行画布描绘生成第二页面图片。

图13为本发明实施例提供的一种页面图片生成设备的结构示意图，如图13所示，该设备包括处理器201、存储器202、输入装置203和输出装置204；设备中处理器201的数量可以是一个或多个，图13中以一个处理器201为例；设备中的处理器201、存储器202、输入装置203和输出装置204可以通过总线或其他方式连接，图13中以通过总线连接为例。存储器202作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的页面图片生成方法对应的程序指令/模块。处理器201通过运行存储在存储器202中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述的页面图片生成方法。输入装置203可用于接收输入的数字或字符信息，以及产生与设备的用户设置以及功能控制有关的键信号输入。输出装置204可包括显示屏等显示设备。

本发明实施例还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种上述实施例描述的页面图片生成方法，具体包括：

获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成；

根据所述第一元素信息对所述第一页面图片中包含的元素进行布局转换处理得到第二元素信息，所述布局转换处理包括位移转换处理和样式转换处理；

根据所述第二元素信息生成第二页面图片。

值得注意的是，上述页面图片生成装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明实施例的保护范围。

注意，上述仅为本发明实施例的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明实施例不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明实施例的保护范围。因此，虽然通过以上实施例对本发明实施例进行了较为详细的说明，但是本发明实施例不仅仅限于以上实施例，在不脱离本发明实施例构思的情况下，还可以包括更多其他等效实施例，而本发明实施例的范围由所附的权利要求范围决定。

Claims (10)

1.页面图片生成方法，其特征在于，包括：

获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成；

根据所述第一元素信息对所述第一页面图片中包含的元素进行布局转换处理得到第二元素信息，所述布局转换处理包括位移转换处理和样式转换处理；

根据所述第二元素信息生成第二页面图片。

2.根据权利要求1所述的页面图片生成方法，其特征在于，在获取第一页面图片的第一元素信息之前，还包括：

通过本地客户端遍历第一页面图片对应的节点数据中的元素节点；

通过本地客户端对所述元素节点进行拷贝生成第一元素信息。

3.根据权利要求1所述的页面图片生成方法，其特征在于，所述对所述第一页面图片中包含的元素进行布局转换处理，包括：

对所述第一页面图片中包含的元素的位置进行位移转换处理；

对所述第一页面图片中包含的元素的样式进行样式转换处理。

4.根据权利要求3所述的页面图片生成方法，其特征在于，所述对所述第一页面图片中包含的元素的位置进行位移转换处理，包括：

确定所述第一页面图片中包含的元素的第一位置坐标、元素尺寸以及画布尺寸；

根据所述第一位置坐标、所述元素尺寸以及所述画布尺寸计算得到第二位置坐标，将所述第二位置坐标确定为所述元素的位置。

5.根据权利要求4所述的页面图片生成方法，其特征在于，所述根据所述第一位置坐标、所述元素尺寸以及所述画布尺寸计算得到第二位置坐标，包括：

确定所述第一页面图片的布局转换类型，根据所述布局转换类型确定对应的坐标变换公式；

将所述第一位置坐标、所述元素尺寸以及所述画布尺寸代入所述坐标变换公式计算得到第二位置坐标。

6.根据权利要求3所述的页面图片生成方法，其特征在于，所述对所述第一页面图片中包含的元素的样式进行样式转换处理，包括：

将所述第一页面图片中包含的元素的第一样式调整为第二样式，所述第二样式为预设的与所述第一样式不同布局类型对应的元素样式。

7.根据权利要求1-6中任意项所述的页面图片生成方法，其特征在于，所述根据所述第二元素信息生成第二页面图片，包括：

获取预设的层叠顺序规则，根据所述层叠顺序规则对第二元素信息中的元素进行分类；

根据不同的元素分类以及对应的层叠类型优先级进行画布描绘生成第二页面图片。

8.页面图片生成装置，其特征在于，包括：

信息获取模块，用于获取第一页面图片的第一元素信息，所述第一元素信息由所述第一页面图片的节点数据解析生成；

布局转换模块，用于根据所述第一元素信息对所述第一页面图片中包含的元素进行布局转换处理得到第二元素信息，所述布局转换处理包括位移转换处理和样式转换处理；

图片生成模块，用于根据所述第二元素信息生成第二页面图片。

9.一种页面图片生成设备，所述设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一项所述的页面图片生成方法。

10.一种存储计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-7中任一项所述的页面图片生成方法。

Images