CN109829127A - 快速解析psd文件为网页的方法 - Google Patents

Abstract

本发明提出了一种快速解析PSD文件为网页的方法。本方法是：本方案主要分为PSD源文件的解析和解析后图层恢复两个部分。对于PSD源文件的解析，本方案是用JavaScript扩展语言进行开发。根据PSD文件中图层的分类：第一，解析PSD源文件的文本图层，我们需要获得该文本图层的图层ID、文本内容、文本框位置、字体大小、字体颜色、字体类型等信息。然后将上面获得的信息封装为JSON格式，最后写入到一个.TXT文件中。第二，解析PSD源文件的普通图层，我们采用的是分层导出的方法。将所有普通的图层导出为PNG格式的图片，另外我们通过上面的方法获得普通图层的图层ID以及位置信息。对于图层的恢复部分：我们开发了一个后台处理平台，用于处理解析到的信息。在使用时，用户只需要将上面获得的文本信息和PNG图片分别提交给后台就可以恢复原来的图片。本发明提出的方案可以更高效的将PSD文件转化为网页格式，避免了繁杂的人工切图过程。

Description

快速解析PSD文件为网页的方法

技术领域

本发明涉及的是快速解析PSD(一种图片存储格式)文件为网页的方法，它是利用图像处理和计算机编程语言解析PSD文件为网页，为了快速便捷的解析PSD文件，而提出的一种高效解析方案。

背景技术

随着互联网技术的发展，我国网络购物的用户规模不断上升。近年来，随着各大电商平台的强势发展，更是有取代线下实体店的趋势。而随着线上平台的竞争不断增大，卖家如何将自己的商品更好的展现给用户就显得至关重要，我们都知道线上销售不可能像实体店那样直接进行实物展示，卖家只能通过网页的形式让客户去了解商品。目前大多数店铺的网页都是根据客户需求由美工设计好模板，再进行切图，最后把切好的图片提供给技术人员重组到网页上去。这种模式使得网页的可移植性变差，用户如果想要更改就必须依赖美工重新进行设计，对美工的依赖性很大。设想这样一种情景：某一个店铺新进了一批商品，那么对于这些商品的展示是急需的，但是店家只能去找美工定制自己的介绍页面。美工再将设计好的页面提供给技术人员转换成网页的形式。最后，店铺才能使用到。这个过程是繁琐的，而且店铺的成本花销也在无形中增加了。

目前美工设计好商品介绍模板之后主要通过图1所示的流程转换为网页格式，这种流程存在的弊端是，在切图部分现在能做到的是通过PhotoShop(一种图片处理软件)提供的切图工具进行切图，然后保存为网页提供给开发人员使用。然后技术人员在使用美工提供的切图的时候还需要考虑美工的设计思路，对图片进行恢复。这样做的结果是美工做了大量的技术人员的工作，而技术人员又做了美工的工作。这就导致整个过程效率低下。

发明内容

本发明的目的在于针对已有技术存在的不足，提供一种快速解析PSD文件为网页的方法，本方法能够快速解析PSD文件，并重构为网页形式。

为了实现以上目的，本发明的构想是：

首先整个系统分为两个主要部分，第一部分是解析PSD文件，用来获得PSD图层的信息，包括文本信息以及导出PNG(一种图片格式)图片。第二部分是后台处理以及展示，该部分主要用于处理第一部分获得的文本信息和PNG图片，将图片按照原来的顺序及格式重新拼接，最后获得网页的格式，并展示在我们的模板网站上。用户可以根据自己的需求选择要使用的模板，另外还可以在线对模板进行编辑，包括更改它的文字内容或图片。

根据上述发明构想，本发明采用下述技术方案：

1.一种快速解析PSD文件为网页的方法，其特征在于操作步骤如下：

1)PSD文件快速解析；

2)将解析文件重建为网页。

2.所述步骤1)PSD文件快速解析的方法为：

1-1)对PSD文件进行栅格化操作，并遍历PSD文件；

