CN105868201A - 页面生成方法及装置 - Google Patents

页面生成方法及装置 Download PDF

Info

Publication number
CN105868201A
CN105868201A CN201510029092.0A CN201510029092A CN105868201A CN 105868201 A CN105868201 A CN 105868201A CN 201510029092 A CN201510029092 A CN 201510029092A CN 105868201 A CN105868201 A CN 105868201A
Authority
CN
China
Prior art keywords
page
pictures
data
zoning
picture
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201510029092.0A
Other languages
English (en)
Other versions
CN105868201B (zh
Inventor
荆欣
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201510029092.0A priority Critical patent/CN105868201B/zh
Publication of CN105868201A publication Critical patent/CN105868201A/zh
Application granted granted Critical
Publication of CN105868201B publication Critical patent/CN105868201B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

本申请提供一种页面生成方法及装置，该方法包括：获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片；根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域一一对应的div节点；根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。通过本申请的技术方案，可以将用户输入的任意HTML数据自动生成为多个页面子图片，可以确保网站的安全性需求，并且能够提升页面的加载速度。

Description

页面生成方法及装置
技术领域
本申请涉及互联网技术领域，尤其涉及页面生成方法及装置。
背景技术
在一些网站中，允许用户申请个人主页，并对该页面进行编辑，但为了确保网络安全、防止网页内容混乱等目的，编辑内容采用图片和链接元素。
然而，用户的编辑元素往往还包含除图片和链接外的其他多种元素，导致用户无法顺利执行页面编辑操作。
发明内容
有鉴于此，本申请提供一种页面生成方法及装置，可以将用户输入的任意HTML页面数据自动生成为多个页面子图片，可以确保网站的安全性需求，并且能够提升页面的加载速度。
为实现上述目的，本申请提供技术方案如下：
根据本申请的第一方面，提出了一种页面生成方法，包括：
获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片；
根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域一一对应的div节点；
根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。
根据本申请的第二方面，提出了一种页面生成装置，包括：
第一图片生成单元，获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片；
节点生成单元，根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域一一对应的div节点；
第二图片生成单元，根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。
由以上技术方案可见，本申请通过将HTML数据生成为对应的图片，从而既能够满足网站的安全性需求，又可以缓解用户的页面编辑压力；同时，通过生成对应于整个页面图片的多个页面子图片，使得页面加载过程中，可以对多个页面子图片进行并行加载，有助于提升页面加载速度。
附图说明
图1是根据本申请一示例性实施例的一种页面生成方法的流程图；
图2是根据本申请一示例性实施例的另一种页面生成方法的流程图；
图3-8是根据本申请一示例性实施例的页面内容的示意图；
图9是根据本申请一示例性实施例的一种电子设备的结构示意图；
图10是根据本申请一示例性实施例的一种页面生成装置的框图。
具体实施方式
为对本申请进行进一步说明，提供下列实施例：
图1是根据本申请一示例性实施例的一种页面生成方法的流程图，如图1所示，该方法应用于终端，可以包括下述步骤：
步骤102，获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片。
在本实施例中，在由HTML页面数据生成页面图片时，可以首先通过html2canvas库将HTML页面数据转换为画布canvas对象，然后将canvas对象转换为对应的页面图片。
其中，在由canvas对象生成页面图片时，可以通过调用画布接口canvasAPI功能，将实现canvas对象向页面图片的转换。
步骤104，根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域一一对应的div节点。
步骤106，根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。
在本实施例中，通过生成对应于预设划分方案的div节点，并重新生成对应的页面子图片，使得页面加载过程中可以实现对所有页面子图片的同时、并行加载，有助于提升页面加载速度、避免用户等待。
在本实施例中，由div节点生成页面子图片的过程，可以与由HTML页面数据生成页面图片的过程类似，包括：首先通过html2canvas库将每个div节点的信息转换为画布canvas对象，然后将canvas对象转换为对应的页面子图片。
在本实施例中，通过由HTML数据(HTML页面数据或div节点的信息)生成对应的图片，使得无需后台程序执行图片生成操作，也无需在浏览器中安装图片快照插件，即可直接在浏览器的前台完成图片生成过程，尤其适合于网页编辑过程。
请参考图2，图2是根据本申请一示例性实施例的另一种页面生成方法的流程图，该方法应用于终端，可以包括下述步骤：
步骤202，获取用户输入的用于页面编辑的HTML页面数据，并通过数据转换步骤，生成对应的页面图片。
其中，数据转换步骤可以包括：
步骤302，获取初始HTML数据；此时，初始HTML数据可以为步骤202中获取的HTML页面数据。
步骤304，通过html2canvas库将初始HTML数据转换为canvas对象；此时，将步骤202中获取的HTML页面数据转换为对应的canvas对象。
步骤306，调用canvas API功能，将canvas对象转换为图片；此时，对步骤304转换得到的canvas对象进行转换，并得到对应于HTML页面数据的页面图片，该页面图片即整个页面内的所有用户编辑内容对应的图片。
步骤204，得到由数据转换步骤生成的页面图片。
步骤206，确定对页面图片的划分方案。
在本实施例中，由于包含所有用户编辑内容，使得页面图片往往较大，若直接在页面内采用该页面图片，会导致页面加载缓慢，因而需要按照预设划分方案对页面图片进行划分。比如图3所示，可以在垂直方向上将页面图片平均划分为三个部分，即区域A、区域B和区域C。
步骤208，与每个划分区域一一对应地创建div节点。
在本实施例中，以图3为例，可以分别为区域A、区域B和区域C创建对应的div节点，即div0、div1和div2，且每个div节点对应区域的规格即相应划分区域的规格；比如div0的规格与区域A的规格相同、div1的规格与区域B的规格相同、div2的规格与区域C的规格相同，则后续流程中可以分别生成对应于div0、div1和div2的页面子图片。
步骤210，将页面图片分别设置为每个div节点的背景。
在本实施例中，图4示出了将页面图片设置为div0的背景的示意图，由于div0对应于区域A，则对应的偏移参数为0(即无需做偏移处理)，可以直接用于生成图片。类似的，对于div1和div2在设置了背景后，初始状态与图4所示的div0相同，即显示为区域A的内容；然而，div1和div2实际上分别对应于区域B和区域C，因而需要设置对应的偏移参数，实现偏移处理。
步骤212，为每个div节点分别设置背景的偏移参数。
在本实施例中，具体按照划分区域与div节点之间的对应关系以及每个划分区域在页面图片上的相对位置信息，设置每个div节点的背景的偏移参数。
比如图5所示，图5(a)为未设置偏移参数前的初始状态，此时div1的“视窗”对应于区域A；通过设置背景的偏移参数，使得背景向上移动，即div1的“视窗”与区域B相对应。具体地，假定页面图片的规格为600像素×1000像素，则区域A、区域B和区域C的规格均为200像素×1000像素，使得div1背景的偏移参数为向上偏移200像素，从而得到图5(b)所示的情况。
类似的，图6(a)为未设置偏移参数前的初始状态，此时div2的“视窗”对应于区域A；通过设置背景的偏移参数，使得背景向上移动，即div2的“视窗”与区域C相对应。仍以页面图片的规格为600像素×1000像素为例，使得div2背景的偏移参数为向上偏移400像素，从而得到图6(b)所示的情况。
步骤214，通过数据转换步骤，将步骤212得到最终的div节点的信息，生成对应的页面子图片。
其中，在步骤302中，获取的初始HTML数据即步骤212得到最终的div节点的信息；在步骤304中，通过html2canvas库将每个div节点的信息转换为对应的canvas对象；在步骤306中，调用canvas API功能，将canvas对象转换为图片，即每个div节点分别对应的页面子图片。
在本实施例中，由于每个div节点与页面图片上的划分区域分别对应，则如图7所示，得到的页面子图片1(对应于div0)、页面子图片2(对应于div1)和页面子图片3(对应于div2)能够共同组成完整的页面图片。
步骤216，将生成的所有页面子图片更新至对应的页面中。
需要说明的是：
1)可以对页面图片采用任意划分方案，比如图8(a)所示，可以对页面图片进行水平划分，得到对应的区域1、区域2和区域3；或者，还可以同时采取垂直和水平划分，得到图8(b)所示的区域1’、区域2’和区域3’。
2)各划分区域可以采用任意规格，比如图8(a)中的区域1和区域2采用的规格为600像素×1000像素，而区域3采用的规格为600像素×2000像素；类似的，图8(b)中的区域1’采用的规格为600像素×1500像素，而区域2’和区域3’采用的规格为300像素×2500像素。
图9示出了根据本申请的一示例性实施例的电子设备的示意结构图。请参考图9，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成页面生成装置。当然，除了软件实现方式之外，本申请并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。
请参考图10，在软件实施方式中，该页面生成装置可以第一图片生成单元、节点生成单元和第二图片生成单元。其中：
第一图片生成单元，获取用户输入的HTML页面数据，并生成对应于所述HTML页面数据的页面图片；
节点生成单元，根据对所述页面图片的预设划分方案，确定对应的划分区域并生成与每个划分区域一一对应的div节点；
第二图片生成单元，根据每个所述div节点的信息，生成与相应划分区域对应的页面子图片，并更新至对应的页面中。
可选的，所述节点生成单元用于：
与每个划分区域一一对应地创建div节点；
将所述页面图片分别设置为每个div节点的背景；以及
按照所述划分区域与div节点之间的对应关系以及每个划分区域在所述页面图片上的相对位置信息，设置每个div节点的背景的偏移参数。
可选的，所述预设划分方案为对所述页面图片进行平均划分。
可选的，所述第一图片生成单元和所述第二图片生成单元通过数据转换步骤，生成对应于初始HTML数据的图片，其中所述初始HTML数据包括以下至少之一：所述HTML页面数据、每个所述div节点的信息。
可选的，所述数据转换步骤包括：
通过html2canvas库将所述初始HTML数据转换为画布canvas对象；
将所述canvas对象转换为对应的图片。
可选的，所述第一图片生成单元和所述第二图片生成单元通过调用画布接口canvas API功能，将所述canvas对象转换为对应的图片。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (12)

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对象转换为对应的图片。
CN201510029092.0A 2015-01-20 2015-01-20 页面生成方法及装置 Active CN105868201B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510029092.0A CN105868201B (zh) 2015-01-20 2015-01-20 页面生成方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510029092.0A CN105868201B (zh) 2015-01-20 2015-01-20 页面生成方法及装置

