将图片类文件转换为网页文件的方法和装置制造方法及图纸

本发明专利技术提出一种将图片类文件转换为网页文件的方法，包括以下步骤：获取图片类文件；对图片类文件进行分离以获取图片类文件的多个图层；分别获取多个图层中的图片层和文字图片层；根据图片层和文字图片层分别生成文字层和背景图片层；根据文字层、背景图片层和网页布局框架生成网页文件。本发明专利技术自动将图片转换成网页文件，避免重复工作，节省了人工操作，提高了效率。本发明专利技术还公开了一种将图片类文件转换为网页文件的装置。

【技术实现步骤摘要】
将图片类文件转换为网页文件的方法和装置
本专利技术涉及计算机
，特别涉及一种将图片类文件转换为网页文件的方法 和装置。
技术介绍
随着互联网的蓬勃发展，网页成为了一种在互联网中常见的传播载体。网页包含 了丰富的信息，同时需要合理的组织和设计，从而产生良好的用户体验，吸引用户。由于一 些例如公司促销活动页面、招聘页面等需求，常常可以看见有各种的单页网页。因此，有大 量的设计师和工程师从事于网页的制作工作。 -般情况下，网页的产生需要视觉设计师和研发工程师合作完成。首先，视觉设计 师绘制网页设计稿，由前端工程师用HTML页面进行还原，以便于维护和在互联网上进行传 播。只要熟悉HTML和CSS，可以很轻松高效率地对图片进行重构，做成网页。分离文字图 层，复制文字到重构页面上，调整格式等工作是前端工程师工作量的很大一部分。但是当前 端工程师在用HTML编写布局，用CSS调节样式时，无形中重复了设计师的工作。一般视觉 设计师Photoshop的视觉稿是用各图层来表现的，而HTML页面是用各Dom元素来实现的， 但是目前并没有二者间自动转换的方法。并且，工程师人工重构也可能没有准确还原设计 师的设计意图。
技术实现思路
本专利技术旨在至少解决现有技术中存在的技术问题之一。为此，本专利技术的一个目的 在于提出一种将图片类文件转换为网页文件的方法，自动将图片转换成网页文件，避免重 复工作，节省了人工操作，提高了效率。 本专利技术的第二个目的在于提出一种将图片类文件转换为网页文件的装置。 为达到上述目的，本专利技术第一方面的实施例提出了一种将图片类文件转换为网页 文件的方法，包括以下步骤：获取图片类文件；对所述图片类文件进行分离以获取所述图 片类文件的多个图层；分别获取所述多个图层中的图片层和文字图片层；根据所述图片层 和文字图片层分别生成文字层和背景图片层；根据所述文字层、背景图片层和网页布局框 架生成网页文件。 根据本专利技术实施例的将图片类文件转换为网页文件的方法通过对图片类文件进 行图文分离，将分离的文字层、背景图片层和网页布局框架组合，将页面设计图接输出为网 页文件，将人工操作用用程序实现，实现了页面的自动化重构。避免重复工作，减少工作量， 提高工作效率，并且设计页面直接输出网页，可以让设计师很好地把握视觉还原。 在本专利技术的一个实施例中，所述根据图片层和文字图片层分别生成文字层和背景 图片层具体包括：将图片层分别放入背景图片集合；对文字图片层中的文字进行分析以获 取所述文字图片层中文字的属性信息；根据所述文字的属性信息判断所述文字图片层是否 为阅读文字图片层；如果判断不为所述阅读文字图片层，则将所述文字图片层放入所述背 景图片集合；如果判断为所述阅读文字图片层，则将所述文字图片层放入所述文字图片集 合；分别根据所述文字图片集合和背景图片集合生成文字层和背景图片层。 在本专利技术的一个实施例中，所述属性信息为无抗锯齿属性，当所述文字图层中的 文字的属性为无抗锯齿属性时，则所述文字图层为所述阅读文字图片层。 在本专利技术的一个实施例中，还包括：根据所述网页文件的尺寸需求对所述背景图 片层进行切割。 在本专利技术的一个实施例中，还包括：当所述背景图片的大小大于预设阈值时，将所 述背景图片分割为多个图片块以提高浏览速度。 在本专利技术的一个实施例中，所述分别根据所述文字图片集合和背景图片集合生成 文字层和背景图片层具体包括：分别在所述网页布局框架中建立背景图片容器和文字容 器，其中，所述背景图片容器和文字容器相互叠合；对所述文字图片集合中的文字图片层中 的文字进行识别以生成文字集合；将所述文字集合和背景图片集合分别添加至所述文字容 器和背景图片容器中以生成所述文字层和背景图片层。 在本专利技术的一个实施例中，还包括：记录所述文字图片集合中的文字图片层中的 文字的位置信息，并根据所述位置信息将所述文字集合添加至所述文字容器中。 在本专利技术的一个实施例中，还包括：记录所述文字图片集合中的文字图片层中的 文字的性质特征信息，并根据所述性质特征信息将所述文字集合添加至所述文字容器中。 在本专利技术的一个实施例中，所述图片类文件为PSD格式。 本专利技术第一方面的实施例提出了一种将图片类文件转换为网页文件的装置，包括 分离模块、分析模块和生成模块。分离模块用于对图片类文件进行分离以获取所述图片类 文件的多个图层；分析模块用于分别获取所述多个图层中的图片层和文字图片层；生成模 块用于根据所述图片层和文字图片层分别生成文字层和背景图片层，并根据所述文字层、 背景图片层和网页布局框架生成网页文件。 根据本专利技术实施例的将图片类文件转换为网页文件的装置通过对图片类文件进 行图文分离，将分离的文字层、背景图片层和网页布局框架组合，将页面设计图接输出为网 页文件，将人工操作用用程序实现，实现了页面的自动化重构。避免重复工作，减少工作量， 提高工作效率，并且设计页面直接输出网页，可以让设计师很好地把握视觉还原。 在本专利技术的一个实施例中，所述生成模块具体包括分析子模块、管理子模块和生 成子模块。其中，分析子模块用于对文字图片层中的文字进行分析以获取所述文字图片层 中文字的属性信息；管理子模块用于将图片层分别放入背景图片集合，并在根据所述文字 的属性信息判断所述文字图片层为阅读文字图片层时将所述文字图片层放入所述背景图 片集合，并在根据所述文字的属性信息判断所述文字图片层不为阅读文字图片层时，将所 述文字图片层放入所述文字图片集合；生成子模块用于分别根据所述文字图片集合和背景 图片集合生成文字层和背景图片层。 在本专利技术的一个实施例中，所述属性信息为无抗锯齿属性，当所述文字图层中的 文字的属性为无抗锯齿属性时，则所述文字图层为所述阅读文字图片层。 在本专利技术的一个实施例中，还包括：切割模块用于根据所述网页文件的尺寸需求 对所述背景图片层进行切割。 在本专利技术的一个实施例中，还包括：分割模块用于当所述背景图片的大小大于预 设阈值时，将所述背景图片分割为多个图片块以提高浏览速度。 在本专利技术的一个实施例中，所述生成子模块分别在所述网页布局框架中建立背景 图片容器和文字容器，其中，所述背景图片容器和文字容器相互叠合，并对所述文字图片集 合中的文字图片层中的文字进行识别以生成文字集合，以及将所述文字集合和背景图片集 合分别添加至所述文字容器和背景图片容器中以生成所述文字层和背景图片层。 在本专利技术的一个实施例中，所述生成子模块还用于记录所述文字图片集合中的文 字图片层中的文字的位置信息，并根据所述位置信息将所述文字集合添加至所述文字容器 中。 在本专利技术的一个实施例中，所述生成子模块还用于记录所述文字图片集合中的文 字图片层中的文字的性质特征信息，并根据所述性质特征信息将所述文字集合添加至所述 文字容器中。 在本专利技术的一个实施例中，所述图片类文件为PSD格式。 本专利技术的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变 得明显，或通过本专利技术的实践了解到。 【附图说明】 本专利技术的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变 得明显和容易本文档来自技高网...

