一种将图片转成HTML文档的方法技术

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

A method of turning a picture into a HTML document

【技术实现步骤摘要】
一种将图片转成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边框识别。此模块本文档来自技高网...

【技术保护点】
一种将图片转成HTML文档的方法，其特征在于：所述的方法是利用OCR图片识别技术和OCR识别的PHP接口API，对需要识别的内容进行设置和结果获取；将获得的背景色、大小、位置等参数进行优化、层次区分和CSS转储，从而实现图片转HTML。

【技术特征摘要】
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目标的包围背景和包围背景与内部背景的距离，同时...

【专利技术属性】
技术研发人员：黄博，关班记，张远世，齐兆勇，庞毅，何龙泉，季统凯，
申请(专利权)人：国云科技股份有限公司，
类型：发明
国别省市：广东,44