CN105739963B - 生成网页的方法和装置 - Google Patents

Abstract

本发明提供了一种生成网页的方法和装置，该方法包括：获取输入的待处理图片和用户自定义信息；所述用户自定义信息包括所述待处理图片的布局信息；通过切图插件而采用用户自定义切图算法对所述待处理图片进行切图处理，以获得图形数据；根据所述图形数据和所述用户自定义信息而采用预设网页模板自动生成网页。本发明提供的生成网页的方法和装置，可以避免网页重构者由于使用Photoshop工具来对图片进行切图与导出，再重新排版成网页的大量重复性工作，可以提高网页重构的效率。

Description

生成网页的方法和装置

技术领域

本发明涉及互联网技术领域，特别是涉及一种生成网页的方法和装置。

背景技术

网页重构的工作内容主要是将设计师给出的网页设计稿转化为基于CSS(级联样式表)与HTML(超文本标记语言)形式的网页。一般情况下，设计师给出的网页设计稿有一部分是可以使用CSS与HTML形式呈现的，比如简单文字、纯色背景等，网页重构者可通过文本编辑器将这部分内容使用CSS与HTML形式编写；而网页设计稿另外一部分就需要用图片来呈现，比如复杂样式的按钮、网页背景等。网页重构者需要使用Photoshop(一种Adobe公司开发和发行的图像处理软件)工具将这部分设计稿切图并导出成零散的图片，再重组为网页。切图也可以称为切片，是将图片分解为若干小图片的过程，因为网页中若包含图片，这样打开一个网页所需的时间就比较长，而对图片进行切图处理就可以将图片逐步展示出来，避免网页响应时间太长。

对于不同用途的网页，相应的网页重构工作重心是不一样的。对于游戏网页这样包含大量图片的网页，在网页设计阶段会使用大量图片，这种网页的绝大部分都需要使用Photoshop工具来对图片进行切图并导出的处理，这种大量重复性的工作导致网页重构的效率非常低。

发明内容

基于此，有必要针对对于包含多个图片的网页进行网页重构时因使用Photoshop工具进行切图和导出的工作导致网页重构效率低的问题，提供一种生成网页的方法和装置。

一种生成网页的方法，所述方法包括：

获取输入的待处理图片和用户自定义信息；所述用户自定义信息包括所述待处理图片的布局信息；

通过切图插件而采用用户自定义切图算法对所述待处理图片进行切图处理，以获得图形数据；

根据所述图形数据和所述用户自定义信息而采用预设网页模板自动生成网页。

一种生成网页的装置，所述装置包括：

获取模块，用于获取输入的待处理图片和用户自定义信息；所述用户自定义信息包括所述待处理图片的布局信息；

切图插件，用于采用用户自定义切图算法对所述待处理图片进行切图处理，以获得图形数据；

网页生成模块，用于根据所述图形数据和所述用户自定义信息而采用预设网页模板自动生成网页。

上述生成网页的方法和装置，通过对待处理图片进行切图处理而获得图形数据，并与用户自定义信息结合来自动生成网页，可以避免网页重构者由于使用Photoshop工具来对图片进行切图与导出，再重新排版成网页的大量重复性工作，可以提高网页重构的效率。而且，用户可以编写用于实现用户自定义算法的切图插件来实现自动切图，可以根据不同的网页设计需求而采用不同的切图插件以采用不同的用户自定义切图算法来实现切图，提高操作便利性。而且，最终采用预设网页模板来生成网页，不需要每次重复编写相同类型的网页框架，可进一步提高网页重构的效率。

附图说明

图1为一个实施例中生成网页的方法的流程示意图；

图2为一个实施例中应用生成网页的方法的过程示意图；

图3为一个实施例中根据用户自定义信息生成HTML代码和CSS代码的过程示意图；

图4为一个实施例中生成网页的装置的结构框图；

