Extracting HTML-formatted layouts from pictures

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.