Today I am going to share a new php script, by which you can resize your image without croping image. You may know that php is a strong programing language, by using it, you can solve your any problem. Now, Let's start our tutorial.

1st, Create 3 file and 2 folder for this.

3 files

resize.php - the main file of resize image.
index.php - for use resize.php
style.css - The file for design (css)

2 folders

uploads - The folder for your uploaded photo which will be resize
images - The folder for save your resized images.

Open your created resize.php file with any notepad like
notepad++ and paste this code to the file.

<?php
class SimpleImage {
 
 var $image;
 var $image_type;
 
 function load($filename) {
 
 $image_info = getimagesize($filename);
 $this->image_type = $image_info[2]; 
 if( $this->image_type == IMAGETYPE_JPEG ) { 
 
 $this->image = imagecreatefromjpeg($filename); 
 } elseif( $this->image_type == IMAGETYPE_GIF ) { 
 
 $this->image = imagecreatefromgif($filename); 
 } elseif( $this->image_type == IMAGETYPE_PNG ) { 
 
 $this->image = imagecreatefrompng($filename); 
 } 
 } 
 function save($filename, $image_type=IMAGETYPE_PNG, $compression=75, $permissions=null) { 
 
 if( $image_type == IMAGETYPE_JPEG ) { 
 imagejpeg($this->image,$filename,$compression); 
 } elseif( $image_type == IMAGETYPE_GIF ) { 
 
 imagegif($this->image,$filename); 
 } elseif( $image_type == IMAGETYPE_PNG ) { 
 
 imagepng($this->image,$filename); 
 } 
 if( $permissions != null) { 
 
 chmod($filename,$permissions); 
 } 
 
 
 
 } 
 function output($image_type=IMAGETYPE_JPEG) { 
 
 if( $image_type == IMAGETYPE_JPEG ) { 
 imagejpeg($this->image); 
 } elseif( $image_type == IMAGETYPE_GIF ) { 
 
 imagegif($this->image); 
 } elseif( $image_type == IMAGETYPE_PNG ) { 
 
 imagepng($this->image); 
 } 
 } 
 function getWidth() { 
 
 return imagesx($this->image); 
 } 
 function getHeight() { 
 
 return imagesy($this->image); 
 } 
 function resizeToHeight($height) { 
 
 $ratio = $height / $this->getHeight(); 
 $width = $this->getWidth() * $ratio; 
 $this->resize($width,$height); 
 } 
 
 function resizeToWidth($width) { 
 $ratio = $width / $this->getWidth(); 
 $height = $this->getheight() * $ratio; 
 $this->resize($width,$height); 
 } 
 
 function scale($scale) { 
 $width = $this->getWidth() * $scale/100; 
 $height = $this->getheight() * $scale/100; 
 $this->resize($width,$height); 
 } 
 
 function resize($width,$height) { 
 $new_image = imagecreatetruecolor($width, $height); 
 imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight()); 
 $this->image = $new_image; 
 } 
 
} 
?>

Save this file by CTRL+S.

Now Open your index.php and paste this code and save the file.

<html> 
 <head> 
 <link rel="stylesheet" type="text/css" href="style.css"> 
 <script type='text/javascript'>
 var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; 
 function Validate(oForm) {
 var arrInputs = oForm.getElementsByTagName("input");
 for (var i = 0; i < arrInputs.length; i++) {
 var oInput = arrInputs[i];
 if (oInput.type == "file") {
 var sFileName = oInput.value;
 if (sFileName.length > 0) {
 var blnValid = false;
 for (var j = 0; j < _validFileExtensions.length; j++) {
 var sCurExtension = _validFileExtensions[j];
 if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
 blnValid = true;
 break;
 }
 }
 
 if (!blnValid) {
 alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
 return false;
 }
 }
 }
 }
 
 return true;
 }
 
 function chk()
 {
 var sds = document.getElementById('dum');
 if(sds == null){alert("You are not allowed to remove the copyright tag");
 document.getElementById("search").style.visibility="hidden";
 }
 }
 window.onload=chk;
 </script>
 </head>
 <body>
 <div class='resp_code' align='center' id='search'>
 <form name=fform enctype="multipart/form-data" method=POST action="index.php" class='frms noborders' onsubmit='return Validate(this);'>
 <h3>Upload your Image <= 500 KB below:</h3>
 <input type=file name="userfile" size=40 accept="image/*" required="required"> 
 <label>Width:</label>  <input name="max_width_box" type="text" id="max_width_box" value="300" size="4" style='width:15%;'>  
 
 <label>Height:</label>  <input name="max_height_box" type="text" id="max_height_box" value="300" size="4" style='width:15%;'> 
 <input type="submit" name="submit" value="Upload image" />
 
 <a id='dum' style='padding-right:0px; text-decoration:none;color: green;text-align:center;' href='https://www.ftwebbd.blogspot.com'>© Ft Web BD</a>
 
 <input type="hidden" name="max_file_size" value="500000">
 </form> 