Publications (2)

Publication Number Publication Date
CN105868201A true CN105868201A (zh) 2016-08-17
CN105868201B CN105868201B (zh) 2020-01-03

Family

ID=56623254

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510029092.0A Active CN105868201B (zh) 2015-01-20 2015-01-20 页面生成方法及装置

Country Status (1)

Country Link
CN (1) CN105868201B (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109299412A (zh) * 2018-08-24 2019-02-01 四川爱创科技有限公司 应用于web端的图片预处理方法
CN109670132A (zh) * 2018-12-18 2019-04-23 北京城市网邻信息技术有限公司 一种页面绘制方法、装置、终端设备及存储介质
CN110647695A (zh) * 2019-08-12 2020-01-03 深圳点猫科技有限公司 网页页面数据转换成图片附件的方法与装置
WO2023202403A1 (zh) * 2022-04-20 2023-10-26 北京沃东天骏信息技术有限公司 页面渲染方法、装置、电子设备及计算机可读存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070112874A1 (en) * 2004-06-25 2007-05-17 Andrew Carol Methods and systems for managing data
CN102065114A (zh) * 2009-11-17 2011-05-18 中国移动通信集团重庆有限公司 一种移动终端访问网页的方法及装置
CN103365862A (zh) * 2012-03-28 2013-10-23 北京百度网讯科技有限公司 一种用于生成与页面对应的图片的方法与设备
CN103942023A (zh) * 2014-03-31 2014-07-23 广东威创视讯科技股份有限公司 一种显示处理方法及终端

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070112874A1 (en) * 2004-06-25 2007-05-17 Andrew Carol Methods and systems for managing data
CN102065114A (zh) * 2009-11-17 2011-05-18 中国移动通信集团重庆有限公司 一种移动终端访问网页的方法及装置
CN103365862A (zh) * 2012-03-28 2013-10-23 北京百度网讯科技有限公司 一种用于生成与页面对应的图片的方法与设备
CN103942023A (zh) * 2014-03-31 2014-07-23 广东威创视讯科技股份有限公司 一种显示处理方法及终端

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109299412A (zh) * 2018-08-24 2019-02-01 四川爱创科技有限公司 应用于web端的图片预处理方法
CN109299412B (zh) * 2018-08-24 2022-04-05 四川爱创科技有限公司 应用于web端的图片预处理方法
CN109670132A (zh) * 2018-12-18 2019-04-23 北京城市网邻信息技术有限公司 一种页面绘制方法、装置、终端设备及存储介质
CN110647695A (zh) * 2019-08-12 2020-01-03 深圳点猫科技有限公司 网页页面数据转换成图片附件的方法与装置
WO2023202403A1 (zh) * 2022-04-20 2023-10-26 北京沃东天骏信息技术有限公司 页面渲染方法、装置、电子设备及计算机可读存储介质

Also Published As

Publication number Publication date
CN105868201B (zh) 2020-01-03

Similar Documents

Publication Publication Date Title
CN107852412B (zh) 用于网络钓鱼和品牌保护的系统和方法、计算机可读介质
CN107704576B (zh) 数据展示优化方法、装置、终端设备及存储介质
EP3435225B1 (en) Mixed view display method and device
KR102348766B1 (ko) 데이터 처리 방법 및 장치
US8909596B1 (en) Operational-transform-compatible representation of 2-dimensional page layout data
CN105868201A (zh) 页面生成方法及装置
CN109783757B (zh) 渲染网页的方法及装置、系统、存储介质、电子装置
DE112017000513T5 (de) Technologien zur gegenseitigen Abschottung von Anwendungen mit von einem Prozessor erzwungenen Sicherheitsenklaven
CN107526592B (zh) 一种页面适配方法和装置
CN104978433A (zh) 一种网页显示方法及装置
CN113127361B (zh) 应用程序的开发方法、装置、电子设备和存储介质
CN113467817B (zh) 一种应用管理方法、系统、介质及电子终端
CN105867944A (zh) Web前端数据操作层及其实现方法
CN110362547A (zh) 日志文件的编码、解析、存储方法和装置
CN105320662B (zh) 网页生成方法及装置
CN107403014A (zh) 图像文件的显示方法、装置及系统
CN106168959A (zh) 网页布局方法及装置
CN104077213A (zh) 一种webkit单元测试方法及装置
CN107391534A (zh) 页面显示、页面文件返回方法及装置、计算机存储介质
CN106817355B (zh) 网页权限的控制方法及装置
CN112527424A (zh) 用于弹窗的控制方法及装置
CN112015768A (zh) 一种基于Rete算法的信息匹配方法及其相关产品
CN114861103B (zh) 页面回溯方法及其装置、介质和电子设备
CN107562749A (zh) 一种网页加载方法及网页加载装置
CN106681972A (zh) 表格显示方法及装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant