Posted By

fackz on 03/22/15


Tagged

thumbnail on Fly the


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

fackz
JeffSFO


Image Thumbnail On-The-Fly Using PHP


 / Published in: PHP
 

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

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.

  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. ?>

Report this snippet  

You need to login to post a comment.