<?php
error_reporting(0);
 if(isset($_POST[max_file_size]))
 { 
 $uploaddir = 'uploads/';
 $filename=$_FILES['userfile']['name'];
 $uploadfile = $uploaddir.basename($_FILES['userfile']['tmp_name']);
 if(move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadfile))
 {
 $x=basename($_FILES['userfile']['tmp_name']);
 $aa = 'uploads/'.$x;
 $t=basename($_FILES['userfile']['type']); 
 include('image-resize.php'); 
 $widthim = $_POST['max_width_box'];
 $heightim = $_POST['max_height_box'];
 $tmp_name = $x.".".$t;
 $image = new SimpleImage();
 $image->load($aa);
 $image->resize($widthim,$heightim);
 $image->save("images/$x");
 echo "<img src='images/$x'/>";
 }
 else
 { 
 ?>
 <script language=javascript> 
 alert("Upload ONLY IMAGES <= 500 KB");
 </script>
 <?php
 }
 }
 ?>
 </div> </body>
</html>

Our job tutorial complete. But is the script looking ugly? No problem, Paste this css code in your created style.css

body,td,th {
 font-family: Arial, Helvetica, sans-serif;
 color: #333333;
 font-size: 12px;
}

.upload_message_success {
 padding:4px;
 background-color:#009900;
 border:1px solid #006600;
 color:#FFFFFF;
 margin-top:10px;
 margin-bottom:10px;
}

.upload_message_error {
 padding:4px;
 background-color:#CE0000;
 border:1px solid #990000;
 color:#FFFFFF;
 margin-top:10px;
 margin-bottom:10px;
}
.frms
{
margin:0 auto;
padding:10px;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
-o-border-radius:.3em;
font-family:Tahoma, Geneva, sans-serif;
color:#333;
font-size:.9em;
line-height:1.2em;
}
.frms label {font-size: 1em;
}
.frms input[type="text"],[type="file"]
{
width:99%;
background:#fff;
border:#ddd 1px solid;
border-radius:.35em;
-moz-border-radius:.35em;
-webkit-border-radius:.35em;
-o-border-radius:.35em;
padding:0 .5%;
margin-top:5px;
margin-bottom:15px;
height:35px;
}
.frms input:hover,textarea:hover,select:hover
{
box-shadow:#dae1e5 0px 0px 5px;
-moz-box-shadow:#dae1e5 0px 0px 5px;
-webkit-box-shadow:#dae1e5 0px 0px 5px;
-o-box-shadow:#dae1e5 0px 0px 5px;
}
.frms input:focus,textarea:focus,select:focus
{
-webkit-box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
-moz-box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
box-shadow: inset 7px 4px 7px -7px rgba(0,0,0,0.42);
border:#9d9983 1px solid;
}

.resp_code
{
margin:5px 10px 10px 300px;
padding:10px 20px 10px 20px;
font:normal 1em/1.3em Tahoma, Geneva, sans-serif;
color:#333;
background:#f8f8f8;
border:#ddd 1px solid;
border-radius:.25em;
overflow:auto;width:50%;
}
.frms input[type="submit"]
{
 padding:7px 14px;
 font-weight:bold;
 color:#fff;
 cursor:pointer;
 border-radius:.3em;
 -moz-border-radius:.2em;
 -webkit-border-radius:.2em;
 -o-border-radius:.2em;
 margin:10px 0;
 border:none;
}
.frms input[type="submit"]
{
 background:#75ab22;
 border-bottom:#629826 3px solid;
 text-shadow:#396e12 1px 1px 0px;
}
@media screen and (max-width: 480px)
{
.resp_code
{width:auto !important;margin:0px !important;
}
}

It is optional, Now my tutorial is complete.

Note: Remove breaking tag from the code, otherwise it returns a false result.

If you found a little bite of help then don't forget to share this post and promote us.
Thanks for reading and staying with us.

Make your own php image resizer tools.

3 files

2 folders

3 comments:

Popular Posts

Post Category

Blog Statistics