1-2)将PSD文件的所有图层按类型进行分类，包括：图层组，文本图层和普通图层；

1-3)对1-2)步骤中的图层进行分类处理，对图层组重复1-2)步骤，对文本图层提取其内容信息以及位置信息，对普通图层将其导出为PNG图片并记录位置信息。

3.所述步骤2)将解析文件重建为网页的方法为：

2-1)将解析后的PSD文件的信息，包括文本信息和PNG图片提交给网站；

2-2)网站读取文本信息的内容，获得PSD文件图层的位置，大小以及内容信息；

2-3)PNG图片作为资源，在其特定的位置进行调用；

2-4)进行上述步骤后处理后，将PNG图片按照原来的样式拼接。

本发明与现有技术相比具有如下显而易见的实质性特点和显著技术进步：本发明与切片工具进行人工切图相比，简化了切图的繁杂过程；该发明使用脚本语言对PSD文件进行自动化解析，最大程度上减少了人为干预，使得切图更加准确快速；该发明解析后的PSD文件可以编辑修改，便于其他平台使用。

附图说明

图1为传统PSD转换流程图；

图2为本发明“快速解析PSD文件为网页”的流程框图；

图3为在PhotoShop中打开的要解析的PSD文件；

图4为解析后的文本图层生成的信息；

图5为解析后导出的普通图层；

图6为提交数据的界面的PSD模板内容；

图7为提交数据的界面的PSD模板图片；

图8为恢复为网页之后的效果图；

图9为上传的几个模板效果图。

具体实施方式

本发明的优选实施例结合附图详述如下：

实施例一：参见图2-图8

本PSD文件快速解析为网页的方法的具体实现步骤如下：

(一)实现PSD文件的快速解析步骤如下：

(1)将PSD文件在PhotoShop中打开，在编写脚本的时候我们的思路是：首先对PSD文件包含的所有图层进行遍历，在遍历的过程中识别每一个图层的类型，包括图层组、文本图层和普通图层。图层类型不同所存储的信息也不相同，所以我们要分别进行处理。当遍历到图层组的时候就执行步骤2，当遍历到文本图层的时候就执行步骤3和4，当遍历到普通图层的时候就执行步骤5。

(2)图层组是PSD文件中的一种格式，它里面又可以包含多个图层或组，属于一种嵌套结构。因此，在进行遍历的过程中，如果遇到图层组，就要对其进一步进行遍历来判断组内是否还含有其它的图层。如果含有其它图层，则对当前图层组进一步进行遍历，当遍历完这个图层组以后再接着往下遍历。以此类推，直到遍历完所有图层，这里我们采用的是递归的方式。

(3)文本图层用于存储PSD文件中的文字信息，在整个系统中，考虑到后面还需要将解析过的PSD文件进行恢复，因此我们必须获得图层的位置信息，另外还要记得每个图层的顺序，最后还要知道文字信息中所采用的字体、大小、颜色等信息。获取这些信息的具体代码展示如下：

app.document.layer.textItem.font//获取字体

app.document.layer.textItem.contents//获取内容

app.document.layer.textItem.size//获取字体大小

app.document.layer.textItem.color//获取字体颜色

app.document.layer.id//获取图层id

通过以上指令我们就可以获取一个文本图层所包含的基本信息，最后我们将这些文件写入到一个.TXT文件，写入之前先进行步骤四的转换。

(4)如果直接以文本形式写入到.TXT文件，会给后面的使用带来麻烦。我们需要将获得的信息以JSON的格式输出，形如{“font”：“宋体”}。在这里，考虑PSD文件中结构的特殊性，它本身不仅具有图层特性还具有组的特性。我们正好可以在程序中直接对获得的信息封装为键值的样式。完成格式转换以后就可以写入到.TXT文件。

(5)普通图层是PSD文件用于存储图片信息的。为了方便后面用户对其进行编辑，我们对普通图层的处理是这样的，将所有的普通图层以PNG格式分层导出。这里，采用PNG格式是因为它可以记录图层的透明度信息。导出的每一个图层，我们都以它的ID号对其命名。最终要的是要获得图层的位置信息。它的位置信息我们可以采用下面的指令获得：

