So here we are going to implement how to resize the image while uploading to the web page .
Lets learn
1.Create file to implement code in it.
2.Create form with file input tag and enctype=”multipart/form-data” form Enctype method.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="image"><br>
<input type="submit" class="btn btn-primary" value="Upload">
</form>
3.To resize image implement code for it in php.
<?php
require_once("resize-image.php");
$form_field = "image";
$upload_path = "upload/";
//assume uploading a jpeg image file.
//This can be determined by file type while uploading and here we do not care about the image since it's not a big deal here.
$image_name = uniqid().".jpg";
$width = 1366;
$height = 768;
//Create an object of 'Image' class and call to 'upload_image' function which we are going to use here for our process.
$imgObj = new Image();
$upload = $imgObj->upload_image($form_field, $upload_path, $image_name, $width, $height);
if($upload)
{
echo "<div class='container'><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></div><br>";
?>
<div class='container'>
<div class="portrait">
<img src="upload/<?php echo $image_name; ?>"
</div>
</div>
<?php
}
else
{
echo "<div class='container'><div class=\"alert icon-alert with-arrow alert-danger form-alter\" role=\"alert\">
<i class=\"fa fa-fw fa-check-circle\"></i>
<strong> failed ! </strong> <span class=\"success-message\"> Image uploading was failed. </span>
</div></div>";
}
?>
4. define an image upload handling process with image creation form an original file.so implement class and methods
<?php
class resize_image
{
function upload_image($form_field, $upload_path, $image_name, $width, $height)
{
//image upload
if(isset($_FILES[$form_field]))
{
//get uploading file's extention
$extention=strtolower($_FILES[$form_field]["type"]);
$exp_del = "."; //end delimiter
$file_name = $_FILES[$form_field]["name"];
$file_name = explode($exp_del, $file_name);
$extention = strtolower(end($file_name));
//validate uploading file
$validate=$this->validate_file($form_field, $extention);
if($validate)
{
//build path if does not exists
if(!is_dir($upload_path)){ mkdir($upload_path, 0755); }
//here you can use two types of methods to resize image
//first one is resize image to the aspect ratio
//second one is crop image to the provided width and height
//you can use one of the following two methods to perform above operations
//resize image and save
$this->GenerateThumbnail($_FILES[$form_field]["tmp_name"], $upload_path.$image_name, $width, $height, $extention);
return true;
}
else
{
return false;
}
}
else
{
return false;
}
}
/**
* @param string path_to_image - Path for the source image
* @param string path_to_thumb - Path for the saving image
* @param string thumb_width - New width for the saving image
* @param string thumb_height - New height for the saving image
* @param string extension - image file's extension
*/
function GenerateThumbnail($path_to_image, $path_to_thumb, $thumb_width, $thumb_height, $extention)
{
$thumb_width=intval($thumb_width);
$thumb_height=intval($thumb_height);
$x1_source=0;
$y1_source=0;
//get uploading image's width and height
list($width, $height, $img) = $this->get_image_width_height($extention, $path_to_image);
//resize image for the aspect ratio
if($width > $height)
{
if($thumb_height>$thumb_width)
{
$new_height=$height;
$new_width=floor($new_height*($thumb_width/$thumb_height));
$x1_source=floor(($width-$new_width)/2);
}
else
{
$new_width=$width;
$new_height=floor($new_width*($thumb_height/$thumb_width));
$y1_source=floor(($height-$new_height)/2);
}
}
else
{
if($thumb_height>$thumb_width)
{
$new_width=$width;
$new_height=floor($new_width*($thumb_height/$thumb_width));
$y1_source=floor(($height-$new_height)/2);
}
else
{
$new_height=$height;
$new_width=floor($new_height*($thumb_width/$thumb_height));
$x1_source=floor(($width-$new_width)/2);
}
}
if($thumb_width > $width)
{
$thumb_width=$width;
$new_width=$width;
$x1_source=0;
}
else
{
$x1_source=floor(($width-$new_width)/2);
}
if($thumb_height > $height)
{
$thumb_height=$height;
$new_height=$height;
$y1_source=0;
}
else
{
$y1_source=floor(($height-$new_height)/2);
}
$tmp_img=$this->create_temp_image($thumb_width, $thumb_height);
// copy and resize old image into new image
imagecopyresampled($tmp_img, $img, 0, 0, $x1_source, $y1_source, $thumb_width, $thumb_height, $new_width, $new_height);
$this->save_image($extention, $path_to_thumb, $tmp_img);
}
/**
* @param string extension - Uploading image's extension
* @param string path_to_image - Path for of the source image
*/
function get_image_width_height($extension, $path_to_image)
{
$extension=strtolower($extension);
// load image and get image size
if($extension == "jpg" || $extension == "jpeg")
{
$img = imagecreatefromjpeg($path_to_image);
}
else if( $extension == "gif")
{
$img = imagecreatefromgif($path_to_image);
}
else if( $extension == "png")
{
$img = imagecreatefrompng($path_to_image);
}
$width = imagesx($img);
$height= imagesy($img);
return array($width, $height, $img);
}
/**
* @param string width - Width for the temporary image
* @param string height - Height for the temporary image
*/
function create_temp_image($width, $height)
{
// create a new temporary image
$tmp_img = imagecreatetruecolor($width, $height);
//making a transparent background for image
imagealphablending($tmp_img, false);
$color_transparent = imagecolorallocatealpha($tmp_img, 0, 0, 0, 127);
imagefill($tmp_img, 0, 0, $color_transparent);
imagesavealpha($tmp_img, true);
return $tmp_img;
}
/**
* @param string extension - image file's extension
* @param string path - Path for the image which should be uploaded
* @param string tmp_img - Temporary image which was created using GD libarary
*/
function save_image($extension, $path, $tmp_img)
{
$extension=strtolower($extension) ;
// save thumbnail into a file
if( $extension == "jpg" || $extension == "jpeg" )
{
imagejpeg( $tmp_img, $path, 100 );
}
else if( $extension == "gif")
{
imagegif( $tmp_img, $path, 100 );
}
else if( $extension == "png")
{
imagepng( $tmp_img, $path, 9 );
}
}
/**
* @param string $field - The HTML form field name to check.
* @param string extension - image file's extension
*/
function validate_file($field, $extension)
{
//assume uploading file is not a valid image
$match_found=false;
//set valid file types and extensions for image upload
$file_types=array();
$file_types[]=array("type" => "image/jpeg", "ext" => "jpg");
$file_types[]=array("type" => "image/png", "ext" => "png");
$file_types[]=array("type" => "image/jpg", "ext" => "jpg");
$file_types[]=array("type" => "image/gif", "ext" => "gif");
foreach($file_types as $file_type)
{
$this_file_type=strtolower($_FILES[$field]["type"]);
if($this_file_type == strtolower($file_type["type"]) && $extension == strtolower($file_type["ext"]))
{
$match_found=true;
break;
}
}
return $match_found;
}
/**
* @param string path_to_image - Path for the source image
*/
function is_valid_image($path_to_image)
{
//assume uploading file is not a valid image
$valid = false;
//check if file exists
if(@file_exists($path_to_image))
{
try{
//validate uploading file
$image_size = getimagesize($path_to_image);
if(isset($image_size[2]) && in_array($image_size[2], array(IMAGETYPE_GIF , IMAGETYPE_JPEG ,IMAGETYPE_PNG , IMAGETYPE_BMP)))
{
$valid = true;
}
}
catch(Exception $e)
{
}
}
return $valid;
}
}
?>
Complete Code resize the image while uploading:
<!DOCTYPE html>
<html lang="en">
<head>
<title>resize images while uploading </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style>
img {
/*max-width: 100%;*/
max-height: 100%;
}
.portrait {
height: 150px;
}
</style>
<body>
<div class="container " style="margin-top: 70px">
<div class="text-center">
<h1>Resize images while uploading it in php</h1>
</div>
<br>
<br>
<h4></h4>
<div class="well">
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="image"><br>
<input type="submit" class="btn btn-primary" value="Upload">
</form>
<br>
</div>
</div>
</body>
</html>
<?php
require_once("resize-image.php");
$form_field = "image";
$upload_path = "upload/";
//assume uploading a jpeg image file.
//This can be determined by file type while uploading and here we do not care about the image since it's not a big deal here.
$image_name = uniqid().".jpg";
$width = 1366;
$height = 768;
//Create an object of 'Image' class and call to 'upload_image' function which we are going to use here for our process.
$imgObj = new Image();
$upload = $imgObj->upload_image($form_field, $upload_path, $image_name, $width, $height);
if($upload)
{
echo "<div class='container'><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></div><br>";
?>
<div class='container'>
<div class="portrait">
<img src="upload/<?php echo $image_name; ?>"
</div>
</div>
<?php
}
else
{
echo "<div class='container'><div class=\"alert icon-alert with-arrow alert-danger form-alter\" role=\"alert\">
<i class=\"fa fa-fw fa-check-circle\"></i>
<strong> failed ! </strong> <span class=\"success-message\"> Image uploading was failed. </span>
</div></div>";
}
?>