In this post, we are going to know image processing like resizing, thumbnails and creating a new image with required file format and size with an uploaded image using PHP. Here we going to use simple PHP code for image upload and resize that image with the help of user-submitted image file data. Nowadays web-based applications are focused to share data, image files and documents to improve their personal profiles or promoting etc. As we all well know the importance of displaying the images on our website and applications. For these reasons, we are providing image upload option in the web application but we cant able to restrict the users to upload with file size or specific dimensions. Huge file size will affect application loading time and it gets very slow to display the content to end users. As specially when if you want the small size of an image and you are showing large image then it takes a longer time to load. So uploaded photos must be resized or need to generate a thumbnail image when user upload images. For this, here I’m going to share how to create a thumbnail or resized image from an original file with the help of PHP script. In this post, we can generate a thumbnail image from a type of JPG, JPEG, PNG, GIF too.
Step 1: Create HTML Form
Here we need to define form with file input tag and enctype=”multipart/form-data” form Enctype method. It will help us to choose and submit the image file to a PHP script.
|
1 2 3 4 5 6 7 8 |
<form action="" method="post" enctype="multipart/form-data"> <div class="form-group"> <lable class="">Choose Image</lable> <input type="file" name="upload_image" required /> </div> <input type="submit" name="form_submit" class="btn btn-primary" value="Submit" /> </form> |
Step 2: Resize PHP Script
Here we are going to define an image upload handling process scripts with thumbnail image creation form an original file. In this step, we can define what kind of thumbnail dimension size image to create and file size too we can change. Some of the predefined methods are used us to create thumbnail images form original file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<?php function resizeImage($resourceType,$image_width,$image_height) { $resizeWidth = 100; $resizeHeight = 100; $imageLayer = imagecreatetruecolor($resizeWidth,$resizeHeight); imagecopyresampled($imageLayer,$resourceType,0,0,0,0,$resizeWidth,$resizeHeight, $image_width,$image_height); return $imageLayer; } if(isset($_POST["form_submit"])) { $imageProcess = 0; if(is_array($_FILES)) { $fileName = $_FILES['upload_image']['tmp_name']; $sourceProperties = getimagesize($fileName); $resizeFileName = time(); $uploadPath = "./uploads/"; $fileExt = pathinfo($_FILES['upload_image']['name'], PATHINFO_EXTENSION); $uploadImageType = $sourceProperties[2]; $sourceImageWidth = $sourceProperties[0]; $sourceImageHeight = $sourceProperties[1]; switch ($uploadImageType) { case IMAGETYPE_JPEG: $resourceType = imagecreatefromjpeg($fileName); $imageLayer = resizeImage($resourceType,$sourceImageWidth,$sourceImageHeight); imagejpeg($imageLayer,$uploadPath."thump_".$resizeFileName.'.'. $fileExt); break; case IMAGETYPE_GIF: $resourceType = imagecreatefromgif($fileName); $imageLayer = resizeImage($resourceType,$sourceImageWidth,$sourceImageHeight); imagegif($imageLayer,$uploadPath."thump_".$resizeFileName.'.'. $fileExt); break; case IMAGETYPE_PNG: $resourceType = imagecreatefrompng($fileName); $imageLayer = resizeImage($resourceType,$sourceImageWidth,$sourceImageHeight); imagepng($imageLayer,$uploadPath."thump_".$resizeFileName.'.'. $fileExt); break; default: $imageProcess = 0; break; } move_uploaded_file($file, $uploadPath. $resizeFileName. ".". $fileExt); $imageProcess = 1; } if($imageProcess == 1){ ?> <div class="alert icon-alert with-arrow alert-success form-alter" role="alert"> <i class="fa fa-fw fa-check-circle"></i> <strong> Success ! </strong> <span class="success-message"> Image Resize Successfully </span> </div> <?php }else{ ?> <div class="alert icon-alert with-arrow alert-danger form-alter" role="alert"> <i class="fa fa-fw fa-times-circle"></i> <strong> Note !</strong> <span class="warning-message">Invalid Image </span> </div> <?php } $imageProcess = 0; } ?> |
and the final state is preview and download the resized image if needed just use the following code on process get success stage,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="row"> <div class="col-md-4"> <img class="img-rounded img-responsive" src="<?php echo $uploadPath."thump_".$resizeFileName.'.'. $fileExt; ?>" width="<?php echo $new_width; ?>" height="<?php echo $new_height; ?>" > <h4><b>Thump Image</b></h4> <a href="<?php echo $uploadPath."thump_".$resizeFileName.'.'. $fileExt; ?>" download class="btn btn-danger"><i class="fa fa-download"></i> Download </a href=""> </div> <div class="col-md-8"> <img class="img-rounded img-responsive" src="<?php echo $uploadPath.$resizeFileName.'.'. $fileExt; ?>" > <h4><b>Original Image</b></h4> </div> </div> |