图5为另一个实施例中生成网页的装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，在一个实施例中，提供了一种生成网页的方法，该方法具体包括以下步骤：

步骤102，获取输入的待处理图片和用户自定义信息；用户自定义信息包括待处理图片的布局信息。

待处理图片是指需要进行切图处理的图片。参照图2，本实施例中可通过调用HTML5的Canvas API(画布应用程序编程接口)来获取输入的待处理图片，还可以将待处理图片进行渲染后提供到Canvas API而展示出来。在一个实施例中，可以对网页设计稿文件中的图片进行预处理，以从网页设计稿文件中标识出待处理图片。

在一个实施例中，设计师在编辑网页设计稿文件时，网页设计稿文件中不同的图像元素分别被编辑为不同的图层，导出为包含图层的可编辑网页设计稿文件，比如PSD(Photoshop工具的专用图片文件格式)格式的网页设计稿文件。从而在执行步骤102时便可以直接将网页设计稿文件中的各个图层分别作为待处理图片。这样可以尽可能减少网页设计师和网页重构者的工作重叠，提高网页重构的效率。这里的不同的元素比如按钮、网页背景等一般作为独立的切图对象的元素。

用户自定义信息是网页重构者输入的信息，至少包括待处理图片的布局信息，比如图片尺寸、图片位置等，图片尺寸包括待处理图片的高和宽。待处理图片的布局信息用于在待处理图片进行切图处理后确定其在网页中的布局。用户自定义信息还可以包括网页中的其它内容，比如网页中的文字、文字格式等信息。用户自定义信息还可以包括语言类型，用于对应不同的语言类型分别生成不同的网页。其中用户自定义信息的输入方式有多种，比如可以通过提供输入控件来获取，也可以将用户自定义信息按照预定格式存储为文件，从而通过读取该文件来获取输入的用户自定义信息。

步骤104，通过切图插件而采用用户自定义切图算法对待处理图片进行切图处理，以获得图形数据。

具体地，切图插件用于实现用户自定义切图算法，由网页重构者根据切图需求而编码获得。通过提供用户开发切图插件的接口，以保证切图插件能完成图片处理的功能。检测到待处理图片的输入时向切图插件触发图片接收指令，以使切图插件响应于图片接收指令，接收到该待处理图片，从而对待处理图片进行切图处理。

切图插件是一个独立的应用程序，可在需要时被调用。切图插件至少具有输出图形数据的接口，用于在采用用户自定义切图算法对待处理图片进行切图处理而获得图形数据后，输出图形数据。图形数据是指对待处理图片进行切图处理后所获得的数据。

其中，自定义切图算法由网页重构者根据切图需求而自行确定，比如通过对图片精度大小、是否用颜色值来代替待处理图片的部分区域、将待处理图片切分为多少部分等参数进行调节而确定不同的自定义切图算法，从而编译生成不同的切图插件。

步骤106，根据图形数据和用户自定义信息而采用预设网页模板自动生成网页。

具体地，预设网页模板是预先编写的网页框架，对于不同的项目可以预先编写不同的预设网页模板，从而可以根据需要而采用相应的预设网页模板为基础，通过网页模板引擎将图形数据和用户自定义信息渲染到该预设网页模板，从而自动生成网页。这里采用预设网页模板自动生成的网页为静态网页，是没有后台数据库和不可交互的网页，可基于该网页进一步构建网页的具体内容。其中根据图形数据对应生成用于生成网页的图片文件，而根据用户自定义信息则对应生成用于生成网页的HTML代码和CSS代码。

这的网页模板引擎可以采用Node.js平台(一种Javascript运行平台)的EJS(EmbeddedJS)模板引擎。EJS模板引擎是一个JavaScript模板库，用来从JSON数据中生成HTML字符串，其中JSON的全称为JavaScript Object Notation，是一种轻量级的数据交换格式。这里的JSON数据来自用户自定义信息。

