jQuery Ajax Image Resize with Aspect Ratio

In this academicwe’re going to see the way to resize the uploaded image with the thing ratio. The issue ratio can be calculated by way of the usage of the scale of the unique picturebased on this component ratio the width or height of the thumbnail image may be scaled.

On this academicI have used jQuery AJAX to access the photo resize characteristic in a personal home page class. In a preceding tutorialwe’ve visible the code example for uploading photograph record thru jQuery AJAX. In this situation, the image file records are sent to the PHP to get admission to ImageResizer service. On successful photograph resizing, the Hypertext Preprocessor code will return the thumbnail markup as a reaction.

HTML Form to Submit Image Data

<form id="uploadForm" action="upload.php" method="post">
	<div id="targetOuter">
		<div id="targetLayer"></div>
		<img src="photo.png" class="icon-choose-image" />
		<div class="icon-choose-image">
			<input name="userImage" id="userImage" type="file" class="inputFile"
				onChange="showPreview(this);" />
		</div>
	</div>
	<div>
		<input type="submit" value="Upload Photo" class="btnSubmit" />
</form>

Access ImageResizer via jQuery AJAX

<script type="text/javascript">
function showPreview(objFileInput) {
    if (objFileInput.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            $("#targetLayer").html('<img src="'+e.target.result+'" class="upload-preview" />');
			$("#targetLayer").css('opacity','0.7');
			$(".icon-choose-image").css('opacity','0.5');
        }
		fileReader.readAsDataURL(objFileInput.files[0]);
    }
}

$(document).ready(function (e) {
	$("#uploadForm").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "upload.php",
			type: "POST",
			data:  new FormData(this),
			beforeSend: function(){$("#body-overlay").show();},
			contentType: false,
    	    processData:false,
			success: function(data)
		    {
			$("#targetLayer").html(data);
			$("#targetLayer").css('opacity','1');
			setInterval(function() {$("#body-overlay").hide(); },500);
			},
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});
</script>

ImageResizer Service

<?php
class ImageResizer
{
    private $thumbWidth = "550";
    private $thumbHeight = "340";
    
    function createThumbnail($image_name)
    {
        $sourcePath = $uploadDir . '/' . $image_name;
        
        $sourcePathinfo = getimagesize($sourcePath);
        $imageDetail = pathinfo($sourcePath);
        
        $originalImage = imagecreatefromjpeg($sourcePath);
        
        $width          =   $imageDetail["width"];
        $height          =   $imageDetail["height"];
        
        if($width > $height)
        {
            $thumbWidth    =   $this->$thumbWidth;
            $thumbHeight    =   $old_y*($this->$thumbHeight/$old_x);
        }
        
        if($width < $height)
        {
            $thumbWidth    =   $old_x*($this->$thumbWidth/$old_y);
            $thumbHeight    =   $this->$thumbHeight;
        }
        
        if($width == $height)
        {
            $thumbWidth    =   $this->$thumbWidth;
            $thumbHeight    =   $this->$thumbHeight;
        }
        
        $thumbImage  =   ImageCreateTrueColor($thumbWidth,$thumbHeight);
        
        imagecopyresampled($thumbImage,$originalImage,0,0,0,0,$thumbWidth,$thumbHeight,$width,$height);
        
        
        // New save location
        $targetPath = $moveToDir . $image_name;
        
        $result = imagejpeg($thumb_image,$targetPath,80);
        
        imagedestroy($thumbImage);
        imagedestroy($originalImage);
        
        return $result;
    }
}
?>

 

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *