Thumbnail processing with PHP

TipsMake.com - In essence, there are many websites hosting separate photo libraries and shared designs, all embedded in the page with thumbnail images, the purpose of this is when If users click on each thumbnail, the website will display the original image with larger size. We can easily implement this process using HTML anchor tags (surrounded by HTML image tags (

. But how to get the thumbnail from the original image of a large size? And how to ensure the aspect ratio of the original image? In the following article, we will cover some basic steps for you to perform this process with PHP, and specifically PHP's GD library. Some other basic information, you can refer here.

How does PHP's image processing mechanism work?

Specifically, inside the PHP code we can see two different types of images. One is the string of 'representative' binary data for the image, and these are also the data we store on the server's file system, which is used within the syntax of the HTML tag

. When you want to display other sizes of images, we need to initialize a new appearance method accordingly. Fortunately, the GD library allows users to create PHP resources to support this feature very well. GD's built-in functions allow users to easily implement this process similar to using query databases about related resources. At the end of this, the system is ready to save and display the image, then the rest of PHP is responsible for returning the source data into a binary string.

Here is an example code in this case:

first
7
8
9 ACQUIRE THE ARGUMENTS - MAY NEED SOME SANITY TESTS?
10 $ thumb_w = $ _GET ["w"];
11 $ thumb_h = $ _GET ["h"];
12 $ image_url = $ _GET ["img"];
13
14 // CREATE THE THUMBNAIL IMAGE RESOURCE AND FILL IN TRANSPARENT
15 $ thumb = imagecreatetruecolor ($ thumb_w, $ thumb_h);
16 imagesavealpha ($ thumb, TRUE);
17 $ empty = imagecolorallocatealpha ($ thumb, 0x00,0x00,0x00,127);
18 imagefill ($ thumb, 0, 0, $ empty);
19
20 // GET ORIGINAL IMAGE DIMENSIONS
21 $ array = getimagesize ($ image_url);
22 if ($ array)
23 {
24 list ($ image_w, $ image_h) = $ array;
25}
26 else
27 {
28 die ("NO IMAGE $ image_url");
29}
30
31 // ACQUIRE THE ORIGINAL IMAGE
32 $ image_ext = trim (strtoupper (end (explode ('.', $ Image_url))));
33 switch (strtoupper ($ image_ext))
34 {
35 case 'JPG':
36 case 'JPEG':
37 $ image = imagecreatefromjpeg ($ image_url);
38 break;
39
40 case 'PNG':
41 $ image = imagecreatefrompng ($ image_url);
42 break;
43
44 default: die ("UNKNOWN IMAGE TYPE: $ image_url");
45}
forty six
47 // GET THE LESSER OF THE RATIO OF THUMBNAIL H OR W DIMENSIONS
48 $ ratio_w = ($ thumb_w / $ image_w);
49 $ ratio_h = ($ thumb_h / $ image_h);
50 $ ratio = ($ ratio_w <$ ratio_h)? $ ratio_w: $ ratio_h;
51
52 // COMPUTE THUMBNAIL IMAGE DIMENSIONS
53 $ thumb_w_resize = $ image_w * $ ratio;
54 $ thumb_h_resize = $ image_h * $ ratio;
55
56 // COMPUTE THUMBNAIL IMAGE CENTERING OFFSETS
57 $ thumb_w_offset = ($ thumb_w - $ thumb_w_resize) / 2.0;
58 $ thumb_h_offset = ($ thumb_h - $ thumb_h_resize) / 2.0;
59
60 // COPY THE IMAGE TO THE CENTER OF THUMBNAIL
61 imagecopyresampled
62 ($ thumb
63, $ image
64, $ thumb_w_offset
65, $ thumb_h_offset
66, 0
67, 0
68, $ thumb_w_resize
69, $ thumb_h_resize
70, $ image_w
71, $ image_h
72)
seventy three ;
74
75 // SHOW THE NEW THUMB IMAGE
76 headers ('Content-type: image / png');
77 imagepng ($ thumb);
78
79 // RELEASE THE MEMORY USED BY THE RESOURCES
80 imagedestroy ($ thumb);
81 imagedestroy ($ image);

Examples of use cases:

When looking at the example code above, specifically the 6th line, we can completely put this code into the HTML image tag. Technically, the above code will perform three main functions (from line 9 - 12), the img function is the URL of the image, and the parameters w and h represent width - width and high - high . When applied to specific programs, if the user wants to filter these values, make sure the URL is pointed to the original image, and the parameters w and h are the values real.

The process of creating a data source of a thumbnail:

Our first step is to create a data source of this thumbnail image (lines 15 - 18), specifically using the imageCreateTrueColor () function to create with size parameters in pixels taken from the love function GET request. By default, the image is covered with black pixels, but the user wants to make the background transparent, so we will continue to use the imageSaveAlpha () function to send 'notifications'. 'Go to the GD library and use the whole alpha channel, besides the imageColorAllocateAlpha () function when sending to the original image and when returned, we will receive the signal of the transparent background image. You can refer here:

http://php.net/manual/en/function.imagecreatetruecolor.php

http://php.net/manual/en/function.imagesavealpha.php

http://php.net/manual/en/function.imagecolorallocatealpha.php

http://php.net/manual/en/function.imagefill.php

When the original part of the thumbnail image is complete, we will continue with the original image. First, get the width and high information of the image with the getImageSize () function, if you get an error in this step, review the direct path of the image, or the file that is pointing to is not an image file. In any case, if the function of this function fails, the next section of code cannot continue, so check carefully at this step (codestream 20-30).

You can refer to more details here:

http://php.net/manual/en/function.getimagesize.php

The next step requires the file format to be sent from the user. Technically, PHP will use different functions to create source images from different supported formats, in particular the input files will be JPG and PNG , besides GIF and BMP (see line of code 32). Then apply the switch / case control structure to choose the right imageCreateFrom function ( codestream 33 - 45). In case you want to recover or improve error handling, refer to the example of ImageCreateFromJPEG function here:

http://php.net/manual/en/function.imagecreatefromjpeg.php

http://php.net/manual/en/function.imagecreatefrompng.php

Calculate size and alignment with thumbnail images:

At this step, we will switch to the calculation of the required size of the thumbnail image compared to the original standard size (codestream 47 - 50). Because the user wants to keep this aspect ratio, and so you will apply a way to shrink this ratio, instead of changing it (line 52 - 54). Specifically, here we will make this part of the thumbnail in the middle of the transparent processed background image, with one part aligned from 4 sides: top, bottom, left and right. On the other hand, we continue to process the offset size from the upper left corner (codestream 56 - 58), more specifically, dividing this offset by combining two common processes.

Backup original image to source thumbnail:

After completing the above steps, now is the time to copy and reset some of the properties of the source image in the thumbnail section (see code line 60 - 73). Specifically, imageCopyResampled () function to combine and complete this process. Since using the original thumbnail image in the destination section created with imageCreateTrueColor () , we will get very nice results.

You can refer to the sample example here:

http://php.net/manual/en/function.imagecopyresampled.php

Send or save thumbnail images:

When the system starts sending the PNG image header, and continues to use the imagePNG () function to send the image to the browser (line 75 - 77), here we use PNG format because the JPG does not support it. support transparent effects, and replacing those transparent parts will be black pixels.

Next, many people will wonder: 'What if we want to save the photo instead of sending it to the browser?'. This idea is great and creative, especially when you want to re-use thumbnail images, and the process is quite easy to do. The imagePNG () function can take the name of the file as a backup parameter, and the next step to follow the logic will be to search for the thumbnail image, and if found, it will proceed to send it using readFile (). In case the thumbnail is not found, this process will switch to processing the collected information and creating an alternative PNG file on the server's file system. You can refer to some more examples of this imagePNG () function here:

http://php.net/manual/en/function.imagepng.php

http://php.net/manual/en/function.readfile.php

In essence, the image processing process above will require a lot of memory, and our final step is to free up the memory used (line code 80 - out), or refer to here:

http://php.net/manual/en/function.imagedestroy.php

Above is the whole process of using some functions of PHP to create and process the source of image files, along with the resizing, alignment . To learn more about This program, please refer to the synthesis example here:

http://php.net/manual/en/image.examples.php

http://us3.php.net/manual/en/function.imageconvolution.php#104006

Good luck!