Extracting HTML-formatted layouts from pictures

Automation of the Authoring interface

Significance: For the program designer, the more painful is the production interface. It is very meaningful to automate the process from the designer's manuscript (usually in JPG format) to the layout of the HTML to be converted to a DIV tag.

1. Design a tool: From the picture format, generate bootstrap3 layout file, the purpose is to create a nested suitable div,row,column

2. Ideas:

Definition: div is a rectangular box, and in the HTML layout of any two Div, there are several forms

In fact, in addition to the last staggered way (area overlap), two div can be combined in any way. The last way the coordinate representation is ()

Examine how the div is arranged, and how they should be divided into horizontal and vertical lines, so that they can be in a divided horizontal square? Obviously when two div long, wide coordinates have intersection, can only be divided in one direction, so that two div separated, which determines the first need to divide the horizontal or vertical lines. And for the long, the width is not the intersection time, for example the above legend of the second, the first horizontal division or the first vertical division is irrelevant, in order to our program can work, we set in this case, we must first carry out the vertical division.

3. Code function structure

Then the tool should have two large functions, the first function is to be able to identify the image of the disjoint block blocks. Take an algorithm that identifies the box block of the foreground of the picture from the background. The second function is to convert the identified block blocks into div (conforming to the bootstrap grid system) according to the idea above.

Identify the picture foreground and form a box:

Translate to Div:

Extracting HTML-formatted layouts from pictures