在常规思维里，网页模板引擎一般用于服务器和浏览器架构中，用于服务器端模板与网页页面的转换。但此处跳出思维，只考虑网页模板引擎执行数据渲染的职责，将图形数据和用户自定义信息渲染到该预设网页模板，利用这一点将网页重构者传入的用户自定义信息渲染成网页，达到生成网页的基础页面的目的。

上述生成网页的方法，通过对待处理图片进行切图处理而获得图形数据，并与用户自定义信息结合来自动生成网页，可以避免网页重构者由于使用Photoshop工具来对图片进行切图与导出，再重新排版成网页的大量重复性工作，可以提高网页重构的效率。而且，用户可以编写用于实现用户自定义算法的切图插件来实现自动切图，可以根据不同的网页设计需求而采用不同的切图插件以采用不同的用户自定义切图算法来实现切图，提高操作便利性。而且，最终采用预设网页模板来生成网页，不需要每次重复编写相同类型的网页框架，可进一步提高网页重构的效率。

在一个实施例中，在步骤106之前，还包括：将图形数据和用户自定义信息进行加密编码而获得编码数据；将编码数据传递到服务器。且步骤106具体包括：通过服务器而将编码数据还原为图形数据和用户自定义信息后，据以采用预设网页模板而自动生成网页。

具体地，本实施例中，步骤106之前的步骤应用于终端上，主要用于获取生成网页的必要数据，包括图形数据和用户自定义信息。将这些必要数据进行加密编码而获得编码数据并传递给服务器，可以保证网页重构的安全性。而且通过服务器来生成网页，可以避开终端的性能瓶颈，保证网页重构的效率。

其中加密编码可以采用Base64编码方式，而Base64编码方式是一种基于64个可打印字符来表示二进制数据的表示方式，可用来把任意序列的8位字节描述为一种不易被人直接识别的形式。可以使用Node.js的File System API(文件系统应用程序编程接口)的fs.write函数，将作为编码数据的Base64字符串保存成图片格式，这里的图片格式可以是PNG(Portable Network Graphic Format，便携网络图形格式)、JPEG(Joint PhotographicExperts Group，联合照片专家组图片格式)等。

在一个实施例中，将图形数据和用户自定义信息进行加密编码而获得编码数据的步骤，具体包括：采用Base64编码方式将图形数据和用户自定义信息进行加密编码而获得编码数据。相应地，将编码数据传递到服务器的步骤具体包括：通过HTML5的表单数据对象将编码数据传递到服务器。

本实施例中，由于采用Base64编码方式进行编码，这样作为编码数据的Base64字符串长度会非常长，这里用HTML5的FormData对象(表单数据对象)来将编码数据传递给服务器，保证传递的效率以及安全性。

在一个实施例中，步骤104具体包括：根据在检测到用户切图事件时所触发的用户切图指令，采用用户自定义切图算法来对待处理图片进行切图处理，以获得图形数据。

具体地，用户切图事件是表示网页重构者对参与切图的过程的事件，比如在待处理图片中框选切图区域，还比如调整自定义切图算法中的切图数量、图片精度等切图参数。在检测到这些用户切图事件时向切图插件触发相应的用户切图指令，然后调用切图插件，基于用户切图指令所指定的切图区域或切图参数等信息，运用用户自定义切图算法来执行切图操作，从而获得图形数据。

在一个实施例中，步骤106具体包括：通过图片压缩算法库而对图形数据进行压缩，并通过网页模板引擎以根据压缩的图形数据和用户自定义信息而采用预设网页模板自动生成网页。

具体地，可以提供用户交互页面，从而响应于网页重构者对该用户交互页面的动作而触发图形数据压缩指令，该图形数据压缩指令用于触发对图形数据进行压缩的操作。具体终端的用户交互页面只需向服务器发起一个ajax(Asynchronous Javascript AndXML，异步JavaScript和XML；XML意为可扩展标记语言，是指一种创建交互式网页应用的网页开发技术)请求就可以实现向服务器发送图形数据压缩指令。可以通过Node.js的Node-imagemin库(一种图片压缩算法库)来执行图形数据的压缩操作。本实施例中，对图形数据进行压缩，可以使得生成的网页可以达到更高的访问性能。

