一种基于浏览器的PSD文件解析方法、系统、存储介质与流程

一种基于浏览器的psd文件解析方法、系统、存储介质
技术领域
1.本发明涉及浏览器应用领域，具体指有一种基于浏览器的psd文件解析方法、系统、存储介质。


背景技术：

2.psd格式(photoshop document)的文件是一种图形文件格式，需要采用专用软件进行读取、解析。常规的手段是购买adobe photoshop并在电脑上安装，然后再用adobe photoshop打开对应的psd文件，这很大局限于客户端的环境，在一些性能配置较为低下的电脑环境中难以顺畅运行，且当切换到另一台没有安装相应软件的电脑上，就无法打开psd格式的文件。
3.现有的浏览器没有实现相关功能的现有技术。
4.针对上述的现有技术存在的问题设计一种基于浏览器的psd文件解析方法、系统、存储介质是本发明研究的目的。


技术实现要素：

5.针对上述现有技术存在的问题，本发明在于提供一种基于浏览器的psd文件解析方法、系统、存储介质，能够有效解决上述现有技术存在的问题。
6.本发明的技术方案是：
7.一种基于浏览器的psd文件解析方法，包含以下步骤：
8.加载并解析psd文件，得到与所述psd文件相对应的二进制数据；
9.根据psd格式规则，从所述二进制数据中提取所述psd文件的文件结构，从所述文件结构中读取图层数据，构建图层列表；
10.根据所述浏览器的渲染规则将所述图层列表中相应的内容转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点；
11.通过浏览器根据以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点渲染得到所述psd文件对应呈现的内容。
12.进一步地，所述加载并解析psd文件，得到与所述psd文件相对应的二进制数据包括：
13.通过浏览器将所述psd文件加载到内存，调用浏览器的filereader.readasarraybuffer接口读取所述psd文件，得到与所述psd文件相对应的二进制数据。
14.进一步地，所述图层数据至少包括图片图层数据、文字图层数据、形状图层数据其中的一种或多种。
15.进一步地，所述从所述文件结构中读取图层数据，构建图层列表包括：
16.若所述图层数据包括图片图层数据，则按照图层的排列顺序从所述图片图层数据中逐个读取；
17.若所述图层数据包括文字图层数据和/或形状图层数据，则直接读取文字图层数据和/或形状图层数据。
18.进一步地，所述按照图层的排列顺序从所述图片图层数据中逐个读取包括：
19.从所述文件结构中读取图片数据，从所述图片数据中提取各个图片的id，根据所述各个图片的id查找并读取逐个图片像素数据。
20.进一步地，若所述图层数据包括图片图层数据，所述将所述图层列表转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点包括：
21.利用所述浏览器的canvasrenderingcontext2d.putimagedata接口将所述图片图层数据根据图层的排列顺序绘制在所述浏览器的htmlcanvaselement画布上，并调用所述浏览器的htmlcanvaselemen.todataurl接口得到所述图片图层数据的统一资源定位符url；
22.将所述url转换为以html描述的所述dom节点的节点类型，以及将所述图片图层数据中的图片属性转换为css格式的描述内容。
23.进一步地，若所述图层数据包括文字图层数据和/或形状图层数据，所述将所述图层列表转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点包括：
24.将文字图层数据和/或形状图层数据对应的元素类型转换为以html描述的所述dom节点的节点类型，以及将所述文字图层数据和/或形状图层数据中的信息属性转换为css格式的描述内容。
25.进一步地，所述通过浏览器根据以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点渲染得到所述psd文件对应呈现的内容包括：
26.调用所述浏览器的htmlelement.appendchild功能，将所述dom节点渲染到所述浏览器的页面，得到所述psd文件对应呈现的内容。
27.一种基于浏览器的psd文件解析系统，包括以下模块：
28.二进制转换模块，用于加载并解析psd文件，得到与所述psd文件相对应的二进制数据；
29.图层列表构建模块，用于根据psd格式规则，从所述二进制数据中提取所述psd文件的文件结构，从所述文件结构中读取图层数据，构建图层列表；
30.网页格式转换模块，用于根据所述浏览器的渲染规则将所述图层列表中相应的内容转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点；
31.渲染模块，用于通过浏览器根据以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点渲染得到所述psd文件对应呈现的内容。
32.一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时实现所述的一种基于浏览器的psd文件解析方法。
33.因此，本发明提供以下的效果和/或优点：
34.本技术通过从所述文件结构中读取图层数据，构建图层列表，将其转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点，可以被浏览器识别、展示，从而无需photoshop软件即可浏览psd文件。本发明可以使用户脱离相关软件，只要有浏览器，即可做到浏览psd文件。本方案通过在浏览器环境对psd文件进行处理，直接输出对应
的html结构，交由浏览器进行渲染，可以省掉安装软件的麻烦，也能更好的夸设备、跨平台，只要有浏览器的设备(手机、pad等均可)，都能打开。
35.本技术根据psd图层数据中的具体内容，将所要转换超文本标记语言html+层叠样式表css格式的内容的数据具体区分为图片、图形、文字，根据不同的数据采用不同的策略进行转换，能够得到相应效果的内容。具体地，利用所述浏览器的canvasrenderingcontext2d.putimagedata接口将所述图片图层数据根据图层的排列顺序绘制在所述浏览器的htmlcanvaselement画布上，并调用所述浏览器的htmlcanvaselemen.todataurl接口得到所述图片图层数据的统一资源定位符url；将所述url转换为以html描述的所述dom节点的节点类型，以及将所述图片图层数据中的图片属性转换为css格式的描述内容。将文字图层数据和/或形状图层数据对应的元素类型转换为以html描述的所述dom节点的节点类型，以及将所述文字图层数据和/或形状图层数据中的信息属性转换为css格式的描述内容。可以分别得到相应的内容对应的节点和css格式。
36.应当明白，本发明的上文的概述和下面的详细说明是示例性和解释性的，并且意在提供对如要求保护的本发明的进一步的解释。
附图说明
37.图1为本发明的流程示意图。
38.图2－3为psd文件结构的示意图。
39.图4为待解析的psd文件用photoshop打开的呈现效果图。
40.图5为canvasrenderingcontext2d.putimagedata接口绘制的效果图。
41.图6为本发明的浏览器处理过程示意图。
具体实施方式
42.为了便于本领域技术人员理解，现将实施例结合附图对本发明作进一步详细描述：应了解到，在本实施例中所提及的步骤，除特别说明其顺序的，均可依实际需要调整其前后顺序，甚至可同时或部分同时执行，
43.参考图1、6，一种基于浏览器的psd文件解析方法，包含以下步骤：
44.s1，加载并解析psd文件，得到与所述psd文件相对应的二进制数据；
45.本步骤中，通过浏览器加载并解析psd文件，此时，psd文件被加载到内存，从而得到与所述psd文件相对应的二进制数据。浏览器加载文件到内存并得到二进制数据的过程为现有技术，在此不展开赘述。本实施例中，psd文件的格式是一种图形文件，其来源是由adobe公司的图像处理软件photoshop所生成的，如图2或3所示，psd格式的文件结构包含了图层、通道、参考线、注解和颜色模式等信息。现有技术中，psd格式的文件一般需要通过photoshop软件来进行查看或者编辑。其中还包含了对psd文件的文件结构还包含了头文件描述信息，用于对psd文件的一些说明。
46.s2，根据psd格式规则，从所述二进制数据中提取所述psd文件的文件结构，从所述文件结构中读取图层数据，构建图层列表。
47.进一步地，参考图3，所述图层数据至少包括图片图层数据、文字图层数据、形状图层数据、遮罩图层数据等其中的一种或多种。
48.psd文件是一个由多张、多层图像叠加的图像数据。psd的格式规范除了规定了psd文件可以包含如图2所示的图层、通道、参考线、注解和颜色模式等信息，还规定了这些数据储存的位置、储存压缩规范、储存的内容的描述等，现有技术正是通过photoshop软件根据此规范进行读取，从而得到相应的文件结构，再从文件结构中提取图层、通道、参考线、注解和颜色模式等信息，在根据编辑好的内容进行展示、合成、遮挡等操作，从而得到对应的内容。
49.接下来，构建图层列表。
50.psd文件中包含了多个图层，每一层图层对应一个图片，该图片可以是图像、文本等。本步骤这种通过读取每一图层，再将每一图层的相关信息进行汇总，例如文字图层的话可以获取其字体、大小、颜色等相关信息，图片图层的话可以获取其格式、宽度、高度等信息。将这些信息汇总后，排列并汇总成一个图层列表。
51.进一步地，所述从所述文件结构中读取图层数据，构建图层列表包括：
52.若所述图层数据包括图片图层数据，则按照图层的排列顺序从所述图片图层数据中逐个读取；
53.若所述图层数据包括文字图层数据和/或形状图层数据，则直接读取文字图层数据和/或形状图层数据。
54.由于在psd文件结构中，图片图层是按先后顺序进行保存的。同时，图层数据还可能包括其他，例如文字、形状(矢量图)，本步骤对不同的图层数据选择不同的读取策略。如果是图片图层，则按图层的排列顺序猪哥读取，如果是文字图层数据和/或形状图层数据，则直接读取文字图层数据和/或形状图层数据。
55.例如根据图4的内容，图4中包含了一张空白的背景作为图形图层、一张小于背景的猫图片作为图片、一行“我是一只猫”的文字作为文字。按照上述步骤汇总的图层列表如下所示：
56.57.[0058][0059]
s3，根据所述浏览器的渲染规则将所述图层列表中相应的内容转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点；
[0060]
具体地，s3.1若所述图层数据包括图片图层数据，所述将所述图层列表转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点包括：
[0061]
利用所述浏览器的canvasrenderingcontext2d.putimagedata接口将所述图片图层数据根据图层的排列顺序绘制在所述浏览器的htmlcanvaselement画布上，并调用所述浏览器的htmlcanvaselemen.todataurl接口得到所述图片图层数据的统一资源定位符url；
[0062]
将所述url转换为以html描述的所述dom节点的节点类型，以及将所述图片图层数据中的图片属性转换为css格式的描述内容。
[0063]
本步骤中，canvasrenderingcontext2d.putimagedata是canvas 2d api将数据从已有的imagedata对象绘制到位图的方法。例如可以在浏览器中设置图片的绘制区域、绘制路径、绘制样式等。例如参考图5，可以通过canvasrenderingcontext2d.putimagedata接口绘制一个如图5所示的包含宽度为w、高度为h的矩形、线、数字等。htmlcanvaselement接口提供用于操纵＜canvas＞元素的布局和表示的属性和方法。通过canvasrenderingcontext2d.putimagedata接口可以在htmlcanvaselement画布上，根据图层列表的画布大小等信息画出一个对应的矩形，该矩形用于填充相应的图层进来。
[0064]
htmlcanvaselemen.todataurl接口是用于返回一个包含图片展示的data uri。可以使用type参数其类型，默认为png格式。本步骤中通过将上述步骤解析得到的图片通过htmlcanvaselemen.todataurl接口得到与该图片相对应的url。该url地址作为后续的图片地址被浏览器调用，从而能够使浏览器读取到对应的图片。
[0065]
通过调用浏览器的canvasrenderingcontext2d.putimagedata把像素数据绘制到
htmlcanvaselement画布上，然后再调用htmlcanvaselement.todataurl，获取到图片地址(base64url)。
[0066]
本步骤中，图4中的图片转换得到的图片转换成对应的dom节点是：
[0067]
＜imgsrc＝”图片地址”/＞
[0068]
对应的css样式是：
[0069][0070][0071]
s3.2，若所述图层数据包括文字图层数据和/或形状图层数据，所述将所述图层列表转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点包括：
[0072]
将文字图层数据和/或形状图层数据对应的元素类型转换为以html描述的所述dom节点的节点类型，以及将所述文字图层数据和/或形状图层数据中的信息属性转换为css格式的描述内容。
[0073]
本步骤中，文字图层数据或形状图层数据可以在浏览器中直接转换，对于文字，根据图层列表中的信息，直接调用浏览器的document.createelement接口创建一个span的html元素，将文字内容填入span元素内即可，在加入文字对应带的css样式，调整文字的大小、字体、颜色等属性。对于矢量图层，也可以通过浏览器中绘制画布的接口直接绘制一个相应的图形，例如矩形，根据图层列表中的信息，调整该矩形的大小、变形等参数，得到对应的css样式。
[0074]
例如，本步骤中，图4中的文字转换成对应的dom节点是：
[0075]
＜span＞我是一只猫＜/span＞
[0076]
对应的css样式是：
[0077]
[0078][0079]
s4，通过浏览器根据以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点渲染得到所述psd文件对应呈现的内容。
[0080]
具体地，进一步地，所述通过浏览器根据以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点渲染得到所述psd文件对应呈现的内容包括：
[0081]
调用所述浏览器的htmlelement.appendchild功能，将所述dom节点渲染到所述浏览器的页面，得到所述psd文件对应呈现的内容。
[0082]
htmlelement.appendchild接口可以通过html文档对象模型(dom)，可以通过多种方式更改html文件的运行时内容。用于appendchild向现有文档添加新元素，或移动页面上的元素。最终在浏览器中得到与图4相同呈现画面的效果。
[0083]
进一步地，所述加载并解析psd文件，得到与所述psd文件相对应的二进制数据包括：
[0084]
通过浏览器将所述psd文件加载到内存，调用浏览器的filereader.readasarraybuffer接口读取所述psd文件，得到与所述psd文件相对应的二进制数据。
[0085]
进一步地，所述按照图层的排列顺序从所述图片图层数据中逐个读取包括：
[0086]
从所述文件结构中读取图片数据，从所述图片数据中提取各个图片的id，根据所述各个图片的id查找并读取逐个图片像素数据。
[0087]
由于图片的像素数据的数据量比较大，所以以引用的方式存储在图片数据部分，如果是图片图层，图层数据上会有一个图片数据的id，可以根据此id，去图片数据部分查找到对应的图片像素数据。从图3中的图片数据内去读取对应的图片像素数据。
[0088]
进一步提供一种基于浏览器的psd文件解析系统，包括以下模块：
[0089]
二进制转换模块，用于加载并解析psd文件，得到与所述psd文件相对应的二进制数据；
[0090]
图层列表构建模块，用于根据psd格式规则，从所述二进制数据中提取所述psd文件的文件结构，从所述文件结构中读取图层数据，构建图层列表；
[0091]
网页格式转换模块，用于根据所述浏览器的渲染规则将所述图层列表中相应的内容转换为以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点；
[0092]
渲染模块，用于通过浏览器根据以超文本标记语言html+层叠样式表css格式描述的文档对象模型dom节点渲染得到所述psd文件对应呈现的内容。
[0093]
一种基于浏览器的psd文件解析系统的工作原理与一种基于浏览器的psd文件解析方法笔记本相同，在此不再赘述。
[0094]
进一步提供一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现所述的一种基于浏览器的psd文件解析方法。
[0095]
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
[0096]
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
[0097]
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0098]
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0099]
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
[0100]
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。