【技术保护点】
一种将图片类文件转换为网页文件的方法，其特征在于，包括以下步骤：获取图片类文件；对所述图片类文件进行分离以获取所述图片类文件的多个图层；分别获取所述多个图层中的图片层和文字图片层；根据所述图片层和文字图片层分别生成文字层和背景图片层；以及根据所述文字层、背景图片层和网页布局框架生成网页文件。

【技术特征摘要】
1. 一种将图片类文件转换为网页文件的方法，其特征在于，包括以下步骤： 获取图片类文件； 对所述图片类文件进行分离以获取所述图片类文件的多个图层； 分别获取所述多个图层中的图片层和文字图片层； 根据所述图片层和文字图片层分别生成文字层和背景图片层；以及 根据所述文字层、背景图片层和网页布局框架生成网页文件。2. 如权利要求1所述的将图片类文件转换为网页文件的方法，其特征在于，所述根据 图片层和文字图片层分别生成文字层和背景图片层具体包括： 将图片层分别放入背景图片集合； 对文字图片层中的文字进行分析以获取所述文字图片层中文字的属性信息； 根据所述文字的属性信息判断所述文字图片层是否为阅读文字图片层； 如果判断不为所述阅读文字图片层，则将所述文字图片层放入所述背景图片集合； 如果判断为所述阅读文字图片层，则将所述文字图片层放入所述文字图片集合；以及 分别根据所述文字图片集合和背景图片集合生成文字层和背景图片层。3. 如权利要求2所述的将图片类文件转换为网页文件的方法，其特征在于，所述属性 信息为无抗锯齿属性，当所述文字图层中的文字的属性为无抗锯齿属性时，则所述文字图 层为所述阅读文字图片层。4. 如权利要求1-3任一项所述的将图片类文件转换为网页文件的方法，其特征在于， 还包括： 根据所述网页文件的尺寸需求对所述背景图片层进行切割。5. 如权利要求1-3任一项所述的将图片类文件转换为网页文件的方法，其特征在于， 还包括： 当所述背景图片的大小大于预设阈值时，将所述背景图片分割为多个图片块以提高浏 览速度。6. 如权利要求3所述的将图片类文件转换为网页文件的方法，其特征在于，所述分别 根据所述文字图片集合和背景图片集合生成文字层和背景图片层具体包括： 分别在所述网页布局框架中建立背景图片容器和文字容器，其中，所述背景图片容器 和文字容器相互叠合； 对所述文字图片集合中的文字图片层中的文字进行识别以生成文字集合；以及 将所述文字集合和背景图片集合分别添加至所述文字容器和背景图片容器中以生成 所述文字层和背景图片层。7. 如权利要求6所述的将图片类文件转换为网页文件的方法，其特征在于，还包括： 记录所述文字图片集合中的文字图片层中的文字的位置信息，并根据所述位置信息将 所述文字集合添加至所述文字容器中。8. 如权利要求6所述的将图片类文件转换为网页文件的方法，其特征在于，还包括： 记录所述文字图片集合中的文字图片层中的文字的性质特征信息，并根据所述性质特 征信息将所述文字集合添加至所述文字容器中。9. 如权利要求1-8任一项所述的将图片类文件转换为网页文件的方法，其特征在于， 所述图片类文件为PSD格式。10. -种将图片类文件转...

【专利技术属性】
技术研发人员：陈咏聪，
申请(专利权)人：北京百度网讯科技有限公司，
类型：发明
国别省市：北京;11