CN107633055A - 一种将图片转成html文档的方法 - Google Patents

一种将图片转成html文档的方法 Download PDF

Info

Publication number
CN107633055A
CN107633055A CN201710850270.5A CN201710850270A CN107633055A CN 107633055 A CN107633055 A CN 107633055A CN 201710850270 A CN201710850270 A CN 201710850270A CN 107633055 A CN107633055 A CN 107633055A
Authority
CN
China
Prior art keywords
div
picture
attribute
background colour
envelope
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201710850270.5A
Other languages
English (en)
Other versions
CN107633055B (zh
Inventor
黄博
关班记
张远世
齐兆勇
庞毅
何龙泉
季统凯
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
G Cloud Technology Co Ltd
Original Assignee
G Cloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by G Cloud Technology Co Ltd filed Critical G Cloud Technology Co Ltd
Priority to CN201710850270.5A priority Critical patent/CN107633055B/zh
Publication of CN107633055A publication Critical patent/CN107633055A/zh
Application granted granted Critical
Publication of CN107633055B publication Critical patent/CN107633055B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Document Processing Apparatus (AREA)
  • Information Transfer Between Computers (AREA)
  • Character Input (AREA)

Abstract

本发明涉及网页开发领域，特别是一种将图片转成HTML文档的方法。本发明所述的方法是利用OCR图片识别技术和OCR识别的PHP接口API，对需要识别的内容进行设置和结果获取；将获得的背景色、大小、位置等参数进行优化、层次区分和CSS转储，从而实现图片转HTML；所述的方法主要包括背景色遍历扫描区分、背景色识别录入背景库、背景库层次迭代OCR识别、文字/非文字识别、相邻/非相邻DIV识别、CSS属性优化、已确定div边框识别。本发明能将高清的网页设计图片转为HTML格式的文件，免去人工操作的繁琐，节约调试时间；适用于网页设计等。

Description

一种将图片转成HTML文档的方法
技术领域
本发明涉及网页开发技术领域，特别是一种将图片转成HTML文档的方法。
背景技术
网页设计/美工人员通常将一个网页设计导出成图片的形式；网页前端人员负责将图片转成前端HTML供后端人员开发功能；前端人员往往需要很大的工作量，才能完成一个前端demo的制作；
目前尚未有一项技术是能利用WEB应用自动将图片转换成HTML格式文件的。
发明内容
本发明解决的技术问题在于提供一种将图片转成HTML文档的方法；实现将web上的图片转成HTML文档。
本发明解决上述技术问题的技术方案是：
所述的方法是利用OCR图片识别技术和OCR识别的PHP接口API，对需要识别的内容进行设置和结果获取；将获得的背景色、大小、位置等参数进行优化、层次区分和CSS转储，从而实现图片转HTML。
所述的方法主要包括背景色遍历扫描区分、背景色识别录入背景库、背景库层次迭代OCR识别、文字/非文字识别、相邻/非相邻DIV识别、CSS属性优化、已确定div边框识别；
所述背景色遍历扫描区分，利用OCR图片识别的PHP识别接口，进行横向、纵向像素点颜色值识别，获得第一背景色区域大小和背景色值；然后，遍历整个图片；得到N个第一背景色区域，全部录入背景库，得到第一包络DIV；
所述背景色识别录入背景库，利用WEB前端技术和PHP技术；首先记录每个背景色不同的第一包络DIV的属性，创建一个缓存数组对象JSON，内含多个缓存变量属性；将第一包络DIV属性遍历进这个JSON；
所述背景库层次迭代OCR识别，更新并改进JSON；利用迭代和遍历函数，分析每个第一包络DIV内的组成；将这些组成部分组合为该第一包络DIV的内部子对象；每个内部子对象都有其各自的属性；每个子对象也可能包含子对象，如此遍历下去，获得N个级别的对象合集；
所述文字/非文字识别，定义一个判断，判断是否为文字；若是，则获取到文字内容块的属性后进行自动文字识别；若否，则进入图片处理方式；
所述相邻/非相邻DIV识别，遍历每个相同级别的包络DIV的位置；若处于同一行/列，则进行相邻识别；
所述CSS属性优化，优化内容包括尽量减少/排除绝对定位属性信息，将绝对定位转换成普通定位，通过外边距进行排版；对属性值进行去零取整操作，规范属性值的数字；所有CSS属性被安排存储在一个外在的CSS文件中；HTML文件通过外链调用这个CSS文件；
所述已确定div边框识别，对非文字包络DIV；通过OCR技术扫描并判断DIV目标的包围背景和包围背景与内部背景的距离，同时获得包围背景的颜色值；再次截取边框内的包络DIV，替换掉最初的图片文件，完成图片裁剪边框的操作。
背景色遍历扫描区分时，只识别沿图片纵向方向横向第一位的像素点的颜色值；当遇到不同的像素点颜色时，退回到上一像素点，得到纵向的相同颜色(第一背景色)的高度；然后开始转换识别方向，只识别沿图片横向方向的像素点的颜色值；当遇到不同的像素点颜色时，退回到上一像素点，得到横向的相同颜色(第一背景色)的宽度；从而确定第一背景色区域大小和背景色值；依次遍历整个图片；得到N个第一背景色区域，全部录入背景库，得到第一包络DIV。
所述第一包络DIV的属性，重要属性包括宽度、高度、位置(以左上方第一个像素点为基准)；
为每个包络DIV对象都创建一个独有的ID属性并赋值。
所述的文字/非文字识别的文字内容块的属性包括宽度、高度、相对/绝对位置、文字大小、字体、字体颜色；
图片处理方式是：首先得到区域的范围，即同样得到宽度、高度、位置属性，其次利用PHP的图片截取函数自定义出一个图片截取方法；所截取的内容就是包括边框的图片DIV的内容；所截图片只能是矩形；且得到最终图片格式为最佳大小的JPG格式。
所述相邻/非相邻DIV识别中，算出DIV块之间的像素点的合，即像素距离；此距离作为外边距属性存至属性JSON内，后期可以方便进行CSS优化。
所述CSS属性优化中所有元素的CSS定位标签都是ID定位。
本发明从人工智能的角度出发，利用日渐兴起的OCR技术，即图片识别技术，通过二次开发，确定OCR扫描的内容和目标数据的获得，从而实现：将图片直接转换成HTML网页demo；免去人工操作的繁琐，节约调试时间。
附图说明
下面结合附图对本发明进一步说明：
图1为本发明的流程图。
具体实施方式
下面将结合附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出实质性创造获得的方案，都属于本发明保护的范围。
以下是本发明的关于一种将图片转成HTML文档的方法和装置的重要功能点实现方法：
1：背景色遍历扫描区分。利用OCR图片识别的PHP识别接口，只识别沿图片纵向方向横向第一位的像素点的颜色值；当遇到不同的像素点颜色时，退回到上一像素点，得到纵向的相同颜色(第一背景色)的高度；然后开始转换识别方向，只识别沿图片横向方向的像素点的颜色值；当遇到不同的像素点颜色时，退回到上一像素点，得到横向的相同颜色(第一背景色)的宽度；从而确定了第一背景色区域大小和背景色值；依次遍历整个图片；得到N个第一背景色区域，全部录入背景库，得到第一包络DIV；
2：背景色识别录入背景库。利用WEB前端技术和PHP技术；首先记录每个背景色不同的第一包络DIV的属性，重要属性包括宽度、高度、位置(以左上方第一个像素点为基准)；创建一个缓存数组对象JSON，内含多个缓存变量属性；将第一包络DIV属性遍历进这个JSON；特别地，为每个包络DIV对象都创建一个独有的ID属性并赋值；保存这个JSON；此时该JSON只包含背景库；
3：背景库层次迭代OCR识别。更新并改进JSON；利用迭代和遍历函数，分析每个第一包络DIV内的组成：文字、非文字、背景等；将这些组成部分组合为该第一包络DIV的内部子对象；每个内部子对象都有其各自的属性；每个子对象也可能包含子对象，如此遍历下去，获得N个级别的对象合集；此时的JSON是包含文字、非文字、背景等多重对象的丰富的对象集；
4：文字/非文字识别。定义一个判断，判断是否为文字；若是，则获取到文字内容块的宽度、高度、相对/绝对位置、文字大小、字体、字体颜色等属性后进行自动文字识别；若否，则进入图片处理方式：首先得到区域的范围，即同样得到宽度、高度、位置等属性，其次要利用PHP的图片截取函数自定义出一个图片截取方法；所截取的内容就是图片DIV的内容，包括边框；所截图片只能是矩形；且得到最终图片格式为最佳大小的JPG格式；
5：相邻/非相邻DIV识别。遍历每个相同级别的包络DIV的位置；若处于同一行/列，则进行相邻识别：用简单的数学函数可以算出DIV块之间的像素点的合：即像素距离；此距离作为外边距属性存至属性JSON内，后期可以方便进行CSS优化；
6：CSS属性优化。优化内容包括尽量减少/排除绝对定位属性信息：将绝对定位转换成普通定位，通过外边距进行排版；利用JS的数学函数，对属性值进行去零取整操作，规范属性值的数字；所有CSS属性被安排存储在一个外在的CSS文件中；HTML文件通过外链调用这个CSS文件；为增大容错度，减少误操作，所有元素的CSS定位标签都是ID定位；
7：已确定div边框识别。此模块针对非文字包络DIV；通过OCR技术扫描并判断DIV目标的包围背景和包围背景与内部背景的距离，同时获得包围背景的颜色值；这样，根据距离获得边框宽度；一个边框属性随即产生；再次截取边框内的包络DIV，替换掉最初的图片文件，即完成图片裁剪边框的操作；
本发明的上述方法中，每个背景库根据其颜色属性和位置属性，即可生成各个区域DIV；后期可分配ID和class。
本发明最终生成一个HTML文件、一个CSS文件夹和一个IMAGE文件夹，CSS文件夹内含一个CSS文件，HTML文件对该CSS文件进行引用；IMAGE文件夹包括非文字(图片)的DIV的截取，格式为图片格式。

Claims (9)

1.一种将图片转成HTML文档的方法，其特征在于：所述的方法是利用OCR图片识别技术和OCR识别的PHP接口API，对需要识别的内容进行设置和结果获取；将获得的背景色、大小、位置等参数进行优化、层次区分和CSS转储，从而实现图片转HTML。
2.根据权利要求1所述的方法，其特征在于：所述的方法主要包括背景色遍历扫描区分、背景色识别录入背景库、背景库层次迭代OCR识别、文字/非文字识别、相邻/非相邻DIV识别、CSS属性优化、已确定div边框识别；
所述背景色遍历扫描区分，利用OCR图片识别的PHP识别接口，进行横向、纵向像素点颜色值识别，获得第一背景色区域大小和背景色值；然后，遍历整个图片；得到N个第一背景色区域，全部录入背景库，得到第一包络DIV；
所述背景色识别录入背景库，利用WEB前端技术和PHP技术；首先记录每个背景色不同的第一包络DIV的属性，创建一个缓存数组对象JSON，内含多个缓存变量属性；将第一包络DIV属性遍历进这个JSON；
所述背景库层次迭代OCR识别，更新并改进JSON；利用迭代和遍历函数，分析每个第一包络DIV内的组成；将这些组成部分组合为该第一包络DIV的内部子对象；每个内部子对象都有其各自的属性；每个子对象也可能包含子对象，如此遍历下去，获得N个级别的对象合集；
所述文字/非文字识别，定义一个判断，判断是否为文字；若是，则获取到文字内容块的属性后进行自动文字识别；若否，则进入图片处理方式；
所述相邻/非相邻DIV识别，遍历每个相同级别的包络DIV的位置；若处于同一行/列，则进行相邻识别；
所述CSS属性优化，优化内容包括尽量减少/排除绝对定位属性信息，将绝对定位转换成普通定位，通过外边距进行排版；对属性值进行去零取整操作，规范属性值的数字；所有CSS属性被安排存储在一个外在的CSS文件中；HTML文件通过外链调用这个CSS文件；
所述已确定div边框识别，对非文字包络DIV；通过OCR技术扫描并判断DIV目标的包围背景和包围背景与内部背景的距离，同时获得包围背景的颜色值；再次截取边框内的包络DIV，替换掉最初的图片文件，完成图片裁剪边框的操作。
3.根据权利要求2所述的方法，其特征在于：背景色遍历扫描区分时，只识别沿图片纵向方向横向第一位的像素点的颜色值；当遇到不同的像素点颜色时，退回到上一像素点，得到纵向的相同颜色(第一背景色)的高度；然后开始转换识别方向，只识别沿图片横向方向的像素点的颜色值；当遇到不同的像素点颜色时，退回到上一像素点，得到横向的相同颜色(第一背景色)的宽度；从而确定第一背景色区域大小和背景色值；依次遍历整个图片；得到N个第一背景色区域，全部录入背景库，得到第一包络DIV。
4.根据权利要求2所述的方法，其特征在于：所述第一包络DIV的属性，重要属性包括宽度、高度、位置(以左上方第一个像素点为基准)；
为每个包络DIV对象都创建一个独有的ID属性并赋值。
5.根据权利要求2所述的方法，其特征在于：所述第一包络DIV的属性，重要属性包括宽度、高度、位置(以左上方第一个像素点为基准)；
为每个包络DIV对象都创建一个独有的ID属性并赋值。
6.根据权利要求2至5任一项所述的方法，其特征在于：所述的文字/非文字识别的文字内容块的属性包括宽度、高度、相对/绝对位置、文字大小、字体、字体颜色；
图片处理方式是：首先得到区域的范围，即同样得到宽度、高度、位置属性，其次利用PHP的图片截取函数自定义出一个图片截取方法；所截取的内容就是包括边框的图片DIV的内容；所截图片只能是矩形；且得到最终图片格式为最佳大小的JPG格式。
7.根据权利要求2至5任一项所述的方法，其特征在于：所述相邻/非相邻DIV识别中，算出DIV块之间的像素点的合，即像素距离；此距离作为外边距属性存至属性JSON内，后期可以方便进行CSS优化。
8.根据权利要求2至5任一项所述的方法，其特征在于：所述CSS属性优化中所有元素的CSS定位标签都是ID定位。
9.根据权利要求7所述的方法，其特征在于：所述CSS属性优化中所有元素的CSS定位标签都是ID定位。
CN201710850270.5A 2017-09-15 2017-09-15 一种将图片转成html文档的方法 Active CN107633055B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710850270.5A CN107633055B (zh) 2017-09-15 2017-09-15 一种将图片转成html文档的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710850270.5A CN107633055B (zh) 2017-09-15 2017-09-15 一种将图片转成html文档的方法

Publications (2)

Publication Number Publication Date
CN107633055A true CN107633055A (zh) 2018-01-26
CN107633055B CN107633055B (zh) 2021-04-27

Family

ID=61102012

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710850270.5A Active CN107633055B (zh) 2017-09-15 2017-09-15 一种将图片转成html文档的方法

Country Status (1)

Country Link
CN (1) CN107633055B (zh)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109062543A (zh) * 2018-06-07 2018-12-21 四川斐讯信息技术有限公司 一种路由器帮助信息的优化处理系统及其方法
CN109189390A (zh) * 2018-08-20 2019-01-11 福建天泉教育科技有限公司 自动生成布局文件的方法、存储介质
CN109241499A (zh) * 2018-08-10 2019-01-18 四川译讯信息科技有限公司 一种在线图文转换方法
CN109685053A (zh) * 2018-12-18 2019-04-26 北京天融信网络安全技术有限公司 训练文字识别系统的方法、装置、存储介质及电子设备
CN110166812A (zh) * 2019-05-17 2019-08-23 广州优视云集科技有限公司 一种支持动态调整清晰度的视频预览方法及系统
CN113361235A (zh) * 2021-06-30 2021-09-07 北京百度网讯科技有限公司 Html文件的生成方法、装置、电子设备及可读存储介质
CN118567647A (zh) * 2024-07-31 2024-08-30 上海大智慧信息科技有限公司 动态交互式展示系统的制作方法及其应用方法及系统

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103744674A (zh) * 2014-01-06 2014-04-23 北京奇虎科技有限公司 生成html程序代码的方法和装置
CN103970750A (zh) * 2013-01-25 2014-08-06 腾讯科技（深圳）有限公司 一种生成html网页的方法和装置
US8830241B1 (en) * 2009-11-30 2014-09-09 Amazon Technologies, Inc. Image conversion of text-based images
CN105930159A (zh) * 2016-04-20 2016-09-07 中山大学 一种基于图像的界面代码生成的方法及系统
US20170243234A1 (en) * 2016-02-18 2017-08-24 Adobe Systems Incorporated Methods and systems for tag expansion by handling website object variations and automatic tag suggestions in dynamic tag management

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8830241B1 (en) * 2009-11-30 2014-09-09 Amazon Technologies, Inc. Image conversion of text-based images
CN103970750A (zh) * 2013-01-25 2014-08-06 腾讯科技（深圳）有限公司 一种生成html网页的方法和装置
CN103744674A (zh) * 2014-01-06 2014-04-23 北京奇虎科技有限公司 生成html程序代码的方法和装置
US20170243234A1 (en) * 2016-02-18 2017-08-24 Adobe Systems Incorporated Methods and systems for tag expansion by handling website object variations and automatic tag suggestions in dynamic tag management
CN105930159A (zh) * 2016-04-20 2016-09-07 中山大学 一种基于图像的界面代码生成的方法及系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
吴春华: "基于HTML5的网页转换系统的设计与实现", 《中国优秀硕士学位论文全文数据库信息科技辑》 *

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109062543A (zh) * 2018-06-07 2018-12-21 四川斐讯信息技术有限公司 一种路由器帮助信息的优化处理系统及其方法
CN109062543B (zh) * 2018-06-07 2022-03-15 爱云保(上海)科技有限公司 一种路由器帮助信息的优化处理系统及其方法
CN109241499A (zh) * 2018-08-10 2019-01-18 四川译讯信息科技有限公司 一种在线图文转换方法
CN109241499B (zh) * 2018-08-10 2023-07-18 四川译讯信息科技有限公司 一种在线图文转换方法
CN109189390A (zh) * 2018-08-20 2019-01-11 福建天泉教育科技有限公司 自动生成布局文件的方法、存储介质
CN109189390B (zh) * 2018-08-20 2021-09-07 福建天泉教育科技有限公司 自动生成布局文件的方法、存储介质
CN109685053A (zh) * 2018-12-18 2019-04-26 北京天融信网络安全技术有限公司 训练文字识别系统的方法、装置、存储介质及电子设备
CN109685053B (zh) * 2018-12-18 2021-11-12 北京天融信网络安全技术有限公司 训练文字识别系统的方法、装置、存储介质及电子设备
CN110166812A (zh) * 2019-05-17 2019-08-23 广州优视云集科技有限公司 一种支持动态调整清晰度的视频预览方法及系统
CN113361235A (zh) * 2021-06-30 2021-09-07 北京百度网讯科技有限公司 Html文件的生成方法、装置、电子设备及可读存储介质
CN113361235B (zh) * 2021-06-30 2024-03-22 北京百度网讯科技有限公司 Html文件的生成方法、装置、电子设备及可读存储介质
CN118567647A (zh) * 2024-07-31 2024-08-30 上海大智慧信息科技有限公司 动态交互式展示系统的制作方法及其应用方法及系统

Also Published As

Publication number Publication date
CN107633055B (zh) 2021-04-27

Similar Documents

Publication Publication Date Title
CN107633055A (zh) 一种将图片转成html文档的方法
CN104298982B (zh) 一种文字识别方法及装置
CN109145713A (zh) 一种结合目标检测的小目标语义分割方法
CN108875595A (zh) 一种基于深度学习和多层特征融合的驾驶场景目标检测方法
CN103325117B (zh) 一种基于matlab的岩心图像处理方法及系统
CN103020970B (zh) 玉米果穗图像籽粒分割方法
CN103310211B (zh) 一种基于图像处理的填注标记识别方法
CN1312625C (zh) 基于游程邻接图的复杂背景彩色图像中字符提取方法
CN105930159A (zh) 一种基于图像的界面代码生成的方法及系统
CN105528485B (zh) 一种从位图自动轮廓提取及路径生成的方法
CN110110646A (zh) 一种基于深度学习的手势图像关键帧提取方法
CN104346615A (zh) 版式文档中复合图的提取装置和提取方法
CN105844275B (zh) 文本图像中文本行的定位方法
CN104680531B (zh) 一种连通量统计信息提取方法及vlsi结构
CN101373465A (zh) 翻译装置和翻译方法
CN104598907B (zh) 一种基于笔画宽度图的图像中文字数据提取方法
CN102567300A (zh) 图片文档的处理方法及装置
CN109378052A (zh) 图像标注的预处理方法及系统
CN106372639B (zh) 基于形态学与积分投影的印刷体维吾尔文文档切分方法
CN110969129A (zh) 一种端到端税务票据文本检测与识别方法
CN101840582B (zh) 一种地籍图地块的边界数字化方法
CN107678551A (zh) 手势识别方法和装置、电子设备
CN103793930A (zh) 铅笔画图像生成方法及装置
CN106228157A (zh) 基于图像识别技术的彩色图像文字段落分割与识别方法
US20210158513A1 (en) Information processing device, information processing method, and computer program

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information

Address after: 523808 19th floor, Cloud Computing Center, Chinese Academy of Sciences, No.1 Kehui Road, Songshanhu high tech Industrial Development Zone, Dongguan City, Guangdong Province

Applicant after: G-CLOUD TECHNOLOGY Co.,Ltd.

Address before: 523808 No. 14 Building, Songke Garden, Songshan Lake Science and Technology Industrial Park, Dongguan City, Guangdong Province

Applicant before: G-CLOUD TECHNOLOGY Co.,Ltd.

CB02 Change of applicant information
GR01 Patent grant
GR01 Patent grant