Letf：App.Document.layer.bouns[0]；//获得图层的左边界位置

Top：App.Document.layer.bouns[1]；//获得图层的上边界位置

Bottom：App.Document.layer.bouns[2]；//获得图层的底边界位置

Right：App.Document.layer.bouns[3]；//获得图层的右边界位置

上面的指令获得的是边界像素值，它是以背景图层的左上角为坐标原点(0px，0px)。那么通过下面的公式就可以获得图片的大小。

Length＝Right-Letf//长＝右边界-左边界(4-1)

Height＝Bottom-Top//高＝底边界-上边界(4-2)

以上，获得全部必要的信息之后我们通过脚本新建一个图层，然后将其大小设置为公式4-1以及公式4-2中得到的值。然后，将该图层复制到新建图层中。最后，将新建图层保存为PNG格式，并将其命名为它的ID值。

(二)将解析文件重构为网页

(1)首先，获取解析后的信息。在这里，我们使用java语言开发了一个后台管理平台，在这个平台中，我们提供了两个提交框，分别用来提交.TXT文件和PNG图片集。在使用的时候只需要直接上传就可以了。对于图片，我们设置单次上传最大值为20。

(2)在前端页面中我们将后台的数据进行显示，对于图片，设置它的位置，以及大小等。对于文字设置它的字体、大小、颜色等样式。这些信息都可以从提交上来的JSON文件中获得。至此，我们可以将PSD文件完整的恢复为网页的格式。

实施例二：参见图2

本快速解析PSD文件为网页的方法为：

1)PSD文件快速解析；

2)将解析文件重建为网页。

实施例三：参见图3-图5，本实施例与实施例一基本相同，特别之处如下：所述步骤1)PSD文件快速解析的方法为：

1-1)对PSD文件进行栅格化操作，并遍历PSD文件；

1-2)将PSD文件的所有图层按类型进行分类，包括：图层组，文本图层和普通图层；

1-3)对1-2)步骤中的图层进行分类处理，对图层组重复1-2)步骤，对文本图层提取其内容信息以及位置信息，对普通图层将其导出为PNG图片并记录位置信息。

实施例四：参见图6-图9，本实施例与实施例一基本相同，特别之处如下：所述步骤2)将解析文件重构为网页的方法为：

2-1)将解析后的PSD文件的信息，包括文本信息和PNG图片提交给网站；

2-2)网站读取文本信息的内容，获得PSD文件图层的位置，大小以及内容信息；

2-3)PNG图片作为资源，在其特定的位置进行调用；

2-4)进行上述步骤后处理后，将PNG图片按照原来的样式拼接。

Claims (3)

1.一种快速解析PSD文件为网页的方法，其特征在于操作步骤如下：

1）PSD文件快速解析；

2）将解析文件重建为网页。

2.根据权力要求1所述的快速解析PSD文件方法，其特征在于：所述步骤1）PSD文件快速解析的方法为：

1-1）对PSD文件进行栅格化操作，并遍历PSD文件；

1-2）将PSD文件的所有图层按类型进行分类，包括：图层组，文本图层和普通图层；

1-3）对1-2）步骤中的图层进行分类处理，对图层组重复1-2）步骤，对文本图层提取其内容信息以及位置信息，对普通图层将其导出为PNG图片并记录位置信息。

3.根据权力要求1所述的将解析文件重建为网页方法，其特征在于：所述步骤2）将解析文件重建为网页的方法为：

2-1）将解析后的PSD文件的信息，包括文本信息和PNG图片提交给网站；

2-2）网站读取文本信息的内容，获得PSD文件图层的位置，大小以及内容信息；

2-3）PNG图片作为资源，在其特定的位置进行调用；

2-4）进行上述步骤后处理后，将PNG图片按照原来的样式拼接。