Create a virtual image like "QQ Show"

I wonder if you have ever played "QQ Show "? If you have played it, you will surely want to make a similar function yourself. It doesn't matter if you haven't played it. You can take a look at the demo below. Users can customize their own images in the listed images and use them in forums. CommunityIt is a good idea to display the image of the message Book and other places! How is it? Why? Let's see what's going on here!

Demo:

In fact, the "image preview" on the left is made up of multiple images on one layer. It is easy to understand the Photoshop layer technology. The size of each layer is the same, and the display area must be adjusted to a specific range. Other areas are transparent. When you change the image, you only need to replace the image at the corresponding layer. It is not hard to understand. In the demonstration, only 20 images are used to piece together the image (four original images), but 54 = 625 images can be spelled out!

We use a character string in a specific format to record the user's image configuration. It also displays the Virtual Image Based on the character string, which is also known as the configuration code. You can access the configuration code when accessing the image. This is very simple, so we will not discuss the operations on the server language here. The configuration code format is easy to understand, for example, "DF> 2> 1> 0160 first-layer image name: “df.gif; second-layer image name: “2.gif; Third-layer image name: “1.gif", without the fourth layer. If you do not want to give the image a watermark 0.gif ".

Next we will look at how the virtual image is actually implemented. A layer-4 image is used in the demonstration (you can use a more layer): the first layer of pants, the second layer of top, the third layer of hair, the fourth layer of the hat. The images for each layer are stored in their respective directories. The directory names are 1, 2, 3, and 4, which are the same as the layers. In addition, the images in the list are different from those in the patchwork image. The images in the list are just thumbnails. Figure 1. gif is equivalent to picture 1x.gif. In addition, each directory has an image named df.gif ", which is the default source image for this layer.

After the pictures are placed here, write them.CodeFor ease of understanding, the order of the following code is not exactly the order in the demo:

Click "Save image" to submit the configuration code variable "userequip" to the server for processing. To display this image elsewhere, you can select some code in the above Code based on the annotation.