I don't know if you have already played "QQ Show"? If you have played, you will think you can also make a similar function. But I don't have to have a relationship, you can take a look at the demo below. Users can freely customize their own image in the list of pictures, and use the image of the forum community, the message and other places. It can be a good idea! how about it? Is your heart? Let us see what is going on here!
Demo:
In fact, the image of the "image preview" on the left is made up of a layer of pictures, huh, huh, understanding Photoshop layer technology is easy to understand. Like the size of each layer, the place that is necessary to display is adjusted at a specific range, and other places are transparent. When the image is changed, it is possible to replace the picture of the corresponding layer. It is not difficult to understand that only 20 pictures used in patchwork images (4 cases of the original image), but can spell 5
4 = 625 images!
We use a specific format string to record the user's image configuration, and the virtual image is displayed based on the string, which is called a configuration code. Access the configuration code when you access the image. Because this is very simple, the operation of the server-side language is not discussed here. The format of the configuration code will be easily understood, for example, "DF> 2> 1> 0" means that the first layer is named "DF.GIF", the second layer is named "2.gif", the third layer name "1.gif", there is no fourth layer. So don't name "0.gif" for the picture.
Let's take a look at how the virtual image is implemented. The four layers of patchwork in the demonstration (while you can use a more layer): the first floor of the trousers, the second top, the third layer, the fourth layer of hat. Each layer is placed in their respective directories, and the directory names are 1, 2, 3, 4, that is, the same number is the same. In addition, the pictures of the pictures and patchwork images are different, and only thumbnails in the list. The thumbnail of the larger image "1.gif" is "1x.gif", which is pushed. In addition, each directory has a picture "DF.GIF", which is the default original picture of the layer.
After this is placed, you start writing code. For ease of understanding, the order of the following code is not completely in the order in the presentation:
Click "Save Image" to submit the configuration code variable "useerequip" to the server and can be processed with the server-side language. To display this image elsewhere, you can choose some of the code in the above code according to the comment.