参照图2，图2中虚线方框内的内容原本分别由Photoshop工具和Fireworks(Adobe公司推出的一款网页作图软件)工具来实现。而采用上述生成网页的方法，不需要安装Photoshop工具和Fireworks工具，就可以实现对图片的切图处理、压缩从而自动生成基础的静态网页，极大地提高了网页重构的效率。而且可以省去频繁切换至操作系统的资源管理器以查看图片尺寸的麻烦。采用预设网页模板从而不必重复编写相同类型的网页页面框架。

如图4所示，在一个实施例中，提供了一种生成网页的装置400，具有实现上述任意实施例的生成网页的方法的功能。该生成网页的装置400包括获取模块401、切图插件402和网页生成模块403。

获取模块401，用于获取输入的待处理图片和用户自定义信息；用户自定义信息包括待处理图片的布局信息；

本实施例中获取模块401可用于通过调用HTML5的Canvas API(画布应用程序编程接口)来获取输入的待处理图片，还可以将待处理图片进行渲染后提供到Canvas API而展示出来。在一个实施例中，可以对网页设计稿文件中的图片进行预处理，以从网页设计稿文件中标识出待处理图片。

在一个实施例中，设计师在编辑网页设计稿文件时，网页设计稿文件中不同的图像元素分别被编辑为不同的图层，导出为包含图层的可编辑网页设计稿文件，比如PSD(Photoshop工具的专用图片文件格式)格式的网页设计稿文件。从而获取模块401用于直接将网页设计稿文件中的各个图层分别作为待处理图片。这样可以尽可能减少网页设计师和网页重构者的工作重叠，提高网页重构的效率。这里的不同的元素比如按钮、网页背景等一般作为独立的切图对象的元素。

用户自定义信息是网页重构者输入的信息，至少包括待处理图片的布局信息，比如图片尺寸、图片位置等，图片尺寸包括待处理图片的高和宽。待处理图片的布局信息用于在待处理图片进行切图处理后确定其在网页中的布局。用户自定义信息还可以包括网页中的其它内容，比如网页中的文字、文字格式等信息。用户自定义信息还可以包括语言类型，用于对应不同的语言类型分别生成不同的网页。其中用户自定义信息的输入方式有多种，比如获取模块401可以用于通过提供输入控件来获取，也可以将用户自定义信息按照预定格式存储为文件，从而获取模块401用于通过读取该文件来获取输入的用户自定义信息。

切图插件402，用于采用用户自定义切图算法对待处理图片进行切图处理，以获得图形数据。

切图插件402用于实现用户自定义切图算法，由网页重构者根据切图需求而编码获得。切图插件402至少具有输出图形数据的接口，用于在采用用户自定义切图算法对待处理图片进行切图处理而获得图形数据后，输出图形数据。图形数据是指对待处理图片进行切图处理后所获得的数据。

其中，自定义切图算法由网页重构者根据切图需求而自行确定，比如通过对图片精度大小、是否用颜色值来代替待处理图片的部分区域、将待处理图片切分为多少部分等参数进行调节而确定不同的自定义切图算法，从而编译生成不同的切图插件402。

网页生成模块403，用于根据图形数据和用户自定义信息而采用预设网页模板自动生成网页。

具体地，预设网页模板是预先编写的网页框架，对于不同的项目可以预先编写不同的预设网页模板，从而可以根据需要而采用相应的预设网页模板为基础，通过网页模板引擎将图形数据和用户自定义信息渲染到该预设网页模板，从而自动生成网页。这里采用预设网页模板自动生成的网页为静态网页，是没有后台数据库和不可交互的网页，可基于该网页进一步构建网页的具体内容。其中网页生成模块403用于根据图形数据对应生成用于生成网页的图片文件，还用于根据用户自定义信息则对应生成用于生成网页的HTML代码和CSS代码。

