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