Image Thumbnail On-The-Fly Using PHP


/ Published in: PHP
Save to your folder(s)

The script that creates the thumbnail wlll also need to output it in an image format. This means we will be using the ordinary tag which links to a PHP file rather than an image.


Copy this code and paste it in your HTML
  1. <?php
  2.  
  3. //re-size an image and keep its exact proportions
  4. //<img src="thumbnail.php?file=img.jpg&maxw=50&maxh=50" />
  5.  
  6. //Alternatively, we might want to have thumbnails that are all the same size, regardless of the original proportions.
  7. //<img src="thumbnail.php?file=img.jpg&width=50&height=50" />
  8.  
  9.  
  10. // Get the File path for the image
  11.  
  12. $sImagePath = $_GET["file"];
  13.  
  14. // If you want exact dimensions, you
  15. // will pass 'width' and 'height'
  16.  
  17. $iThumbnailWidth = (int)$_GET['width'];
  18. $iThumbnailHeight = (int)$_GET['height'];
  19.  
  20. // If you want proportional thumbnails,
  21. // you will pass 'maxw' and 'maxh'
  22.  
  23. $iMaxWidth = (int)$_GET["maxw"];
  24. $iMaxHeight = (int)$_GET["maxh"];
  25.  
  26. // Based on the above we can tell which
  27. // type of resizing our script must do
  28.  
  29. if ($iMaxWidth && $iMaxHeight) $sType = 'scale';
  30. else if ($iThumbnailWidth && $iThumbnailHeight) $sType = 'exact';
  31.  
  32. // The 'scale' type will make the image
  33. // smaller but keep the same dimensions
  34.  
  35. // The 'exact' type will make the thumbnail
  36. // exactly the width and height you choose
  37.  
  38. // To start off, we will create a copy
  39. // of our original image in $img
  40.  
  41. $img = NULL;
  42.  
  43. // At this point, we need to know the
  44. // format of the image
  45.  
  46. // Based on that, we can create a new
  47. // image using these functions:
  48. // - imagecreatefromjpeg
  49. // - imagecreatefrompng
  50. // - imagecreatefromgif
  51.  
  52. $sExtension = strtolower(end(explode('.', $sImagePath)));
  53. if ($sExtension == 'jpg' || $sExtension == 'jpeg') {
  54.  
  55. $img = @imagecreatefromjpeg($sImagePath)
  56. or die("Cannot create new JPEG image");
  57.  
  58. } else if ($sExtension == 'png') {
  59.  
  60. $img = @imagecreatefrompng($sImagePath)
  61. or die("Cannot create new PNG image");
  62.  
  63. } else if ($sExtension == 'gif') {
  64.  
  65. $img = @imagecreatefromgif($sImagePath)
  66. or die("Cannot create new GIF image");
  67.  
  68. }
  69.  
  70. // If the image has been created, we may proceed
  71. // to the next step
  72.  
  73. if ($img) {
  74.  
  75. // We now need to decide how to resize the image
  76.  
  77. // If we chose to scale down the image, we will
  78. // need to get the original image propertions
  79.  
  80. $iOrigWidth = imagesx($img);
  81. $iOrigHeight = imagesy($img);
  82.  
  83. if ($sType == 'scale') {
  84.  
  85. // Get scale ratio
  86.  
  87. $fScale = min($iMaxWidth/$iOrigWidth,
  88. $iMaxHeight/$iOrigHeight);
  89.  
  90. // To explain how this works, say the original
  91. // dimensions were 200x100 and our max width
  92. // and height for a thumbnail is 50 pixels.
  93. // We would do $iMaxWidth/$iOrigWidth
  94. // (50/200) = 0.25
  95. // And $iMaxHeight/$iOrigHeight
  96. // (50/100) = 0.5
  97.  
  98. // We then use the min() function
  99. // to find the lowest value.
  100.  
  101. // In this case, 0.25 is the lowest so that
  102. // is our scale. The thumbnail must be
  103. // 1/4th (0.25) of the original image
  104.  
  105. if ($fScale < 1) {
  106.  
  107. // We must only run the code below
  108. // if the scale is lower than 1
  109. // If it isn't, this means that
  110. // the thumbnail we want is actually
  111. // bigger than the original image
  112.  
  113. // Calculate the new height and width
  114. // based on the scale
  115.  
  116. $iNewWidth = floor($fScale*$iOrigWidth);
  117. $iNewHeight = floor($fScale*$iOrigHeight);
  118. // Create a new temporary image using the
  119. // imagecreatetruecolor function
  120.  
  121. $tmpimg = imagecreatetruecolor($iNewWidth,
  122. $iNewHeight);
  123.  
  124. // The function below copies the original
  125. // image and re-samples it into the new one
  126. // using the new width and height
  127.  
  128. imagecopyresampled($tmpimg, $img, 0, 0, 0, 0,
  129. $iNewWidth, $iNewHeight, $iOrigWidth, $iOrigHeight);
  130.  
  131. // Finally, we simply destroy the $img file
  132. // which contained our original image
  133. // so we can replace with the new thumbnail
  134.  
  135. imagedestroy($img);
  136. $img = $tmpimg;
  137. }
  138.  
  139. } else if ($sType == "exact") {
  140.  
  141. // Get scale ratio
  142.  
  143. $fScale = max($iThumbnailWidth/$iOrigWidth,
  144. $iThumbnailHeight/$iOrigHeight);
  145.  
  146. // This works similarly to other one but
  147. // rather than the lowest value, we need
  148. // the highest. For example, if the
  149. // dimensions were 200x100 and our thumbnail
  150. // had to be 50x50, we would calculate:
  151. // $iThumbnailWidth/$iOrigWidth
  152. // (50/200) = 0.25
  153. // And $iThumbnailHeight/$iOrigHeight
  154. // (50/100) = 0.5
  155.  
  156. // We then use the max() function
  157. // to find the highest value.
  158.  
  159. // In this case, 0.5 is the highest so that
  160. // is our scale. This is the first step of
  161. // the image manipulation. Once we scale
  162. // the image down to 0.5, it will have the
  163. // dimensions of 100x50. At this point,
  164. // we will need to crop the image, leaving
  165. // the height identical but halving
  166. // the width to 50
  167.  
  168. if ($fScale < 1) {
  169.  
  170. // Calculate the new height and width
  171. // based on the scale
  172.  
  173. $iNewWidth = floor($fScale*$iOrigWidth);
  174. $iNewHeight = floor($fScale*$iOrigHeight);
  175. // Create a new temporary image using the
  176. // imagecreatetruecolor function
  177.  
  178. $tmpimg = imagecreatetruecolor($iNewWidth,
  179. $iNewHeight);
  180. $tmp2img = imagecreatetruecolor($iThumbnailWidth,
  181. $iThumbnailHeight);
  182.  
  183. // The function below copies the original
  184. // image and re-samples it into the new one
  185. // using the new width and height
  186.  
  187. imagecopyresampled($tmpimg, $img, 0, 0, 0, 0,
  188. $iNewWidth, $iNewHeight, $iOrigWidth, $iOrigHeight);
  189.  
  190. // Our $tmpimg will now have the scaled down
  191. // image. The next step is cropping the picture to
  192. // make sure it's exactly the size of the thumbnail
  193.  
  194. // The following logic choose how the image
  195. // will be cropped. Using the previous example, it
  196. // needs to take a 50x50 block from the original
  197. // image and copy it over to the new thumbnail
  198.  
  199. // Since we want to copy the exact center of the
  200. // scaled down image, we need to find out the x
  201. // axis and y axis. To do so, say the scaled down
  202. // image now has a width of 100px but we want it
  203. // to be only 50px
  204.  
  205. // Somehow, we need to select between the 25th and
  206. // 75th pixel to copy the middle.
  207.  
  208. // To find this value we do:
  209. // ($iNewWidth/2)-($iThumbnailWidth/2)
  210.  
  211. // ( 100px / 2 ) - (50px / 2)
  212. // ( 50px ) - ( 25px )
  213. // = 25px
  214.  
  215. if ($iNewWidth == $iThumbnailWidth) {
  216.  
  217. $yAxis = ($iNewHeight/2)-
  218. ($iThumbnailHeight/2);
  219. $xAxis = 0;
  220.  
  221. } else if ($iNewHeight == $iThumbnailHeight) {
  222.  
  223. $yAxis = 0;
  224. $xAxis = ($iNewWidth/2)-
  225. ($iThumbnailWidth/2);
  226.  
  227. }
  228.  
  229. // We now have to resample the new image using the
  230. // new dimensions are axis values.
  231.  
  232. imagecopyresampled($tmp2img, $tmpimg, 0, 0,
  233. $xAxis, $yAxis,
  234. $iThumbnailWidth,
  235. $iThumbnailHeight,
  236. $iThumbnailWidth,
  237. $iThumbnailHeight);
  238.  
  239. imagedestroy($img);
  240. imagedestroy($tmpimg);
  241. $img = $tmp2img;
  242. }
  243.  
  244. }
  245.  
  246. // Display the image using the header function to specify
  247. // the type of output our page is giving
  248.  
  249. header("Content-type: image/jpeg");
  250. imagejpeg($img);
  251.  
  252. }
  253.  
  254. ?>

URL: http://www.webgeekly.com/tutorials/php/how-to-create-an-image-thumbnail-on-the-fly-using-php/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.