页面生成方法及装置的制造方法
【专利摘要】本申请提供一种页面生成方法及装置，该方法包括：获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片；根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域一一对应的div节点；根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。通过本申请的技术方案，可以将用户输入的任意HTML数据自动生成为多个页面子图片，可以确保网站的安全性需求，并且能够提升页面的加载速度。
【专利说明】
页面生成方法及装置
技术领域
[0001]本申请涉及互联网技术领域，尤其涉及页面生成方法及装置。
【背景技术】
[0002]在一些网站中，允许用户申请个人主页，并对该页面进行编辑，但为了确保网络安全、防止网页内容混乱等目的，编辑内容采用图片和链接元素。
[0003]然而，用户的编辑元素往往还包含除图片和链接外的其他多种元素，导致用户无法顺利执行页面编辑操作。
【发明内容】
[0004]有鉴于此，本申请提供一种页面生成方法及装置，可以将用户输入的任意HTML页面数据自动生成为多个页面子图片，可以确保网站的安全性需求，并且能够提升页面的加载速度。
[0005]为实现上述目的，本申请提供技术方案如下:
[0006]根据本申请的第一方面，提出了一种页面生成方法，包括:
[0007]获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片；
[0008]根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域--对应的div节点；
[0009]根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。
[0010]根据本申请的第二方面，提出了一种页面生成装置，包括:
[0011]第一图片生成单元，获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片；
[0012]节点生成单元，根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域--对应的div节点；
[0013]第二图片生成单元，根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。
[0014]由以上技术方案可见，本申请通过将HTML数据生成为对应的图片，从而既能够满足网站的安全性需求，又可以缓解用户的页面编辑压力；同时，通过生成对应于整个页面图片的多个页面子图片，使得页面加载过程中，可以对多个页面子图片进行并行加载，有助于提升页面加载速度。
【附图说明】
[0015]图1是根据本申请一示例性实施例的一种页面生成方法的流程图；
[0016]图2是根据本申请一示例性实施例的另一种页面生成方法的流程图；
[0017]图3-8是根据本申请一示例性实施例的页面内容的示意图；
[0018]图9是根据本申请一示例性实施例的一种电子设备的结构示意图；
[0019]图10是根据本申请一示例性实施例的一种页面生成装置的框图。
【具体实施方式】
[0020]为对本申请进行进一步说明，提供下列实施例:
[0021]图1是根据本申请一示例性实施例的一种页面生成方法的流程图，如图1所示，该方法应用于终端，可以包括下述步骤:
[0022]步骤102，获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片。
[0023]在本实施例中，在由HTML页面数据生成页面图片时，可以首先通过html2canvas库将HTML页面数据转换为画布canvas对象，然后将canvas对象转换为对应的页面图片。
[0024]其中，在由canvas对象生成页面图片时，可以通过调用画布接口 canvas API功能，将实现canvas对象向页面图片的转换。
[0025]步骤104，根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域--对应的div节点。
[0026]步骤106，根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。
[0027]在本实施例中，通过生成对应于预设划分方案的div节点，并重新生成对应的页面子图片，使得页面加载过程中可以实现对所有页面子图片的同时、并行加载，有助于提升页面加载速度、避免用户等待。
[0028]在本实施例中，由div节点生成页面子图片的过程，可以与由HTML页面数据生成页面图片的过程类似，包括:首先通过html2canvas库将每个div节点的信息转换为画布canvas对象，然后将canvas对象转换为对应的页面子图片。
[0029]在本实施例中，通过由HTML数据(HTML页面数据或div节点的信息)生成对应的图片，使得无需后台程序执行图片生成操作，也无需在浏览器中安装图片快照插件，即可直接在浏览器的前台完成图片生成过程，尤其适合于网页编辑过程。
[0030]请参考图2，图2是根据本申请一示例性实施例的另一种页面生成方法的流程图，该方法应用于终端，可以包括下述步骤:
[0031]步骤202，获取用户输入的用于页面编辑的HTML页面数据，并通过数据转换步骤，生成对应的页面图片。
[0032]其中，数据转换步骤可以包括:
[0033]步骤302，获取初始HTML数据；此时，初始HTML数据可以为步骤202中获取的HTML页面数据。
[0034]步骤304，通过html2canvas库将初始HTML数据转换为canvas对象；此时，将步骤202中获取的HTML页面数据转换为对应的canvas对象。
[0035]步骤306，调用canvas API功能，将canvas对象转换为图片；此时，对步骤304转换得到的canvas对象进行转换，并得到对应于HTML页面数据的页面图片，该页面图片即整个页面内的所有用户编辑内容对应的图片。
[0036]步骤204，得到由数据转换步骤生成的页面图片。
[0037]步骤206，确定对页面图片的划分方案。
[0038]在本实施例中，由于包含所有用户编辑内容，使得页面图片往往较大，若直接在页面内采用该页面图片，会导致页面加载缓慢，因而需要按照预设划分方案对页面图片进行划分。比如图3所示，可以在垂直方向上将页面图片平均划分为三个部分，即区域A、区域B和区域C。
[0039]步骤208，与每个划分区域——对应地创建div节点。
[0040]在本实施例中，以图3为例，可以分别为区域A、区域B和区域C创建对应的div节点，即div0、divl和div2，且每个div节点对应区域的规格即相应划分区域的规格；比如divO的规格与区域A的规格相同、divl的规格与区域B的规格相同、div2的规格与区域C的规格相同，则后续流程中可以分别生成对应于divO、divl和div2的页面子图片。
[0041]步骤210，将页面图片分别设置为每个div节点的背景。
[0042]在本实施例中，图4示出了将页面图片设置为divO的背景的示意图，由于divO对应于区域A，则对应的偏移参数为O (即无需做偏移处理)，可以直接用于生成图片。类似的，对于divl和div2在设置了背景后，初始状态与图4所示的divO相同，即显示为区域A的内容；然而，divl和div2实际上分别对应于区域B和区域C，因而需要设置对应的偏移参数，实现偏移处理。
[0043]步骤212，为每个div节点分别设置背景的偏移参数。
[0044]在本实施例中，具体按照划分区域与div节点之间的对应关系以及每个划分区域在页面图片上的相对位置信息，设置每个div节点的背景的偏移参数。
[0045]比如图5所示，图5 (a)为未设置偏移参数前的初始状态，此时divl的“视窗”对应于区域A ;通过设置背景的偏移参数，使得背景向上移动，即divl的“视窗”与区域B相对应。具体地，假定页面图片的规格为600像素X1000像素，则区域A、区域B和区域C的规格均为200像素X 1000像素，使得divl背景的偏移参数为向上偏移200像素，从而得到图5(b)所示的情况。
[0046]类似的，图6(a)为未设置偏移参数前的初始状态，此时div2的“视窗”对应于区域A ;通过设置背景的偏移参数，使得背景向上移动，即div2的“视窗”与区域C相对应。仍以页面图片的规格为600像素X 1000像素为例，使得div2背景的偏移参数为向上偏移400像素，从而得到图6(b)所示的情况。
[0047]步骤214，通过数据转换步骤，将步骤212得到最终的div节点的信息，生成对应的页面子图片。
[0048]其中，在步骤302中，获取的初始HTML数据即步骤212得到最终的div节点的信息；在步骤304中，通过html2canvas库将每个div节点的信息转换为对应的canvas对象；在步骤306中，调用canvas API功能，将canvas对象转换为图片，即每个div节点分别对应的页面子图片。
[0049]在本实施例中，由于每个div节点与页面图片上的划分区域分别对应，则如图7所示，得到的页面子图片I (对应于divO)、页面子图片2 (对应于divl)和页面子图片3 (对应于div2)能够共同组成完整的页面图片。
[0050]步骤216，将生成的所有页面子图片更新至对应的页面中。
[0051]需要说明的是:
[0052]I)可以对页面图片采用任意划分方案，比如图8(a)所示，可以对页面图片进行水平划分，得到对应的区域1、区域2和区域3 ;或者，还可以同时采取垂直和水平划分，得到图8(b)所示的区域I’、区域2’和区域3’。
[0053]2)各划分区域可以采用任意规格，比如图8(a)中的区域I和区域2采用的规格为600像素X 1000像素，而区域3采用的规格为600像素X 2000像素；类似的，图8(b)中的区域I’采用的规格为600像素X1500像素，而区域2’和区域3’采用的规格为300像素X 2500像素。
[0054]图9示出了根据本申请的一示例性实施例的电子设备的示意结构图。请参考图9，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成页面生成装置。当然，除了软件实现方式之外，本申请并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。
[0055]请参考图10，在软件实施方式中，该页面生成装置可以第一图片生成单元、节点生成单元和第二图片生成单元。其中:
[0056]第一图片生成单元，获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片；
[0057]节点生成单元，根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域--对应的div节点；
[0058]第二图片生成单元，根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。
[0059]可选的，所述节点生成单元用于:
[0060]与每个划分区域--对应地创建div节点；
[0061]将所述页面图片分别设置为每个div节点的背景；以及
[0062]按照所述划分区域与div节点之间的对应关系以及每个划分区域在所述页面图片上的相对位置信息，设置每个div节点的背景的偏移参数。
[0063]可选的，所述预设划分方案为对所述页面图片进行平均划分。
[0064]可选的，所述第一图片生成单元和所述第二图片生成单元通过数据转换步骤，生成对应于初始HTML数据的图片，其中所述初始HTML数据包括以下至少之一:所述HTML页面数据、每个所述div节点的信息。
[0065]可选的，所述数据转换步骤包括:
[0066]通过html2canvas库将所述初始HTML数据转换为画布canvas对象；
[0067]将所述canvas对象转换为对应的图片。
[0068]可选的，所述第一图片生成单元和所述第二图片生成单元通过调用画布接口canvas API功能，将所述canvas对象转换为对应的图片。
[0069]在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
[0070]内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
[0071]计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
[0072]还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
[0073]以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。
【主权项】
1.一种页面生成方法，其特征在于，包括: 获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片； 根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域--对应的div节点； 根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。2.根据权利要求1所述的方法，其特征在于，所述生成与每个划分区域一一对应的div节点，包括: 与每个划分区域--对应地创建div节点； 将所述页面图片分别设置为每个div节点的背景；以及 按照所述划分区域与div节点之间的对应关系以及每个划分区域在所述页面图片上的相对位置信息，设置每个div节点的背景的偏移参数。3.根据权利要求1所述的方法，其特征在于，所述预设划分方案为对所述页面图片进行平均划分。4.根据权利要求1至3中任一项所述的方法，其特征在于，通过数据转换步骤，生成对应于初始HTML数据的图片； 其中，所述初始HTML数据包括以下至少之一:所述HTML页面数据、每个所述div节点的信息。5.根据权利要求4所述的方法，其特征在于，所述数据转换步骤包括: 通过html2canvas库将所述初始HTML数据转换为画布canvas对象； 将所述canvas对象转换为对应的图片。6.根据权利要求5所述的方法，其特征在于，通过调用画布接口canvasAPI功能，将所述canvas对象转换为对应的图片。7.—种页面生成装置，其特征在于，包括: 第一图片生成单元，获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片； 节点生成单元，根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域--对应的div节点； 第二图片生成单元，根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。8.根据权利要求7所述的装置，其特征在于，所述节点生成单元用于: 与每个划分区域--对应地创建div节点； 将所述页面图片分别设置为每个div节点的背景；以及 按照所述划分区域与div节点之间的对应关系以及每个划分区域在所述页面图片上的相对位置信息，设置每个div节点的背景的偏移参数。9.根据权利要求7所述的装置，其特征在于，所述预设划分方案为对所述页面图片进行平均划分。10.根据权利要求7至9中任一项所述的装置，其特征在于，所述第一图片生成单元和所述第二图片生成单元通过数据转换步骤，生成对应于初始HTML数据的图片，其中所述初始HTML数据包括以下至少之一:所述HTML页面数据、每个所述div节点的信息。11.根据权利要求10所述的装置，其特征在于，所述数据转换步骤包括: 通过html2canvas库将所述初始HTML数据转换为画布canvas对象； 将所述canvas对象转换为对应的图片。12.根据权利要求11所述的装置，其特征在于，所述第一图片生成单元和所述第二图片生成单元通过调用画布接口 canvas API功能，将所述canvas对象转换为对应的图片。
【文档编号】G06F17/30GK105868201SQ201510029092
【公开日】2016年8月17日
【申请日】2015年1月20日
【发明人】荆欣
【申请人】阿里巴巴集团控股有限公司