这的网页模板引擎可以采用Node.js平台(一种Javascript运行平台)的EJS(EmbeddedJS)模板引擎。EJS模板引擎是一个JavaScript模板库，用来从JSON数据中生成HTML字符串，其中JSON的全称为JavaScript Object Notation，是一种轻量级的数据交换格式。这里的JSON数据来自用户自定义信息。

在常规思维里，网页模板引擎一般用于服务器和浏览器架构中，用于服务器端模板与网页页面的转换。但此处跳出思维，只考虑网页模板引擎执行数据渲染的职责，将图形数据和用户自定义信息渲染到该预设网页模板，利用这一点将网页重构者传入的用户自定义信息渲染成网页，达到生成网页的基础页面的目的。

上述生成网页的装置400，通过对待处理图片进行切图处理而获得图形数据，并与用户自定义信息结合来自动生成网页，可以避免网页重构者由于使用Photoshop工具来对图片进行切图与导出，再重新排版成网页的大量重复性工作，可以提高网页重构的效率。而且，用户可以编写用于实现用户自定义算法的切图插件来实现自动切图，可以根据不同的网页设计需求而采用不同的切图插件以采用不同的用户自定义切图算法来实现切图，提高操作便利性。而且，最终采用预设网页模板来生成网页，不需要每次重复编写相同类型的网页框架，可进一步提高网页重构的效率。

如图5所示在，在一个实施例中，该生成网页的装置400还包括：切图底层模块404和数据交互模块405。网页生成模块403部署在服务器上。

切图底层模块404，用于将图形数据和用户自定义信息进行加密编码而获得编码数据。

数据交互模块405，用于将编码数据传递到服务器。

网页生成模块403，用于将编码数据还原为图形数据和用户自定义信息后，据以采用预设网页模板而自动生成网页。

在一个实施例中，切图底层模块404还用于采用Base64编码方式将图形数据和用户自定义信息进行加密编码而获得编码数据。数据交互模块405还用于通过HTML5的表单数据对象将编码数据传递到服务器。本实施例中，由于采用Base64编码方式进行编码，这样作为编码数据的Base64字符串长度会非常长，这里用HTML5的表单数据对象来将编码数据传递给服务器，保证传递的效率以及安全性。

在一个实施例中，切图插件402还用于根据在检测到用户切图事件时所触发的用户切图指令，采用用户自定义切图算法来对待处理图片进行切图处理，以获得图形数据。

具体地，用户切图事件是表示网页重构者对参与切图的过程的事件，比如在待处理图片中框选切图区域，还比如调整自定义切图算法中的切图数量、图片精度等切图参数。切图插件402用于在检测到这些用户切图事件时触发相应的用户切图指令，基于用户切图指令所指定的切图区域或切图参数等信息，运用用户自定义切图算法来执行切图操作，从而获得图形数据。

在一个实施例中，网页生成模块403还用于通过图片压缩算法库而对图形数据进行压缩，并通过网页模板引擎以根据压缩的图形数据和用户自定义信息而采用预设网页模板自动生成网页。

具体地，可以提供用户交互页面，从而响应于网页重构者对该用户交互页面的动作而触发图形数据压缩指令，该图形数据压缩指令用于触发对图形数据进行压缩的操作。具体终端的用户交互页面只需向服务器发起一个ajax请求就可以实现向服务器发送图形数据压缩指令。可以通过Node.js的Node-imagemin库来执行图形数据的压缩操作。本实施例中，对图形数据进行压缩，可以使得生成的网页可以达到更高的访问性能。

