PHP - Web Design - How to resize images during uploading - Full tutorial
Вставка
- Опубліковано 18 вер 2024
- how to resize images during the uploading process to save disk space and make sure your website loads quickly
Support me on patreon: / quickcode
Most the time the images will be huge in scale when a user uploads something. Now they don't stand a chance! Thanks for explaining it!
good! glad to have helped!
Thanks, great tutorial which helped me through a repeat sticking patch. To those saying it doesn't work - check your directory permissions, particularly if you get errors such as:
Warning: move_uploaded_file(XXXXXXXXXXX): failed to open stream: Permission denied ...
It worked perfectly.
awesome! i'm glad to hear that
Absolute, this helped me.
Awesome☺️
@@QuickProgramming Thanks. Can we change the background color of the image while uploading it. Like to white or a dark color just like what photo editor app will do??
@@QuickProgramming something like, removing the initial background of the image, taking out only the object from the image and adding a white background color to it. Like what remove.bg will do 😀😀
Nice one!
Thanks man! 👍
You're most welcome
Thanks
Great tutorial! Will this also reduce the file size?
yes, it reduces the file size too
Wow this worked great, thank you so much for making something quit difficult understandable!!!
thanks for the awesome feedback, and you're most welcome :))
Thanks for the effort. It's a great toturial . Plese add the " loop function idea" to how to resize multiple images or at least refer us to a nice video like yours. I saw other people asking the same. Plz reply and Thanks again.
Thanks for the comment, i'll be uploading that video very soon
hey i managed to make the video you requested on uploading multiple images. here's the link ua-cam.com/video/-AsRT9iwMJ8/v-deo.html
it work fine but when i upload image from phone the image rotate when resize how to solve it
its easy to solve. every image has meta data which includes its orientation. this data is lost once you resize the image. so just rotate the image then, resize it. i have a tutorial on how to resize here ua-cam.com/video/OwDA6i3tFAo/v-deo.html
Has anyone had the issue that this does not work on long photos? The only problem I've run across is some random re-angling which OP has given answer how to fix below, but I have one long photo that is 257kb that it just does nothing to and loads into the folder. Every other photo works perfectly and re-crops very well. Any one else run into this?
by 'long photo', do you mean a photo with bigger height than width?
@@QuickProgramming Hi! Yes its dimensions are 1200 × 1800.
Hi.
Why i cant insert the image in a database after have been resized ??
great video thanks
You are welcome!
awesome tutorial, but can u make a tutorial on how to do this resizing for all image types?
yes i did. you can watch this one which shows how to upload multiple images at once. there are only 2 parts to change in the code to shift from jpeg to png. change imagecreatefromjpeg to imagecreatefrompng and also change imagejpeg to imagepng. you can also make it automatic. the tutorial is here in 3 parts:
part 1:
ua-cam.com/video/-AsRT9iwMJ8/v-deo.html
part 2:
ua-cam.com/video/fyTejYCNprM/v-deo.html
part 3:
ua-cam.com/video/V6bnPxaTcF0/v-deo.html
Well, my head exploded.. but it works fine and I kinda understand it. Will watch after a good sleep. Thanks for the guide, hope you dont mind on me to be your 100 subscriber!
thanks for the sub :)
No problem! I have a question tho. How could I config it to resize to the max_resolution using the smallest side? That way the resulting image has that new size as the smallest side.
ok, if i get you correctly, what you need to do is first find out the resolution of the image, then check which is smaller, then set that small value as max_resolution. to find out the a jpg resolution, you can use a function called exif like this:
$data = exif_read_data($image_path);
the variable $data will then contain very useful info, feel free to check using the print_r function. The res of the image will be in:
$height = $data['COMPUTED']['Height'];
$width = $data['COMPUTED']['Width'];
take note of the capitalization. then use an if statement to check which is bigger e.g
if($height < $width){
$max_resolution = $height;
}else{
$max_resolution = $width;
}
if this isn't what you were asking for, feel free to elaborate some more
Totally forgot about this, srry! That should do, intresting variables :D Thanks!
Wonderful video. Thank you so much. This works perfectly for me. Do you have a video on resizing multiple images during upload?
thank you :) i dont have that video yet but ill make one soon since you've asked. its not that different from uploading one image. only that you create a loop to go through multiple files and run the same functions on them one by one.
Thank you and I'll be looking forward to that. Two questions, 1) how can I resize the image in png, gif, jpg or all 3 together as once? Currently it only resizes in jpeg and will not accept png or gif file.
Q#2
I created these variables for the image name and temp location.
$user_image = $_FILES['image']['name'];
$user_image_temp = $_FILES['image']['tmp_name'];
Now, when I call these variables in the move_uploaded_file, the file is uploaded, but it won't resize. What I am doing wrong? I highly appreciate your help.
move_uploaded_file($user_image_temp, $user_image);
to resize other file types, you can simply replace the function imagecreatefromjpeg with imagecreatefrompng and imagecreatefromgif. the rest remains the same. you can first check for the file extension to know what type of file it is using this: $extension = \strtolower(\pathinfo($file, \PATHINFO_EXTENSION)); or you can check the $_FILES['image'['type'] since extensions can be fake sometimes. whether you choose to save them back to their original format is up to you, because its possible to save to any format no matter what format the original is, using imagejpeg() or imagepng() or imagegif().
about your error, the function move_uploaded_file() only uploads the file from the local computer to the server. so it does no resizing in the process. you then have to run the resize function on the uploaded file after running move_uploaded_file(). i hope that helps
Yes, this helps. My image uploads, but won't crop and also png and gif won't work. I have pasted my code below can you please help why it won't work?. Thank you so much for you time!
ok, it seems you're not assigning the file name properly. try this. change this line:
$user_image = $_FILES['image']['name'];
to..
$user_image = "../images/" . $_FILES['image']['name'];
then change this line:
// Move image to a temporary local location
move_uploaded_file($user_image_temp, "../images/");
to...
move_uploaded_file($user_image_temp, $user_image);
then delete this line entirely:
// Assign image location to a variable
// $user_image = "images/". $_FILES['image']['name'];
in your current setup, move_uploaded_file() is sending your image to an empty location. you're supposed to specify the full path including the filename during the move operation, then use the same file path for the resize.
let me know what happens when you try it.
Works, however on upload echo photo and it is moved 90 degrees positive(right) and then the reduce works and I send it to a file and print to screen from an HTML code link to the root directory of the project folder.HELP
i did not add that part to make the tutorial easy, but i can give you the code here
after you create an image resource with this code:
$image_resource = imagecreatefromjpeg($image_path);
add some code to check if image is rotated using this code:
this code comes just before "imagejpeg" or "imagepng". just before you save the image to file.
the short version is like this:
Muy bueno el código, primero me dió error y era que no tenía habilitada la librería GD, pero después genial, ahora tengo que adaptarlo para guardar en la base de datos.
Hi, Could you please help me how to integrate this code with crocoblock's jetformbuilder plugin on wordpress? Metafiled Id for image upload field being "profilepicture". Would be a great help.
This was so helpful! Thank you :)
Thanks for the feedback, am glad it was helpful😊
amazing biggest problem solved in short coding
Thanku sir , if uh have any tutorial classes in Udemy please share link , because i love ur teaching style .. love from india
thank you Gurjeet. i appreciate the complement. am working on my fort Udemy course. i will you comment back here when its out, thanks. if you have specific subjects you want to learn, let me know so i can include a course on that too :)
@@QuickProgramming give us Angular and Ionic 5
It is for jpeg image? How about other file type? Like png,gif etc
thanks so much
Thanks a lot!
you're most welcome!
GOD like!
thanks :)
Cool thanks sir
You're most welcome
Thanks for sharing. Very useful. Done sub
Thanks and welcome
Hi. Can not upload the file on the server after resizing.
awesome
I Just signed up on your Patreon account to get the code but there is nothing there.
Can we do same with video files?
yes you can upload them in the same way, but obviously you have to skip the resizing part because it wont work on videos. also change the accepted file type from "image/jpeg" to "video/mp4". everything else should work just fine
How to save it database?
would love to watch this but the music keeps me from concentrating :(
thats too bad indeed
It didn't work for me is there a way you can share the source code
@@collins6869 unfortunately I never saved the code for this. What errors do you get?
If image size is more than 2 mb then resize is not working, how can I solve this ?
its probably the memory limit allocated to PHP that is low. you can change this value by opening the php.ini file, found in your xampp, wampp or mampp folder. just search for it there and edit this line: memory_limit=2MB. yours may be different value but just increase it to something like 16MB or 32MB.
if you cant find the file, try adding this line at the top of your PHP code:
ini_set('memory_limit','32M');
hope it helps :)
Thanks :)
I am successful reducing and rotating the image. Now, I tried to put the image in mySql database. None of the variables I create transfer into my database. I retrieve it and it is blank. I even create a variable that outputs to screen on a link, eg. $im = (
never put images inside a database. save the image to a folder and put only the path to the image inside the database.
iam making a tutorial on how to create a social website from start to finish. i will show how to do this in detail. upload images, crop resize and save. here is the playlist ua-cam.com/play/PLY3j36HMSHNWaKUC73RJlwi6oU-WTpTPM.html
How about resizing before turning into blob and insert to database ?
never a good idea to save images directly into the database. there's no goof reason to do that. the file system works better by far
@@QuickProgramming yes I know, but the simulation im creating need the images in the database, by path is not working
@@DrenzAwe why is it not working using a path? even if you save in the database, its the same as saving to a path. but iof you really need to save to the DB, use base64. it will be easier to display the images. make the column TEXT or VARCHAR. use this function to convert the image:
base64_encode();
it will convert the image to string. then use
base64_decode() to display;
@@QuickProgramming im using unity c# language
@@QuickProgramming sadly you cannot just use path to make sprite image base64 is needed
plz tell me how to use crop box like facebook and whaysapp provide us
to do that kind of thing, you require javascript in conjunction with PHP. PHP only works on your server so by the time a users sees a page loading, PHP is already done and cant affect the page. so Javascript would work to create the required crop box, calculate what part needs to be cropped and then send that information to the server using AJAX, so that PHP can then crop the image. ill make a tutorial about that
Can anyone provide the source code
This reduce quality by large margin
Increase the resolution or increase the saving quality to 100. e.g
imagejpeg($resource,$filename,100);
Can u send me the source code plz?
Copy it
post the code
This isn't really resizing per se, it's cropping image, which in fairness I wanted
kind of true actually.... resizing and cropping both use the same function, which is imagecopy. the only difference is the parameters you use. forexample if you copy the image to a smaller image, thats cropping because some of the image pixels will be lost. but if you make sure to paste all pixels, then its resizing. am glad you found it useful :)
i have another video dedicated to cropping just in case you havent seen it ua-cam.com/users/edit?o=U&video_id=goRD8GwzwAE
That link isn't working, you should link a playlist, but I would prefer the actual video
sorry i got the link from my dashboard, here's the public link ua-cam.com/video/goRD8GwzwAE/v-deo.html
Didn't work
Which part didn't work?