本发明专利技术属于网页开发技术领域，具体提供一种将图片转化html页面的方法、装置、设备及介质，所述方法包括如下步骤：接收上传的待转换图片，根据上传的待转换图片的尺寸创建画布，并将所述待转换图片添加到创建的画布中；按照预设粒度对画布进行网格划分生成多个网格点；并设置每个网格的坐标原点；分别遍历画布中的各网格点的坐标获取待处理的目标区域并截取目标区域；获取截取目标区域的文字信息；选择生成的页面，根据目标区域相对于图片的绝对位置结合目标区域的宽度和高度填充相应的文字信息生成html文档。能更快的复制图片上的文字，获取文字颜色和字体大小，节约前端开发时间，满足日常的定制化开发需求。
【技术实现步骤摘要】
本专利技术涉及网页开发，具体涉及一种将图片转化html页面的方法、装置、设备及介质。
技术介绍
1、html是一种用于定义内容结构的标记语言，目前互联网上所有在浏览器中显示的富文本内容都是基于html渲染的。html文档作为半结构化数据，是介于结构化和非结构化之间的数据。
2、在一些场景下，需要将图片中的信息提取显示，为此，需要将图片转换为html文档；这就需要解决在将图片转换为html文档的问题，例如，网页设计人员通常将一个网页设计完成后会导出成图片的形式给下一工作流程人员的网页前端工作人员；网页前端工作人员负责将图片转成前端html供后端人员开发功能；前端人员需要大量工作才能完成一个制作。
3、使用图片识别文字的插件进行图片识别时识别出的文字是按行列识别，识别出的文字排序错乱，文字的颜色和字体大小也无法识别。如何实现在确保对图片背景颜色、大小、方位进行精确定位的同时，实现页面的布局。
技术实现思路
1、如何实现在确保对图片背景颜色、大小、方位进行精确定位的同时，实现页面的布局的问题，本专利技术提供一种将图片转化html页面的方法、装置、设备及介质。
2、第一方面，本专利技术技术方案提供一种将图片转化html页面的方法，包括如下步骤：
3、接收上传的待转换图片，根据上传的待转换图片的尺寸创建画布，并将所述待转换图片添加到创建的画布中；
4、按照预设粒度对画布进行网格划分生成多个网格点；并设置每个网格的坐标原点；
<
p>5、分别遍历画布中的各网格点的坐标获取待处理的目标区域并截取目标区域；6、获取截取目标区域的文字信息；
7、选择生成的页面，根据目标区域相对于图片的绝对位置结合目标区域的宽度和高度填充相应的文字信息生成html文档。
8、作为本专利技术技术方案的进一步限定，接收上传的待转换图片，根据上传的待转换图片的尺寸创建画布，并将所述待转换图片添加到创建的画布中的步骤包括：
9、接收上传的待转换图片；
10、设置图片的左上方的边界点为坐标原点，获取图片各边界点的坐标；
11、根据获取的图片各边界点的坐标计算图片的长度和宽度；
12、根据计算的图片的长度和宽度同比例创建画布；
13、将所述待转换图片添加到创建的画布中。
14、作为本专利技术技术方案的进一步限定，按照预设粒度对画布进行网格划分生成多个网格点；并设置每个网格的坐标原点的步骤包括：
15、设置画布的坐标原点与图片的坐标原点重合；
16、按照预设粒度对画布进行网格划分生成多个网格点；
17、设置每个网格的最左上的点为网格的坐标原点。
18、作为本专利技术技术方案的进一步限定，分别遍历画布中的各网格点的坐标获取待处理的目标区域并截取目标区域的步骤包括：
19、在画布的坐标原点向下向右方向分别遍历各网格的坐标原点，并设置x轴和y轴方向的两个坐标数组；
20、对比相邻坐标的颜色；
21、若有变化，记录当前坐标值到对应的坐标数组，按照数组顺序组合成[x0，y0][x1，y1]的坐标；
22、根据x轴的坐标差获取宽度，y轴的坐标差获取高度生成目标区域；
23、截取目标区域的图片部分。
24、作为本专利技术技术方案的进一步限定，获取截取目标区域的文字信息的步骤包括：
25、将截取目标区域进行处理，遍历x轴和y轴，获取文字颜色以及长度和宽度计算出文字px值。
26、作为本专利技术技术方案的进一步限定，将截取目标区域进行处理，遍历x轴和y轴，获取文字颜色以及长度和宽度计算出文字px值的步骤包括：
27、将截取目标区域进行处理确定截取目标区域的文字区域；
28、将图片进行分割获取多个数据块并按照书写顺序对文字区域内的数据块进行标识；
29、确定文字区域内的每个数据块在图片上的坐标；
30、遍历x轴和y轴，获取文字颜色以及长度和宽度计算出文字px值。
31、作为本专利技术技术方案的进一步限定，选择生成的页面，根据目标区域相对于图片的绝对位置结合目标区域的宽度和高度填充相应的文字信息生成html文档的步骤之后包括：
32、接收到触发信息时，将生成的html文档输出。
33、第二方面，本专利技术技术方案提供一种将图片转化html页面的装置，包括画布处理模块、网格划分模块、目标区域获取模块、文字信息获取模块和html文档生成模块；
34、画布处理模块，用于接收上传的待转换图片，根据上传的待转换图片的尺寸创建画布，并将所述待转换图片添加到创建的画布中；
35、网格划分模块，用于按照预设粒度对画布进行网格划分生成多个网格点；并设置每个网格的坐标原点；
36、目标区域获取模块，用于分别遍历画布中的各网格点的坐标获取待处理的目标区域并截取目标区域的图片；
37、文字信息获取模块，用于获取截取目标区域的文字信息；
38、html文档生成模块，用于选择生成的页面，根据目标区域相对于图片的绝对位置结合目标区域的宽度和高度填充相应的文字信息生成html文档。
39、作为本专利技术技术方案的进一步限定，画布处理模块包括图片接收单元、坐标设置单元、图片尺寸计算单元、画布创建单元和图片加载单元；
40、图片接收单元，用于接收上传的待转换图片；
41、坐标设置单元，用于设置图片的左上方的边界点为坐标原点，获取图片各边界点的坐标；
42、图片尺寸计算单元，用于根据获取的图片各边界点的坐标计算图片的长度和宽度；
43、画布创建单元，用于根据计算的图片的长度和宽度同比例创建画布；
44、图片加载单元，用于将所述待转换图片添加到创建的画布中。
45、作为本专利技术技术方案的进一步限定，网格划分模块，具体用于设置画布的坐标原点与图片的坐标原点重合；按照预设粒度对画布进行网格划分生成多个网格点；设置每个网格的最左上的点为网格的坐标原点。
46、作为本专利技术技术方案的进一步限定，目标区域获取模块，具体用于在画布的坐标原点向下向右方向分别遍历各网格的坐标原点，并设置x轴和y轴方向的两个坐标数组；对比相邻坐标的颜色；若有变化，记录当前坐标值到对应的坐标数组，按照数组顺序组合成[x0，y0][x1，y 1]的坐标；根据x轴的坐标差获取宽度，y轴的坐标差获取高度生成目标区域；截取目标区域的图片。
47、作为本专利技术技术方案的进一步限定，获取截取目标区域的文字信息的步骤包括：
48、文字信息获取模块，用于将截取目标区域进行处理，遍历x轴和y轴，获取文字颜色以及长度和宽度计算出文字px值。
49、作为本专利技术技术方案的进一步限定，文字信息获取模块包括文字区域获取单元、标识单元和文字信息获取单本文档来自技高网
...
【技术保护点】
1.一种将图片转化html页面的方法，其特征在于，包括如下步骤：
2.根据权利要求1所述的将图片转化html页面的方法，其特征在于，接收上传的待转换图片，根据上传的待转换图片的尺寸创建画布，并将所述待转换图片添加到创建的画布中的步骤包括：
3.根据权利要求2所述的将图片转化html页面的方法，其特征在于，按照预设粒度对画布进行网格划分生成多个网格点；并设置每个网格的坐标原点的步骤包括：
4.根据权利要求3所述的将图片转化html页面的方法，其特征在于，分别遍历画布中的各网格点的坐标获取待处理的目标区域并截取目标区域的步骤包括：
5.根据权利要求4所述的将图片转化html页面的方法，其特征在于，获取截取目标区域的文字信息的步骤包括：
6.根据权利要求5所述的将图片转化html页面的方法，其特征在于，将截取目标区域进行处理，遍历x轴和y轴，获取文字颜色以及长度和宽度计算出文字px值的步骤包括：
7.根据权利要求6所述的将图片转化html页面的方法，其特征在于，选择生成的页面，根据目标区域相对于图片的绝对位置结合目标区域的宽度和高度填充相应的文字信息生成html文档的步骤之后包括：
8.一种将图片转化html页面的装置，其特征在于，包括画布处理模块、网格划分模块、目标区域获取模块、文字信息获取模块和html文档生成模块；
9.一种电子设备，其特征在于，所述电子设备包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；存储器存储有可被至少一个处理器执行的计算机程序指令，所述计算机程序指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任一项所述的将图片转化html页面的方法。
10.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1至7任一项所述的将图片转化html页面的方法。
...
【技术特征摘要】
1.一种将图片转化html页面的方法，其特征在于，包括如下步骤：
2.根据权利要求1所述的将图片转化html页面的方法，其特征在于，接收上传的待转换图片，根据上传的待转换图片的尺寸创建画布，并将所述待转换图片添加到创建的画布中的步骤包括：
3.根据权利要求2所述的将图片转化html页面的方法，其特征在于，按照预设粒度对画布进行网格划分生成多个网格点；并设置每个网格的坐标原点的步骤包括：
4.根据权利要求3所述的将图片转化html页面的方法，其特征在于，分别遍历画布中的各网格点的坐标获取待处理的目标区域并截取目标区域的步骤包括：
5.根据权利要求4所述的将图片转化html页面的方法，其特征在于，获取截取目标区域的文字信息的步骤包括：
6.根据权利要求5所述的将图片转化html页面的方法，其特征在于，将截取目标区域进行处理，遍历x轴和y轴，获取文字颜色以及长度和宽度计算出文字px值的步骤包括...
【专利技术属性】
技术研发人员：邓晴晴，景皓鑫，朱斌，
申请(专利权)人：浪潮智慧科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。