用于将视觉稿源文件生成HTML标记的方法及系统技术方案

本发明专利技术涉及一种用于将视觉稿源文件生成HTML标记的方法及系统。所述方法包括：使用解析器解析视觉稿源文件的图层；基于解析结果获取包含一个或多个单个图层的有效图层；选择用于生成HTML标记的规则，所述规则包括从具有多种页面模板的可配置模版方案中选择一种页面模板以确定要生成的HTML标记的结构；以及根据所述规则，将所述有效图层生成HTML标记。

【技术实现步骤摘要】
【专利摘要】本专利技术涉及一种用于将视觉稿源文件生成HTML标记的方法及系统。所述方法包括：使用解析器解析视觉稿源文件的图层；基于解析结果获取包含一个或多个单个图层的有效图层；选择用于生成HTML标记的规则，所述规则包括从具有多种页面模板的可配置模版方案中选择一种页面模板以确定要生成的HTML标记的结构；以及根据所述规则，将所述有效图层生成HTML标记。【专利说明】用于将视觉稿源文件生成HTML标记的方法及系统
本申请涉及图像文件处理领域，尤其涉及一种用于将视觉稿源文件生成HTML标记的方法及系统。
技术介绍
视觉稿就是通常所说的PSD文件，PSD文件是指adobe photoshop专用的图像文件格式，是目前唯一能够支持全部图像色彩模式的格式。PSD文件体积庞大，虽然在大部分平面设计软件(例如Adobe Illustrator、After Effect、Corel DRAW等)内部可以通用，但是PSD格式的图像文件很少被平面设计软件以外的其它软件和工具所支持。所以，在图像制作完成后，通常需要将PSD文件转化为一些比较通用的图像格式(例如jpg格式等)的文件，以便于将其输出到其它软件中继续编辑。目前，由于网页设计的需求，促进了 PSD2HTML相关技术的发展。PSD2HTML是指通过计算机(非人为地)解析PSD文件而生成HTML标记的过程。国际上关于PSD2HTML的网站很多，不过目前绝大多数的网站仍然是通过人工代码的模式来实现，也有通过服务器程序将PSD文件直接转化为HTML文件的网站。例如，俄罗斯互联网厂商的Psd2HtmlConverter网站(http://Psd2HtmlConverter.com/),从官方网站的“文档”部分了解到该网站主要采用约定名称的方式来识别特殊的页面元素要求。约定名称是指可被系统识别的PSD文件中图层属性字段。部分HTML标记的约定方式如图1所示。但是，Psd2HtmlConverter网站提供的技术存在以下问题。首先，Psd2htmlconverter的技术采用完全服务器端的语言生成,客户端需要将PSD文件提交到服务器进行转化操作，而一个普通的PSD文件的大小通常是几十M到几百M，如果在大量的转化操作并发的情况下，网络带宽和服务器的实时压力会比较大，将导致转化效率降低。其次，Psd2htmlconverter的技术不支持页面交互(即javascript交互)，而在现代互联网的应用中javascript交互的应用甚至可以说是网页必备的能力。再有，Psd2htmlconverter的技术采用严格的XHTML规范来生成页面,主体采用div布局,虽然该技术应用在浏览器网页中非常合适，但是在邮件页面的开发中将完全失效。
技术实现思路
本申请的主要目的在于提供一种将视觉稿源文件生成HTML标记的方法及系统，以解决现有技术存在的在大量的转化操作并发的情况下转化效率降低、不支持页面交互、不适用于邮件页面的开发等问题，其中:本申请提供的一种用于将视觉稿源文件生成HTML标记的方法，包括:使用解析器解析视觉稿源文件的图层；基于解析结果获取包含一个或多个单个图层的有效图层；选择用于生成HTML标记的规则；以及根据所述规则，将所述有效图层生成HTML标记。根据本申请的实施例，该方法还包括:基于解析结果过滤无效图层。根据本申请的实施例，在该方法中，所述基于解析结果过滤无效图层的步骤进一步包括:根据图层的属性去除不可见图层；以及根据图层的层级关系和透明程度去除被覆盖的图层。根据本申请的实施例，在该方法中，所述有效图层还包括一个或多个图层组，将每一图层组作为整体进行标记，以使视觉稿中的图层组的结构与HTML标记的结构相匹配。根据本申请的实施例，在该方法中，所述规则包括:从多种页面模板中选择一种页面模板以确定要生成的HTML标记的结构。根据本申请的实施例，在该方法中，所述规则还包括:确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系。根据本申请的实施例，在该方法中，所述确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系通过使用约定名称对所述有效图层进行标记以提供公用的javascript交互方案。根据本申请的实施例，在该方法中，所述页面模板包括布局方式、图像展示方式、文本排版方式。根据本申请的实施例,该方法还包括:将所生成的HTML标记存储为文本文件或者将所生成的HTML标记发送到客户端。在本申请的另一方面，提供一种用于将视觉稿源文件生成HTML标记的系统，包括:解析模块，其用于使用解析器解析视觉稿源文件的图层；获取模块，其用于基于解析结果获取包含一个或多个单个图层的有效图层；选择模块，其用于选择用于生成HTML标记的规则；以及生成模块，其用于根据所述规则将所述有效图层生成HTML标记。根据本申请的实施例，该系统还包括:过滤模块，其用于基于解析结果过滤无效图层。根据本申请的实施例，在该系统中，所述过滤模块进一步包括:第一去除模块，其用于根据图层的属性去除不可见图层；以及第二去除模块，其用于根据图层的层级关系和透明程度去除被覆盖的图层。根据本申请的实施例，在该系统中，所述有效图层还包括一个或多个图层组，所述系统还包括标记模块，其用于将每一图层组作为整体进行标记，以使视觉稿中的图层组的结构与HTML标记的结构相匹配。根据本申请的实施例，在该系统中，所述规则包括从多种页面模板中选择一种页面模板以确定要生成的HTML标记的结构。根据本申请的实施例，在该系统中，所述规则还包括:确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系。根据本申请的实施例，在该系统中，所述确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系通过使用约定名称对所述有效图层进行标记以提供公用的javascript交互方案。根据本申请的实施例，在该系统中，所述页面模板包括布局方式、图像展示方式、文本排版方式。根据本申请的实施例，该系统还包括:处理模块，其用于将所生成的HTML标记存储为文本文件或者将所生成的HTML标记发送到客户端。与现有技术相比，根据本申请的技术方案，能获得如下效果。(I) Psd2htmlconverter采用完全服务端的语言生成，客户端需要提交PSD文件到服务器设备进行转化操作，而一个普通的PSD文件通常要几十兆到几百兆大小，如果大量并发的应用，网络带宽和服务器的实时压力会比较大。相对于此，本申请使用完全javascript语言完成，可以在客户端完成大部分转化操作，减少服务器压力并提高转化效率。(2)目前Psd2htmlconverter不支持页面交互(javascript),而在现代互联网应用中javascript交互应用甚至可以说是网页必备的能力。相对于此,本申请将采用约定名称的方式实现常用的javascript交互，以使生成的网页具备javascript交互能力。(3) Psd2htmlconverter采用严格的xhtml规范生成页面,主体采用div布局,虽然应用在浏览器网页中非常合适，但是在邮件页面开发中将完全失效。本文档来自技高网...

【技术保护点】

【技术特征摘要】

【专利技术属性】
技术研发人员：时扬扬，
申请(专利权)人：阿里巴巴集团控股有限公司，
类型：发明
国别省市：