Web page without a picture is no longer a dream-

Today, I want to introduce a small tool that can help achieve the ultimate goal of no web page. Theoretically, it can convert any image into a clean html Tag without an image or background image. But there is a premise: Your computer must have enough resources to support it ....,.

For a long time, the optimization work of web development has never been stopped. The absence of web pages is also a kind of imagination to reduce page resource requests. It is understandable that in the course of web development, we have achieved an immortal achievement in the absence of web pages: from the very beginning, the small ICON resources are fragmented, and then the small icon is merged into an image to see a Sprite image, later, the emergence of Webfont not only replaced sprites, but also completely solved the difficult icon management and the trouble of color changing. Today, I want to introduce a small tool that can help achieve the ultimate goal of no web page. Theoretically, it can convert any image into a clean html Tag without an image or background image. But there is a premise: Your computer must have enough resources to support it.

　　Origin

It was a working day morning. I always wanted to arrive at my job on time and start my computer, open the browser and I accidentally found an article titled 18 things you may not believe are made with CSS. It is out of professional sensitivity, out of curiosity, I clicked in and saw it. I found that there was a very interesting work: Ghost.

　Fade into topic

Since a tag can be used to create a delicate pixel image, does it mean that any image can be restored with a tag? The only thing that cannot be restored is the fineness of the image. However, if you can refine each pixel, it is also feasible to restore the entire image with high precision, but this will consume a lot of computer resources. This idea is the catalyst that gave birth to this tool, so I started to think about it.

　　Case Analysis

By analyzing the source code of the above case using Developer Tools, I found that its implementation is not difficult. We know that in CSS3, a box-shadow attribute is added to set the box shadow. This attribute can be used to set any number of shadow blocks with different colors and degrees of dispersion at the same time, the case perfectly interprets this new property.

In this case, let's do an experiment now. We can cover any small square lattice with the same size on any one of the images, and we can separate any picture into small squares, as long as we know the size, order, and position of these small squares, We can restructure the image, as shown in the following comparison figure:

However, there is a problem: the reference color of box-shadow is monochrome, and the pattern in each box range is complicated. How can we solve this problem?

Because box-shadow can only be set with color, there is only one result for this problem. To find a color that can represent this grid, you can choose which color value varies from person to person, you can select either of the four corners of the grid, an optional center point, or any point in the grid. I chose this point in the upper left corner of the grid. It is not difficult to find that if we try to narrow down the grid as much as possible, as small as one pixel left, we can completely restore an image.

　　Technical Implementation

First, how can we obtain the color value of each grid based on the image? This problem is not difficult. HTML5 provides Canvas labels for us, and through Canvas, we can use the getImageData method to obtain the color information and transparency information of any vertex in the Canvas.

Then, let's consider how to design our gadgets. In the first step, different images may be suitable for different lattice sizes, so I will reserve a size Option to set the size of the box. In the second step, check whether the gap between the grid and the grid is retained, the gap size may vary according to user habits, So I provide the space option to set the gap size. Step 3, the lattice is actually a shadow of a box, the shape of the Shadow varies according to the box, so I provide the radius attribute to configure the size of the grid rounded corner. Finally, since we get an html tag, the tag can contain various attributes (such as id and class), So I provide an attrs attribute (A json object) to set the attributes of the generated html element. All right, everything is ready, and the code is not implemented!

Finally, we sorted out the logic, encapsulated the code, and completed the most basic version. The effect is as follows:

To help you see more real results, we will provide you with an online DEMO.

　　Summary

In terms of functions, I have implemented the conversion from an image to an html element, but it may not be the best web page without a diagram, because the HTML Tag converted by the tool, too many shadow blocks are set, which is unfriendly to browser rendering and may have certain requirements on users' computer hardware, especially when the block size is 1 (that is, the complete restoration of images, the conversion process is very slow. If the image size is larger, it is very likely that the user's browser will crash. Therefore, we recommend that you use big charts for testing with caution. In addition, the size of html tags and style strings obtained after conversion may be much larger than the size of the image itself, so I can only say that this is a feasible technical solution, but it may not be a good implementation solution. (However)

The article is reprinted from the [original] web page without a picture, not a dream from the hundred yards Villa