CN107633055B - 一种将图片转成html文档的方法 - Google Patents
一种将图片转成html文档的方法 Download PDFInfo
- Publication number
- CN107633055B CN107633055B CN201710850270.5A CN201710850270A CN107633055B CN 107633055 B CN107633055 B CN 107633055B CN 201710850270 A CN201710850270 A CN 201710850270A CN 107633055 B CN107633055 B CN 107633055B
- Authority
- CN
- China
- Prior art keywords
- div
- picture
- background
- identification
- 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.)
- Active
Links
Images
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供后端人员开发功能；前端人员往往需要很大的工作量，才能完成一个前端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 (8)
1.一种将图片转成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，替换掉最初的图片文件，完成图片裁剪边框的操作。
2.根据权利要求1所述的方法，其特征在于：背景色遍历扫描区分时，只识别沿图片纵向方向横向第一位的像素点的颜色值；当遇到不同的像素点颜色时，退回到上一像素点，得到纵向的相同颜色的高度；然后开始转换识别方向，只识别沿图片横向方向的像素点的颜色值；当遇到不同的像素点颜色时，退回到上一像素点，得到横向的相同颜色的宽度；从而确定第一背景色区域大小和背景色值；依次遍历整个图片；得到N个第一背景色区域，全部录入背景库，得到第一包络DIV。
3.根据权利要求1所述的方法，其特征在于：所述第一包络DIV的属性，重要属性包括宽度、高度、位置；
为每个包络DIV对象都创建一个独有的ID属性并赋值。
4.根据权利要求2所述的方法，其特征在于：所述第一包络DIV的属性，重要属性包括宽度、高度、位置；
为每个包络DIV对象都创建一个独有的ID属性并赋值。
5.根据权利要求1至4任一项所述的方法，其特征在于：所述的文字/非文字识别的文字内容块的属性包括宽度、高度、相对/绝对位置、文字大小、字体、字体颜色；
图片处理方式是：首先得到区域的范围，即同样得到宽度、高度、位置属性，其次利用PHP的图片截取函数自定义出一个图片截取方法；所截取的内容就是包括边框的图片DIV的内容；所截图片只能是矩形；且得到最终图片格式为最佳大小的JPG格式。
6.根据权利要求1至4任一项所述的方法，其特征在于：所述相邻/非相邻DIV识别中，算出DIV块之间的像素点的合，即像素距离；此距离作为外边距属性存至属性JSON内，后期可以方便进行CSS优化。
7.根据权利要求1至4任一项所述的方法，其特征在于：所述CSS属性优化中所有元素的CSS定位标签都是ID定位。
8.根据权利要求6所述的方法，其特征在于：所述CSS属性优化中所有元素的CSS定位标签都是ID定位。
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 CN107633055A (zh) | 2018-01-26 |
| CN107633055B true 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) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109062543B (zh) * | 2018-06-07 | 2022-03-15 | 爱云保(上海)科技有限公司 | 一种路由器帮助信息的优化处理系统及其方法 |
| CN109241499B (zh) * | 2018-08-10 | 2023-07-18 | 四川译讯信息科技有限公司 | 一种在线图文转换方法 |
| CN109189390B (zh) * | 2018-08-20 | 2021-09-07 | 福建天泉教育科技有限公司 | 自动生成布局文件的方法、存储介质 |
| CN109685053B (zh) * | 2018-12-18 | 2021-11-12 | 北京天融信网络安全技术有限公司 | 训练文字识别系统的方法、装置、存储介质及电子设备 |
| CN110166812A (zh) * | 2019-05-17 | 2019-08-23 | 广州优视云集科技有限公司 | 一种支持动态调整清晰度的视频预览方法及系统 |
| CN113361235B (zh) * | 2021-06-30 | 2024-03-22 | 北京百度网讯科技有限公司 | Html文件的生成方法、装置、电子设备及可读存储介质 |
Family Cites Families (5)
| 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 |
| CN103970750B (zh) * | 2013-01-25 | 2018-10-02 | 腾讯科技（深圳）有限公司 | 一种生成html网页的方法和装置 |
| CN103744674B (zh) * | 2014-01-06 | 2017-01-25 | 北京奇虎科技有限公司 | 生成html程序代码的方法和装置 |
| US10733247B2 (en) * | 2016-02-18 | 2020-08-04 | Adobe Inc. | Methods and systems for tag expansion by handling website object variations and automatic tag suggestions in dynamic tag management |
| CN105930159B (zh) * | 2016-04-20 | 2019-09-17 | 中山大学 | 一种基于图像的界面代码生成的方法及系统 |
-
2017
- 2017-09-15 CN CN201710850270.5A patent/CN107633055B/zh active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN107633055A (zh) | 2018-01-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107633055B (zh) | 一种将图片转成html文档的方法 | |
| CN110363102B (zh) | 一种pdf文件的对象识别处理方法及装置 | |
| US10846553B2 (en) | Recognizing typewritten and handwritten characters using end-to-end deep learning | |
| US10191889B2 (en) | Systems, apparatuses and methods for generating a user interface by performing computer vision and optical character recognition on a graphical representation | |
| CA2027253C (en) | Editing text in an image | |
| EP3117369B1 (en) | Detecting and extracting image document components to create flow document | |
| KR20190123790A (ko) | 전자 문서로부터 데이터 추출 | |
| JP4646797B2 (ja) | 画像処理装置及びその制御方法、プログラム | |
| CN102194123B (zh) | 表格模板定义方法和装置 | |
| RU2631168C2 (ru) | Способы и устройства, которые преобразуют изображения документов в электронные документы с использованием trie-структуры данных, содержащей непараметризованные символы для определения слов и морфем на изображении документа | |
| CN112784202B (zh) | 一种基于web技术的提高网页截图清晰度的方法 | |
| US10417516B2 (en) | System and method for preprocessing images to improve OCR efficacy | |
| CN111340037B (zh) | 文本版面分析方法、装置、计算机设备和存储介质 | |
| CN114005123A (zh) | 一种印刷体文本版面数字化重建系统及方法 | |
| US20200005033A1 (en) | Column Inferencer | |
| US11494588B2 (en) | Ground truth generation for image segmentation | |
| US20030012438A1 (en) | Multiple size reductions for image segmentation | |
| CN115546809A (zh) | 基于单元格约束的表格结构识别方法及其应用 | |
| CN115828874A (zh) | 基于图像识别技术的行业表格数字化处理方法 | |
| CN116311259A (zh) | 一种pdf业务文档的信息抽取方法 | |
| RU2625533C1 (ru) | Устройства и способы, которые строят иерархически упорядоченную структуру данных, содержащую непараметризованные символы, для преобразования изображений документов в электронные документы | |
| CN101901333B (zh) | 文本图像中切分词的方法及使用该方法的识别装置 | |
| CN112416340A (zh) | 基于草图的网页生成方法和系统 | |
| CN116484833A (zh) | 文档解析方法及装置 | |
| CN115797955A (zh) | 基于单元格约束的表格结构识别方法及其应用 |
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 |