上述生成网页的装置400，不需要安装Photoshop工具和Fireworks(Adobe公司推出的一款网页作图软件)工具，就可以实现对图片的切图处理、压缩从而自动生成基础的静态网页，极大地提高了网页重构的效率。而且可以省去频繁切换至操作系统的资源管理器以查看图片尺寸的麻烦。采用预设网页模板从而不必重复编写相同类型的网页页面框架。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种生成网页的方法，所述方法包括：

获取输入的待处理图片和用户自定义信息；所述用户自定义信息包括所述待处理图片的布局信息；

通过切图插件而采用用户自定义切图算法对所述待处理图片进行切图处理，以获得图形数据；

根据所述图形数据和所述用户自定义信息而采用预设网页模板自动生成网页；

所述自定义切图算法由网页重构者根据切图需求自行确定，根据不同的自定义切图算法能够编译生成不同的切图插件。

2.根据权利要求1所述的方法，其特征在于，所述根据所述图形数据和所述用户自定义信息而采用预设网页模板自动生成网页之前，还包括：

将所述图形数据和所述用户自定义信息进行加密编码而获得编码数据；

将所述编码数据传递到服务器；

所述根据所述图形数据和所述用户自定义信息而采用预设网页模板自动生成网页，包括：

通过所述服务器而将所述编码数据还原为所述图形数据和所述用户自定义信息后，据以采用预设网页模板而自动生成网页。

3.根据权利要求2所述的方法，其特征在于，所述将所述图形数据和所述用户自定义信息进行加密编码而获得编码数据，包括：

采用Base64编码方式将所述图形数据和所述用户自定义信息进行加密编码而获得编码数据；

所述将所述编码数据传递到服务器，包括：

通过HTML5的表单数据对象将所述编码数据传递到服务器。

4.根据权利要求1所述的方法，其特征在于，所述通过切图插件而采用用户自定义切图算法对所述待处理图片进行切图处理，以获得图形数据，包括：

根据在检测到用户切图事件时所触发的用户切图指令，采用用户自定义切图算法来对所述待处理图片进行切图处理，以获得图形数据。

5.根据权利要求1所述的方法，其特征在于，所述根据所述图形数据和所述用户自定义信息而采用预设网页模板自动生成网页，包括：

通过图片压缩算法库而对所述图形数据进行压缩，并通过网页模板引擎以根据压缩的图形数据和所述用户自定义信息而采用预设网页模板自动生成网页。

6.一种生成网页的装置，其特征在于，所述装置包括：

获取模块，用于获取输入的待处理图片和用户自定义信息；所述用户自定义信息包括所述待处理图片的布局信息；

切图插件，用于采用用户自定义切图算法对所述待处理图片进行切图处理，以获得图形数据；

网页生成模块，用于根据所述图形数据和所述用户自定义信息而采用预设网页模板自动生成网页；

所述自定义切图算法由网页重构者根据切图需求自行确定，根据不同的自定义切图算法能够编译生成不同的切图插件。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

切图底层模块，用于将所述图形数据和所述用户自定义信息进行加密编码而获得编码数据；

数据交互模块，用于将所述编码数据传递到服务器；

所述网页生成模块部署在所述服务器上，用于将所述编码数据还原为所述图形数据和所述用户自定义信息后，据以采用预设网页模板而自动生成网页。

8.根据权利要求7所述的装置，其特征在于，所述切图底层模块还用于采用Base64编码方式将所述图形数据和所述用户自定义信息进行加密编码而获得编码数据；

所述数据交互模块还用于通过HTML5的表单数据对象将所述编码数据传递到服务器。

9.根据权利要求6所述的装置，其特征在于，所述切图插件还用于根据在检测到用户切图事件时所触发的用户切图指令，采用用户自定义切图算法来对所述待处理图片进行切图处理，以获得图形数据。

10.根据权利要求6所述的装置，其特征在于，所述网页生成模块还用于通过图片压缩算法库而对所述图形数据进行压缩，并通过网页模板引擎以根据压缩的图形数据和所述用户自定义信息而采用预设网页模板自动生成网页。