PHP - Web Design - How to resize images during uploading - Full tutorial

hello and welcome to this exciting tutorial on resizing images while uploading with PHP alright so as you're making PHP websites you need to resize your images so that the website is much lighter alright luckily PHP helps us to do that in simple line of code so to do that let's begin by firing up our notepad and make sure that Apache is running on your system and let's type our PHP tags to start with like that and let's create a form because we need a form in order to upload anything so make sure you type the method as post and type ENC type is equal to mod team multi-part sorry sorry multi-part slash form data this line is very important because without it you cannot upload any files so let me save this as resides dot PHP so we don't lose any data so let me add an input field here or type file it has to be of type file I will name it anything in this case our name it's image because we will be uploading an image and then let me add an input type of submit which is a button and I will give it a value of post this is what will appear on the button in itself so this is pretty standard HTML stuff like that if you want to know more about uploading files I have a tutorial on that so you might want to check that out so let's watch launch this in Firefox and make sure at the top there we have localhost to make sure that our PHP is actually activated so here I can click browse and get a file and hit post now the thing to do here is I want to know when the post button is hit so that I don't start processing anything before then so in order to do that I use the global variable called server and I check for the request method to make sure that this method is equal to post if that is true then someone has hit the post button we can begin our processing so let's do that and then the next thing I want to check is that the file actually has been uploaded or the file exists in this upload so in order to do this we have to check for a variable global variable called files because PHP creates this during uploading of files ok so as soon as you type this part the global variable files is created so let me go to you files first of all I want to check if it sets ok so if is set files like that in this case I'll check for image because this is the name I give it here if this is set then we are good to go alright so let me copy that but let me add an understatement there if that is set and the file being uploaded is of type image slash jpg like that ok if that is true then we are good to go alright so in this case also let me just show you what's contained in this variable so I'll use a print art just so you can see it and be able to follow along so let me browse for an image and hit post and so you see immediately we have an array code image which contains another array inside it is the name of the file that we are plotting the type is image slash JPEG okay and then it sends to the temp name for storage temporal storage obviously and this is the size of the file so you can use these to reject file sizes that are bigger than what you want for example but in this case we're just checking to see if it's the image JPEG type so now in order to move this file and upload each to a specific folder we use a function called move uploaded file which takes in two parameters the source and the destination so this is merely a copy so we are copying the file from the source to the destination so the source in this case is temp name because that's where it's sent immediately as you can see from here temp name right there so the source is files image temp name right and then coma now we have to add a destination to that let me just duplicate this because it's almost similar and the only difference is that the destination is named now the reason I used name for destination is because I want the file to be named exactly what it was named on my computer which is here baking trays / JPEG and I can find this name in this memory location called name so that's why I have added it if there so the file has been uploaded at this point so let's display its let me do an echo image source is equal to now that's how you display images and in order to do this let me create a variable quality file where I can assign the location of this file to like that so that when displaying it I just type file like that so this should work pretty well so let me just browse and hit posts and as you can see the image has been posted but it's extra large that's why we have to resize it now okay so to resize before we display it let's resize it here so I will create a function called resize image you can name it anything pretty much you want I want to give it a few parameters here to work with I will give it to the file location obviously and then it's resolution so in this case I want it to be 500 pixels so I'll just type a literal 500 there now if we just run this we'll get an error because this function does not exist so let's create it up here by typing a function resize image like that and let's get give it a file there and then the new resolution or instead of new resolution let's say max resolution that will make more sense max resolution okay so there we are so now we have the filename and we have a maximum resolution that we want on this image which is 500 pixels in this case so in order to begin the first of all let's check if the file actually exists because we don't want to start resizing a non-existing file so how does the function code if file exists when you type file in there like if it exists then we have to go next step so the next step is to create a fire risk and an image resource brother now this image resource will be the original original image like that that's what I'll call it original image is equal to now to create an image resource we say image create okay image create from JPEG because I know this is a JPEG because these are the only files allowed here so you could you could use image create from PNG or reg create from jiff either way it's going to work but make sure that it's the correct file so like that I'll give it to the file name now I need to know its resolution okay now resolution in this case I'll name it original res like that is equal to now there's a function called image SX okay which gets the X or the width of an image and image resource so our passing the original image in there so this function assigns the width of this original image this original image the width is assigned to that so instead let me just say original width in this case so that I can say original height as well and just change that to a Y so image s Y original image so what have we done so far we've created an image resource so that we can manipulate pixels and then now we know the resolution of this image so that we know exactly what to edit okay now the next part is a little bit mathematical so bear with me we're going to try and check the width first okay so what we want to do here is to know the ratio of reduction how much we are going to reduce one side of the image so that we multiply the other side by the same ratio this is done in order to prevent skewing of the image after the resize we don't want to stretch the image in any way we want it to be exactly the same ratio so in order to do this I'll create a variable called race ratio like that ratio is equal to max' resolution okay the maximum resolution divided by we're going to divide this by the owed original width okay the original width like that and then we have to create one called new width okay this new width is equal to max' resolution okay then the new heights new heights like that will be equal to the original height multiplied by the ratio alright so let me just explain how this is actually working with an example okay so let's let's imagine the image that we have is 1,000 pixels by 500 pixels okay now we want to reduce this image to have a maximum resolution of 500 so one of these resolutions is 1000 which is not good so we have to reduce it to 500 so the first thing is we have to try which one of these we have to start with the highest so let's try the width fist and see what happens so here as you can see the ratio is max resolution divided by original width which is max resolution is 500 in this case that's what we want the match to be divided by the original width which is 1000 now the answer to this is 0.5 obviously so this is our ratio that's why we assign it to that okay now the next step is new width is equal to max resolution so the new width is much resolution which is 500 okay bye and then the new height is equal to original height which is 500 okay in this case is 500 multiplied by the ratio which is 0.5 and this gives you a resolution of 500 by 250 okay so as you can see now we've successfully reduced our image from 1000 by 500 - 500 by 250 and as you can notice the ratio is maintained so this image is not going to be stretched in any way if does this doesn't make any sense it's okay just copy this code and it's going to run anyway now we need to check if that doesn't work because sometimes it doesn't work depending on which resolution is higher so if it doesn't work we're going to do another one where we check if the new height in case the new height is greater than the new resolution which means this method didn't work at all okay because we don't want anything to be higher sorry this should be max resolution to be higher than the max resolution which I have to replace even there and there and original original height like that and original width sorry about those confusions but there we go so now if the new height is greater than the maximum resolution so we try the height instead so we do the ratio is equal to max resolution and divided by original height and then the new height is equal to the max resolution and then the new width now is equal to original width multiplied by ratio so this is just in case this doesn't work so we don't have to check if this didn't work either because we can only have two of these possibilities so at this point we should have some solid values that we can use so let me save this now before we can use those values let's make sure that the old original image is actually an existing resource so we do that by just saying if original image that's enough okay now what we're actually doing is copying the original image to another image but the new image should be smaller by these same ratios we have done here so let's create this new image so we're going to say new image in this case is equal to we create an image resource again because we want to manipulate it so we're going to say image creates now this is not from a file so we're going to say image create true color like that and this one takes in two parameters which is the resolution so now here we're going to say new new width comma can you height sorry but your height like that okay so we have a new image resource now finally we can actually resize the image now to resize this image we use a function called image copy resample like that now this step this one takes a bunch of parameters so let's get started so the first parameter is the resource destination where we want to copy this image to and so this one is a new image obviously that's where we are copying to now resource the source image the original image in this case original image comma and then the this is an integer int destination X so this is where we want to begin the testing on the new image now I want the whole image to be covered so I'll just start the testing at the zero mark of the X because images are good x and y pixels so I want this to begin at the zero comma zero which is the very top corner okay now the source the the source X and the source why also I wanted to copy everything so I'll just say zero comma zero here as well now the destination width so the destination width is the new with obvious link destination height is also the new height and then we have the source width which is original original width and source height which is original height like that okay so this is a pretty big thing and you make sure I capture everything so image crop a copy resampled and then we supply the new image where we are sending to the original image and these zero zeros represent copy everything and then the new width then you hide the original width and the original height all right so now we have to make so this new image now is the resize version of the image so now we have to make it into an actual JPEG so we use a function called image JPEG like that now this one takes the resource image which is new image in this case comma the file name now I want to replace the actual file you can type in another file name if you want two versions the resized and the original and then the quality now the quality is optional okay it's optional so if you don't put anything there it's going to be 100 but I like to use 90 it's pretty good there and that's it so let's recap a little bit on this function how this function works the first thing is we check if the file exists this file here which it does if it does we go on if it doesn't nothing will happen okay now the original image we create an image resource called original image so that we can manipulate its pixels by using this function then we check out its resolution now here we try to reduce the height first or we tried by getting the ratio from the width okay so a ratio we got it from the width reduction assign the new width to the maximum allowed resolution and then now the new height is reduced by this ratio if that doesn't work we try again with the height or the other way around if everything works here then we go to make sure that the original image resource actually exists then we create a new image from true color which has a resolution of the new reduct reduced resolution that we want and then we copy the original image resource on to the new image resource and then we save it as a JPEG alright so I hope that is clear there so let's let's just test this out and see how it works let me browse here and hit that and hit post and as you can see the image has reduced in resolution if I click here and say view image info you see that the maximum resolution is 500 so in order to reduce this image to another resolution I can type in a different number here which is for example 300 in this case and then upload again like that and you have a reduced image like that so this is how you reduce images with PHP during the uploading process so if you like the video like hit that subscribe button so that you don't miss future videos and leave a comment if you have any questions and I will get to them and I will see you in another video

Channel: Quick Programming

Views: 16,224

Keywords: Web Design Programming Tutorials, web development, quick programming, PHP, MYSQL, HTML, CSS, tutorials, Learn, resize, image, uploading

Id: u6adna5zSwA

Length: 17min 25sec (1045 seconds)

Published: Sat Aug 26 2017