网页文件生成方法、装置、设备及存储介质与流程

1.本技术涉及网络直播技术领域，特别是涉及网页文件生成方法、装置、设备及存储介质。


背景技术：

2.随着网络通信技术的进步，网络直播成为一种新兴的网络互动方式，网络直播也因其具有实时性、交互性等特点受到越来越多观众的喜爱。
3.在网络直播的过程中，通常会通过举办多种活动的方式来提高观众参与互动的积极性，为了便于观众及时了解活动规则，通常会生成包括图文规则的活动页面供观众阅览，现有技术中往往通过切图的方式将网页设计稿制作成对应的网页界面，然而，在活动筹备期，往往需要多次修改活动页面，每次修改均需重新切图替换原有文件，网页文件制作效率较低。


技术实现要素：

4.基于此，本技术的目的在于，提供一种网页文件生成方法、装置、设备及存储介质，可以有效提高网页文件生成和修改效率。
5.根据本技术实施例的第一方面，提供一种网页文件生成方法，所述网页文件生成方法包括：
6.获取第一图片文件所包含的多个图层的图层类型及图层属性信息；
7.获取图层类型为文字的文字图层，对所述文字图层进行解析，获取所述文字图层的富文本内容及所述富文本内容的文本属性信息；
8.按照预设的网页样式转换规则，将所述文本属性信息转换为网页文件的文本样式信息，将所述图层属性信息转换为网页文件的图片样式信息；
9.隐藏所述文字图层，合并所述图片文件中除所述文字图层之外的其它图层，生成第二图片文件；
10.根据所述文本样式信息、所述富文本内容、所述图片样式信息和所述第二图片文件生成网页文件。
11.根据本技术实施例的第二方面，提供一种网页文件生成装置，所述网页文件生成装置包括：
12.图层信息获取模块，用于获取第一图片文件所包含的多个图层的图层类型及图层属性信息；
13.文本解析模块，用于获取图层类型为文字的文字图层，对所述文字图层进行解析，获取所述文字图层的富文本内容及所述富文本内容的文本属性信息；
14.样式信息获取模块，用于按照预设的网页样式转换规则，将所述文本属性信息转换为网页文件的文本样式信息，将所述图层属性信息转换为网页文件的图片样式信息；
15.图片文件生成模块，用于隐藏所述文字图层，合并所述图片文件中除所述文字图
层之外的其它图层，生成第二图片文件；
16.网页文件生成模块，用于根据所述文本样式信息、所述富文本内容、所述图片样式信息和所述第二图片文件生成网页文件。
17.根据本技术实施例的第三方面，提供一种电子设备，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行任意一项所述的网页文件生成方法。
18.根据本技术实施例的第四方面，提供一种计算机可读存储介质，其上储存有计算机程序，该计算机程序被处理器执行时实现任意一项所述的网页文件生成方法。
19.本技术过获取第一图片文件所包含的多个图层的图层类型及图层属性信息，获取图层类型为文字的文字图层并进行解析，获取文字图层的富文本内容及富文本内容的文本属性信息；按照预设的网页样式转换规则，将所述文本属性信息转换为网页文件的文本样式信息，将所述第一图片文件中的其它图层的图层属性信息转换为网页文件的图片样式信息；隐藏所述文字图层，合并所述图片文件中除所述文字图层之外的其它图层，生成第二图片文件；根据所述文本样式信息、所述富文本内容、所述图片样式信息和所述第二图片文件生成网页文件，用户可以直接搜索富文本内容进行校对，通过将除文字图层之外的其它图层合并第二图片文件，在修改文案时仅需修改文字图层并载入到第二图片文件中，可以有效提高修改效率。并且，本技术中降低了合成的第二图片文件的图片大小，更加节省空间，提高网页文件生成效率。
20.为了更好地理解和实施，下面结合附图详细说明本技术。
附图说明
21.图1为本技术一个实施例提供的一种网页文件生成方法的流程图；
22.图2为本技术一个实施例提供的一种网页文件生成装置的结构示意图；
23.图3为本技术一个实施例提供的一种电子设备的结构示意框图。
具体实施方式
24.为使本技术的目的、技术方案和优点更加清楚，下面将结合附图对本技术实施例作进一步地详细描述。
25.应当明确，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本技术保护的范围。
26.下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本技术相一致的所有实施方式。相反，它们仅是如所附权利要求书中所详述的、本技术的一些方面相一致的装置和方法的例子。
27.在本技术的描述中，需要理解的是，术语“第一”、“第二”、“第三”等仅用于区别类似的对象，而不必用于描述特定的顺序或先后次序，也不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本技术中的具体含义。在本技术和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括
多数形式，除非上下文清楚地表示其他含义。在此所使用的词语“如果”/“若”可以被解释成为“在
……
时”或“当
……
时”或“响应于确定”。此外，在本技术的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
28.本技术实施例可以应用于生成互联网内容，具体地，可以用于修改和生成网络直播的活动网页，其中。网页文件包括各种适于万维网和web浏览器的网络文档，网页文件以浏览器支持的编程语言来创建，并在web浏览器中运行呈现，例如，网页文件可以是javascript、html和css的组合。web浏览器”(通常称为“浏览器”)可以指，但不限于，用于检索、呈现和遍历信息资源的软件应用程序，诸如万维网和互联网上的信息资源或者可以经由内联网中的web服务器、专用网络或文件系统进行访问。信息资源通常由统一资源标识符/统一资源定位符(uri/url)标识，并且可以是例如网页、网站、多媒体内容、图像内容、文本内容或其他内容项目。信息资源内存在的超链接允许用户容易地将其浏览器导航到相关的信息资源，包括但不限于，firefoxtm、internet explorertm、google chrometm、operatm、和apple safaritm。
29.实施例一：
30.本技术实施例公开了一种网页文件生成方法，所述网页文件生成方法可应用于生成移动端或者pc端的网页文件。
31.下面将结合附图1，对本技术实施例提供的一种网页文件生成方法进行详细介绍。
32.本技术实施例提供的网页文件生成方法包括：
33.s1：获取第一图片文件所包含的多个图层的图层类型及图层属性信息；
34.第一图片文件包括网页所要显示的内容的各种元素及其样式，各种元素以图层的形式保存在所述第一图片文件中，元素可以是图片、文字或其他可呈现在网页上的元素及其组合。在本技术实施例中，所述第一图片文件为psd文件，所述第一图片文件可以包括多个图层，也可以包括多个图层组，其中，每一个图层组包括至少一个图层，图层组可以由底层到顶层的顺序进行显示，也可以是由顶层到底层的顺序进行显示。在本技术实施例中，多个图层可以是第一图片文件的所有图层，可以以图层组为单位进行逐一遍历获取图层类型及图层属性信息，在其它实施例中，多个图层也可以根据用户需求设置为第一图片文件的部分图层。
35.所述图层属性信息可以包括行高、透明度、水平对齐方式、图层宽度和边界信息等信息；其中，边界信息包括图层上下左右四个边界的边界信息，图层宽度可以根据图层的左右边界信息计算得到。
36.在一个实施例中，获取图层的边界信息的步骤包括：
37.复制所述第一图片文件的图层组并进行合并，获取合并后的图层的边界信息；
38.若所述合并后的图层中的显示内容存在左右不对称，调整所述图层中显示内容的位置使所述合并后的图层左右对称，获取经调整后的图层的边界信息和位置偏移信息。
39.为避免合并后的第二图片文件出现不对称的情况，可以通过预先复制并合并第一图片文件的图层组，并结合合并效果进行位置调整，便于对后续合并后的第二图片文件进行位置校正，提高页面显示效果。
40.s2：获取图层类型为文字的文字图层，对所述文字图层进行解析，获取所述文字图层的富文本内容及所述富文本内容的文本属性信息；
41.在一个实施例中，为了避免对于隐藏文字图层的误解析，影响网页文件生成效率；在对文字图层进行解析之前，还包括：
42.获取所述文字图层的图层属性信息；其中，所述文字图层的图层属性信息包括图层状态、图层名称、图层样式、文字图层包含的文字的字体尺寸、颜色和字体名称等信息；
43.若所述文字图层满足预设的解析条件，对所述文字图层进行解析；
44.所述预设的解析条件包括：所述文字图层的图层状态为可见状态、图层样式只包括颜色或者无图层样式、图层名称不包含预设的第一关键字、文字图层包含的文字字体尺寸小于预设阈值且字体名称中包含预设的第二关键字。
45.其中，字体尺寸的阈值、第一关键字、第二关键字可以根据第一图片文件为移动端或者pc端的设计文件或用户的设计需要进行设置，例如，第一关键字可以设置为hide字符串，当第一图片文件为移动端的设计文件时，其字体尺寸可以是30像素(px)，第二关键字可以是pingfang，当第一图片文件为pc端的设计文件时，其字体尺寸可以是20像素(px)，第二关键字可以是microsoftyahei。当该图层名称包括hide字符串时，表示该图层为隐藏图层；其中，阈值、第一关键字、第二关键字等参数可以作为基本配置项并保存在脚本代码中。
46.s3：按照预设的网页样式转换规则，将所述文本属性信息转换为网页文件的文本样式信息，将所述图层属性信息转换为网页文件的图片样式信息；
47.网页样式转换规则用于将文本属性信息转换为网页文件的文本样式和将图层属性信息转换为网页文件的图层样式，以使得富文本内容和第二图片文件可以以网页元素的方式呈现在浏览器中，在一个实施例中，网页样式转换规则可以根据待生成的网页文件进行确定，例如可以转换为css样式(cascading style sheets)。
48.文本属性信息可以包括富文本内容的颜色、字体尺寸、字形(常规、粗体或倾斜)、是否有下划线、水平对齐方式等信息，其中，若所述文本属性信息中与文字图层的图层属性信息存在不一致，分别保存所述文本属性信息中与文字图层的图层属性信息并进行转换。
49.为便于计算机对上述文本属性信息进行遍历，可以将文本属性信息保存为富文本内容数组的形式。在转换为网页文件的文本样式信息，通过对富文本内容数组进行一一遍历，所述文本样式信息包括上边界值、左外边距及颜色、字体尺寸、字形(常规、粗体或倾斜)、是否有下划线、水平对齐方式等信息。具体地，将所述文本属性信息转换为网页文件的文本样式信息的步骤如下：
50.将富文本内容的颜色、字体尺寸的具体数值转换为表示网页文件的文本颜色样式的color值和表示网页文件的字体尺寸样式的font-size值，并添加span标签；若字形为粗体，添加span标签并转换为表示网页文件的文本加粗样式的font-weight:bold；若有下划线，添加span标签并转换为表示网页文件的文本下划线样式的text-decoration:underline；将富文本内容的换行符转换成《br/》；去掉每一行文字的行首和行尾的空行。
51.在一个实施例中，文本样式信息还包括上边界值，富文本内容的上边界值可用于确定富文本内容在网页页面的位置，实现富文本内容的绝对定位。具体地，按照以下方式，获取所述富文本内容的上边界值：
52.top＝top1-(lineheight-fontsize)/2
53.其中，top为所述富文本内容的上边界值，lineheight为行高、fontsize为字体尺寸，top1为文字图层的上边界值。
54.具体地，将所述图层属性信息转换为网页文件的图片样式信息的步骤包括：
55.将行高值转换为表示网页文件的行高的line-height值；将透明度值转换为表示网页文件的透明度opacity值；将水平对齐方式转换为表示网页文件的水平对齐方式text-align值，将图层宽度转换为表示网页文件的宽度width值；
56.在一个实施例中，图片样式信息还包括左外边距；所述文字图层的图层属性信息包括字图层的图层宽度和文字图层实际显示的宽度；
57.获取第一图片文件的宽度及当前图层组的左边界值；
58.若所述富文本内容的水平对齐方式为左对齐，按照以下方式，获取当前图层组的左外边距：
59.margin-left＝(width/2
–
t1)*(-1)
60.其中，margin-left为左外边距，width为第一图片文件的宽度，t1为当前图层组的左边界值；
61.若所述富文本内容的水平对齐方式为居中对齐，按照以下方式，获取当前图层组的左外边距：
62.margin-left＝(width/2
–
t1)*(-1)-(wid1-wid2)/2
63.其中，wid1为文字图层的图层宽度，wid2为文字图层实际显示的宽度。
64.在一个优选的实施例中，还包括以下步骤：
65.将所述第一样式信息和所述第二样式信息保存为json对象；
66.将所述json对象、所述第一样式信息、所述第二样式信息和所述网页文件存储至预设的存储区内。
67.预设的存储区为用户预先设置的用于存储json对象、所述第一样式信息、所述第二样式信息和所述网页文件的存储路径，在一个实施例中，该存储路径可以是第一图片文件所在的存储路径，在
68.json对象是javascript的原生对象，可用来处理json格式数据。它有两个静态方法：json.stringify()和json.parse()。json.stringify方法用于将一个值转为json字符串。该字符串符合json格式，并且可以被json.parse方法还原。在本技术实施例中，通过将所述第一样式信息和所述第二样式信息保存为json对象，便于后续过程中对其进行调用。
69.s4：隐藏所述文字图层，合并所述图片文件中除所述文字图层之外的其它图层，生成第二图片文件；
70.在一个实施例中，合并所述图片文件中的其它图层的步骤包括：
71.复制所述图片文件中的其它图层并进行合并；
72.去除所述合并后图层的透明区域，根据所述调整后的位置偏移信息，调整所述合并后的图层中显示内容的位置，使所述显示内容居中显示。
73.具体地，为避免影响原始设计文档，在合并所述图片文件中的其它图层时，先复制所述图片文件中的其它图层，再对复制的图层进行合并形成临时图层，去除透明区域时，可以直接在图片编辑软件进行编辑，利用trim方法或其它可满足本技术上述功能的方法去除合并后图层的透明区域，再根据位置偏移信息校正并调整图层的大小，使得显示内容居中
显示，提高生成的网页页面的显示效果。在生成第二图片文件之后，删除临时图层并恢复显示文字图层。其中，第二图片文件可以是png格式的图片文件。
74.s5：根据所述文本样式信息、所述富文本内容、所述图片样式信息和所述第二图片文件生成网页文件显示内容的位置。
75.本技术实施例所述网页文件生成方法可以借助extendscript脚本编写工具以及json action manager插件等工具来实现，当用户打开图片文件时，即可自动执行本技术实施例所述网页文件生成方法，生成json对象、第一样式信息、第二样式信息和网页文件并进行存储至预设的存储区，用户可以直接搜索富文本内容进行校对，通过将除文字图层之外的其它图层合并第二图片文件，在修改文案时仅需修改文字图层并载入到第二图片文件中，可以有效提高修改效率。并且，本技术中降低了合成的第二图片文件的图片大小，更加节省空间，提高网页文件生成效率。
76.本实施例提供一种网页文件生成装置，可以用于执行上述实施例的网页文件生成方法。对于本实施例中未披露的细节，请参照本技术的方法实施例。
77.请参阅图2，图2是本技术实施例公开的一种网页文件生成装置的结构示意图。该网页文件生成装置包括：
78.图层信息获取模块1，用于获取第一图片文件所包含的多个图层的图层类型及图层属性信息；
79.文本解析模块2，用于获取图层类型为文字的文字图层，对所述文字图层进行解析，获取所述文字图层的富文本内容及所述富文本内容的文本属性信息；
80.样式信息获取模块3，用于按照预设的网页样式转换规则，将所述文本属性信息转换为网页文件的文本样式信息，将所述图层属性信息转换为网页文件的图片样式信息；
81.图片文件生成模块4，用于隐藏所述文字图层，合并所述图片文件中除所述文字图层之外的其它图层，生成第二图片文件；
82.网页文件生成模块5，用于根据所述文本样式信息、所述富文本内容、所述图片样式信息和所述第二图片文件生成网页文件。
83.本实施例提供一种电子设备，可以用于执行本技术实施例一的网页文件生成方法的全部或部分步骤。对于本实施例中未披露的细节，请参照本技术的实施例一、实施例二。
84.请参阅图3，图3为本技术实施例提供的电子设备的结构示意图。所述电子设备900可以但不限于是各种服务器、个人计算机、笔记本电脑、智能手机、平板电脑等设备的一个或多个的组合。
85.本技术在本技术较佳实施例中，所述电子设备900包括存储器901、至少一个处理器902、至少一条通信总线903及收发器904。
86.本领域技术人员应该了解，图3示出的电子设备的结构并不构成本技术实施例的限定，既可以是总线型结构，也可以是星形结构，所述电子设备900还可以包括比图示更多或更少的其他硬件或者软件，或者不同的部件布置。
87.在一些实施例中，所述电子设备900是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路、可编程门阵列、数字处理器及嵌入式设备等。所述电子设备900还可包括客户设备，所述客户设备包括但不限于任何一种可与客户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行
人机交互的电子产品，例如，个人计算机、平板电脑、智能手机、数码相机等。
88.需要说明的是，所述电子设备900仅为举例，其他现有的或今后可能出现的电子产品如可适应于本技术，也应包含在本技术的保护范围以内，并以引用方式包含于此。
89.在一些实施例中，所述存储器901中存储有计算机程序，所述计算机程序被所述至少一个处理器902执行时实现如所述实施例一、实施例二的网页文件生成方法中的全部或者部分步骤。所述存储器901包括只读存储器(read-only memory，rom)、可编程只读存储器(programmable read-only memory，prom)、可擦除可编程只读存储器(erasableprogrammable read-only memory，eprom)、一次可编程只读存储器(one-timeprogrammable read-only memory，otprom)、电子擦除式可复写只读存储器(electrically-erasable programmable read-only memory，eeprom)、只读光盘(compactdisc read-only memory，cd-rom)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。
90.在一些实施例中，所述至少一个处理器902是所述电子设备900的控制核心(control unit)，利用各种接口和线路连接整个电子设备900的各个部件，通过运行或执行存储在所述存储器901内的程序或者模块，以及调用存储在所述存储器901内的数据，以执行电子设备900的各种功能和处理数据。例如，所述至少一个处理器902执行所述存储器中存储的计算机程序时实现本技术实施例中所述的网页文件生成方法的全部或者部分步骤；或者实现网页文件生成装置的全部或者部分功能。所述至少一个处理器902可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(centralprocessing unit，cpu)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。
91.在一些实施例中，所述至少一条通信总线903被设置为实现所述存储器901以及所述至少一个处理器902等之间的连接通信。
92.所述电子设备900还可以包括多种传感器、蓝牙模块、wi-fi模块等，在此不再赘述。
93.本实施例提供一种计算机可读存储介质，其上储存有计算机程序，所述指令适于由处理器加载并执行本技术实施例的网页文件生成方法，具体执行过程可以参见上述实施例的具体说明，在此不进行赘述。
94.对于设备实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的设备实施例仅仅是示意性的，其中所述作为分离部件说明的组件可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本技术方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
95.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
96.本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
97.以上仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。