PHP Image Resize Function Tutorial jpg gif png Size On the Fly

[Music] hello and welcome back to the mastering PHP image processing video textbook here you want to learn how to resize user uploaded images on the fly you want to know how to make thumbnail images from large images on the fly you want to make sure your site only houses optimized images for web rendering if you answered yes to any one of those three questions you're watching the right video because I want to show you how to do those things some people say my functions are so funky and my code is so lean I'm like a code as satin alright so we're going to work with the same image upload application in PHP that we created in the last video tutorial if you missed that go back and check it out so we have my file which is a simple HTML file upload form and then we have our PHP parse script for that upload form now what I'm going to show you is after you successfully uploaded the file is how to resize that vile or then further edit the file at any point in your script that you want so in order to do that we have to clearly know the files extension that's being uploaded and here we're getting the file type which shows us if it's an image slash JPEG type or image gif type but really what we're after is to get the actual files extension you know how when somebody uploads an image it's either going to be a dot JPEG or it's going to be a dot gif or maybe a dot PNG we want to be able to take that extension PNG gif or jpg off of the file name so no matter where whether it's a gif PNG or JPEG this will work see these two lines I just put in to our little upload script the first variable is called kaboom and what that's going to do is hold a little array and I call the kaboom because we're using the explode function in PHP which creates an array out of a string so all I'm doing is taking the file name so if somebody uploads a file name boy dot gif that'll be the file name boy gift and it's going to have the explode function run on it and the dot is going to be the separator that explode will explode upon so if you wanted to explode by commas you would just put a comma date but I'm going to explode by the dot because I know there's going to be a dot in that string in between the actual files title and the files extension so kaboom is actually going to be an array that has two elements in it whatever was on the left side of that dot is going to be the first element in the array whatever was on the right side of that dot is going to be the second element in the array so I can grab that second element in the array knowing very well that that's going to be the files extension and I can grab it by claiming the kaboom array right here and claiming the key of one which is definitely going to be the files extension if I wanted to grab the title I would make this a zero but since I want the extension making this a 1 so I will have the file extension at that point just by using the file name and the explode function and then down in your script where you're displaying all this other stuff you can put another line here that says the file extension is and it'll say jpg or gif or PNG because when you echo out the file type it doesn't just say jpg or gif or PNG it says image /jp eg and things like that it's not really what you want to do when you evaluating to look for files extension but you can see our preg match does a good job digging out any matches for PNG JPEG or gif within the file name but the reason why why I had to get the files extension from the file being uploaded is for the resizing function which I'm going to show you right now so basically all I've added to this file upload application is now our PHP script finds out the exact file extension and stores it in this variable alright now before we integrate our script to resize the image on the fly when it's uploaded let's get our bearings for a second here what do we have here all we have is a simple file that uploads an image using the move uploaded file function so maybe you have a community type site where you have users and you allow your users to upload images and you use the move uploaded file function now I'm going to show you how to add something right after your move uploaded file function to allow you to resize that photo that the user just uploaded okay so you can add this to any scripts that you use right now on your site that you allow users to upload files and you use the move uploaded file function you'll be able to integrate this resizing function no problem into your existing scripts that upload files now I'm going to go down to a point in my script where it seems like it would make good sense to resize the image after it's uploaded to the server so I'm going to do it right after this unlink function here I'm going to pop in these lines of code right here you can see I have comments above them and below them comment above is include Adams Universal image resizing function the bottom comment is end adams universal image resizing function that way you guys can see exactly where that is remove it when you need to remove it put it in when you need to put it in whatever now this custom function that I've created here for resizing images it requires five parameters I'm going to explain the five parameters to you right now and then after I explain the parameters that this function needs to be fed I'll show you the script where the function resides and that script is called a K PHP image library 1.0 so it'll just be handy-dandy functions that are all wrapped up nice to help you guys two things as far as image processing goes like this resizing function but you can see it's just adding these view lines to your existing script and you have to make sure you include this file here which I'm going to supply the scripts for all this okay so you're including a file called a K or you can name it whatever you want I'm naming mine ake a PHP image library 10.0 PHP so include that file and in that file there is a some function that I've written out that is just made specifically for resizing either a JPEG a gif or PNG depending on what type of file it is being uploaded so once that's included at any time you can run this aka image resize function and that function is looking for five parameters the first one is target file target file you can see has a value of uploads file name and that's just basically where your move uploaded file just put that new file that has just been uploaded by the user the big original file so you just put that value in the target file variable the resized file variable is the next parameter that the function requires and that's going to be wherever you want the new resized file to live if you want it to not be in the uploads folder and go into a totally different folder maybe for a user somewhere or something you can specify that here and you can specify the name what I'm going to do is I'm going to put it right into the uploads folder where the original file is being uploaded to and I'm just going to put a prefix to it called resized underscore so basically it'll be in the same folder with the original file that gets uploaded but it'll have a name of resized underscore with the original name attached to it and it'll be a much smaller version of the original now the third parameter is the width max the whiff max is what you set for the maximum width that you want the file to be reduced to it'll be no bigger than 200 pixels now the fourth parameter is height maximum this will be the maximum value for the height pixels so the image that's resized there's no way it can be any higher than 150 pixels you can set these numbers to whatever you want and don't worry the function is going to resize it proportionally they'll scale it down without warping it at all and finally the fifth parameter that this function is looking for is the file extension which was what I explained to you when we used explode we grabbed the files extension out of the file name and that we're sending to this function as the fifth parameter you see so now what you've done in your script is you know you've moved the uploaded file like you normally do and then right after you know that that's successfully uploaded you can run this code you can add these lines you got to make sure you set your variables correctly here for the five parameters that get fed to this function the function name is a K imagery size and that function lives in a file that we've included here to the script called a K PHP image library 1.0 PHP now before we take a look at the inner workings of this file let's test this on the server to make sure that this actually will allow upload of a jpg gif or PNG and it will take either the jpg gif or PNG and resize any one of them no matter which type I upload once we see that's all working we know we have a killer function that works real nice and then I'll explain that function to you I'll show it to you and I'm also going to share the code with you which will be in a link in the description of this video on youtube you can click that link and you'll see all this code on the bottom of the page that you'll need now my server this is what I've ended up with before I had the just the image upload application that we originally created now I'm going to add the ake a PHP image library 1.0 that holds my universal image resizing function and I'm going to make sure that I replace my newly adjusted image upload script which now holds these five lines of code that feed that function okay here we are testing it out live online so let's choose file first what I'm going to do is this flower and I purposely have different kinds of pictures here and they all have different shapes for instance this one is much wider than it is high this one is much higher than it is wide and this one is like a normal shot and this one's a gift this one is a JPEG and this one's a PNG so we'll see the whole variation of things that we need to check out when we're testing this script so I'm going to try the PNG flower first upload it the PNG is probably the largest file and you can see the upload progress down at the bottom there it'll probably take the longest to upload but it's going to be resized as well and that only takes a split second so here's the results flower PNG was uploaded as a size is the type now we see the extension tool remember now let's just go back let's upload the girls that JPEG picture upload it that's going to upload in no time flat let's go back and get the last one which is the gift upload it that one's done all right so that's the results from uploading all the original files and remember we added resizing of all the original files as well so now when our uploads folder we should see something interesting so let's look inside of our uploads folder now now you can see we have flour P&G girls JPEG and sky dot gif by the all the originals now here the resized flour PNG resize girls JPEG and resize sky died gift look how much smaller they are a lot smaller because we thumbnail them on the fly while they were being uploaded now in my script I can very easily unlink these originals if I don't want to keep them but in this case I'm just going to keep them so we can see exactly what's going on but you can very easily use the unlink function on any file on your server I'm going to bring these resized images over to my local machine I'm going to take a good look at them so here you can see the folder where I just brought those over from the server let's look at the original flower let's preview that you can see the size of it and that's really it's a little bigger than that but you'll see the thumbnail the resized let's preview that it's a lot smaller you can see that it didn't distort it didn't warp it and it kept the same aspect ratio and the same with the with the girls will preview that one it's a nice big picture let's look at the thumb that we created perfect let's look at the sky this is the original visit the thumbnail like that we created using PHP is a lot smaller so no loss of quality no distortion no degradation easy way to resize to any size you want and it will handle any type of files that you want to specify within the function alright so now that we've proved that we have a good working application let's take a look at the actual function in the file that's called a que PHP image library 1.0 file open just grab that script and open it up now I custom created this script so we didn't have to create three different functions for creating gifts PNG or JPEGs you can use one universal function and simple if-else evaluation statements to create the right kind of file depending whether the extension is a gif PNG or JPEG so that's what I did so this function will work universally forgives PNG s or JPEGs and the way the variables are sent to the function you don't even have to specify what it is it will sense it on its own using this extension variable now you see these five parameters here in the beginning of the function you can see function aka image resize starts right there you can see this one two three four five parameters those are the same five parameters they just have different names in the actual function but they reflect the same five parameters that we sent to the function when we execute it so in your in your script we're uploading files you use move uploaded file when you run this function that's when you're executing the function to actually make it run here in this line you're just including it let's go back into the file so basically this function once it's included into your other script it's just laying waiting to be executed to be called to run and that's what this line right here does and it sends five parameters when it does execute so when this function executes it's picking up five parameters you see that one two three four or five and those are PHP variables that are then given the values of whatever was sent through that function that make good sense so now you within this function all through the code you can work with these five variables that were sent through the function now all we need is to explain the code to you within this function and you'll be well on your way to really mastering resizing files on the fly making thumbnails and things like that I'm going to translate all of this into plain English but if you guys fail to understand math and simple logic and that's not my fault if you can't grasp the concepts going on in the code I'm going to break it down all into plain English all right this first line uses the list function in PHP to list out the original width and the original height of the target image when we run the get image size function on it the get image size function is part of the GD library functions so this line allows you to gather the original width and the original height into variables from the original images size properties the next line create a variable called scale ratio and that's going to be equal to the original width divided by the original height you know so if your pictures original width was 600 and the original height was 400 it would be 600 divided by 400 which gives you a number of 1.5 but it's always going to be dynamic because you don't know what shape of an image the person is going to be uploading that's why we have to use this scale ratio and this if and else condition statement so this if and else condition statement reads if the width divided by height now this is not the original width and the original height of the original picture this is the width and height coming from the values that we sent through the function and in our case we were sending the with max and height Mattox 200 and 150 right here to the function we sent those variables so this in this age represents that 200 and the 150 so you're saying if 200 divided by 150 is greater than a scale ratio then the width is equal to height times the scale ratio else the height is equal to width divided by the scale ratio so basically this if and else condition statement helps you change the width or the height of the the newly-created resized image according to what the aspect ratio of the images if it's a really tall image or if it's a really wide image this if an else condition statement will help you make the correct mathematical equation to size that image to scale it correctly all it is is math and logic there's no crazy language going on here everybody knows greater than less than symbols everybody knows divided by multiplication equal signs just math but you have it you have to have it this way in order to make your application dynamic so it will scale any shape of image that's really the toughest part of the code in this function the rest of its cake after you figure out what the scale ratio is it has to be and you've set the width and height for what it should be to scale it proportionally then you want to check and see whether it's as gif a PNG or JPEG and that's what these few lines do right here we initialize a variable called IMG and that's equal to nothing at first that's going to get changed within this if and else condition statements here so the first condition is if the extension equals gif or extension is equal to gift in the upper case then image is going to be equal to image create from gif and the target file else if the extension equals PNG or capital PNG then we're going to use image create from PNG function using the target file else we know it's a JPEG if it's not either one of those two so we can use the image create from JPEG function on the target file now you have to do this because there's no there's no function in the GD library called image create from image there there either image created from JPEG GIF image created from gift or image create from PNG so that's why we had to get the files extension we got the files extension this way we can easily evaluate to see whether it's a gif a PNG or JPEG and depending on which one of those that we assess that it is we can feed the correct function into this IMG variable so this is a g-d library function image create from gif this image create from jpeg we just use this the other day in the first one of the first lessons in the in this video textbook and i explained how that function works these work the same way image create from gif and image create from PNG work the same way as image create from jpeg they just work for their respective file types and then we can use that image variable down here where we need to inside of the image copy resampled function which is a g-d library function all of these functions you see in here these blue things our GD library functions except this top one which is a custom function that i created to resize the image but within the custom function that i created is all of these little blue things you see here our GD library functions for image processing let me just quickly explain the last three lines here and you'll know how thee the resized copy is getting placed on the server we create a variable called TCI net variable has a value of image create true color with the width and height variables and what image create true color does is it basically it just makes a black rectangle of the width and height that you specify no need to overcomplicate that function because that's all it does now image can't be resampled is a pretty tricky GD library function because it takes so many parameters so I'm going to put in a little comment here for you and I don't know if I'll keep this in the source code I might just keep it in the video but this is how the PHP manual describes this function so you have 1 2 3 4 5 five six seven eight nine ten parameters this function has to get fed image copy resampled the first parameter being the destination image and you can just think of that as the new image being created the resize to copy the source image that is the target image the the original big copy that you want to resize destination X the new X the new pictures X new pictures Y the source X and the source Y the destination pictures width and the destination pictures height the source pictures with and the source pictures height so those are the values that I fed the function here and I gave it just the values that it needed to where it wouldn't crop the picture at all it would just give a smaller representation of the original picture you know that TCI is just that new black rectangle that was created using image create true color with a certain width and height that's going to be the size of our little thumbnail image is the new gif PNG or jpg that was created within this evaluation so now you know what all those variables are going in there you should have no question about what each of these variables are you can clearly see that these are all just zeros you know what the width is and the height the original width and the original height you know what those are so now image copy resample shouldn't be so difficult for you to comprehend there now the last one we have is image JPEG which I explained this one in a previous video with in this video textbook just a couple of videos back I explained this one what this one will do is save it to the file system basically put it on the server for you and that one gets three parameters TCI which is our new resampled image because within this function here we took the black rectangle that was created here and we resampled it to be the resized copy of the original picture so that's what we put into this first parameter of the image JPEG function the second parameter is where you want it to be on the server so it's path and filename and new copy is established here when we fed the function its variables from the get-go which came from the image upload script remember resize the file that's the value see that value right there that's the value that's in new copy so that's going right there we're saving it with the quality of 80 for general purposes 80 is good enough for everything you don't want to make the file 100% 80 is a good optimizing number if you go up to 100 you're going to have an unnecessarily large file that you really can't tell a difference from using 80 or 100 but you put this on 50 you'll probably see a difference but between 80 and 100 you really won't see much difference and like I said earlier I'm going to have all of these scripts available under the video where it's playing at develop PHP calm if you're watching this on youtube you can click the link in the description area of this video at YouTube click that link and you'll go to the page of develop PHP that has the copy and paste code directly on it under the video so you can use this function for all your image resizing needs now when it comes to gif PNG or JPEG and if you want you can add more you can add BMP W BMP type whatever but I just made a universal for gif JPEG and PNG because those are the most popular ones and remember it's very easy to apply this to your current upload scripts that you have going on your site already with these view lines of code you just have to make sure that you feed it to correct 5 variables that it's looking for which I explained all of them in depth I mentioned in a little caption that I was going to discuss this image JPEG function in greater detail about some odd behavior that I found about it and you guys actually watched me execute this script live on my server it actually saved a PNG a JPEG and a gift to my server and they all retain their types well even though I used image JPEG to put them so some people that might work with GD library a lot might say hey Adam you know really if the image is a gift for a PNG you shouldn't use image JPEG to save that file to the server you should use image gif or image image PNG to do that and you guys just saw me I used image JPEG for all three no problem did the job just fine but just know that in the GD library there's two more functions similar to this one one is called image gif and the other is called image PNG and they do the same exact thing that image JPEG does except one does for a gif file the other does for PNG files and so the odd behavior that I found is image JPEG will output all three no problem and they retain their their file types no sweat so I just wanted to mention that to you guys so if you want to have another if and else condition statement here maybe down at this part of the script here and use either image gif or image JPEG or image PNG according to what file type extension that it is then you can choose to do that but I don't think it's necessary because I found this little weird behavior alright we'll see you in the next lesson geeky big dork much signing out

Channel: Adam Khoury

Views: 49,682

Keywords: PHP, Tutorial, Code, Script, GD, library, Video, Textbook, Learn, Image, Processing, upload, form, resize, watermark, crop, gallery, imagemagick, gmagick, cairo, developphp, webintersect, member, user, educational, adam, khoury

Id: nlCfOcETQUo

Length: 27min 57sec (1677 seconds)

Published: Wed Mar 16 2011