تغییر سایز عکس با php و jquery

در این آموزش , قصد داریم به شما نحوه تغییر سایز عکس با php به نسبت ابعاد (Aspect Ration) نشان دهیم . این نسبت ابعاد بر اساس اندازه تصویر اصلی محاسبه خواهد شد . بر اساس این نسبت ابعاد طول یا عرض , تصویر نهایی ساخته می شود.

در این آموزش php , من از jQuery AJAX برای دسترسی به متد تغییر سایز عکس در کلاس php استفاده می کنم . در این مثال , داده های فایل به php برای دسترسی به کلاس ImageResizer ارسال می شود . در صورت موفقیت آمیز بودن عملیات تغییر سایز عکس با php , تصویر بند انگشتی در پاسخ برگشت داده میشود.

فرم HTML برای ارسال داده های تصویر

این کد به شما HTML مربوط به آپلود و ارسال تصویر به تابع AJAX برای تغییر سایز عکس را نشان می دهد . بر کلیک بر روی دکمه آپلود تصویر , فایل توسط درخواست AJAX به php ارسال می شود.

essful image resizing, the PHP code will return the thumbnail markup as a response.

jquery-ajax-image-upload
HTML Form to Submit Image Data

This code shows HTML to upload the image file to be resized via jquery AJAX function. On clicking the Upload Photo button the selected file input data is sent to a PHP file via AJAX request.

<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>

essful image resizing, the PHP code will return the thumbnail markup as a response.

jquery-ajax-image-upload

HTML Form to Submit Image Data

This code shows HTML to upload the image file to be resized via jquery AJAX function. On clicking the Upload Photo button the selected file input data is sent to a PHP file via AJAX request.

<input name="userImage" id="userImage" type="file" class="inputFile"

onChange="showPreview(this);" />

</div>

<div>

</form>

دسترسی به ImageResizer با jQuery AJAX

این تابع جی کویری یک درخواست AJAX را با داده های تصویر به فایل php ارسال می کند. در کد php , کلاس ImageResizer برای ساخت تصویر بند انگشتی به نسبت ابعاد ساخته می شود . بعد از اتمام این مراحل در سمت اسکریپت php , نتیجه تصویر تغییر داده شده برگشت داده میشود .

<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>

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

در کلاس ImageResizer , یک متد برای تغییر سایز تصویر اصلی به نسبت ابعاد تعیین کردیم . اگر مقدار طول و عرض تصویر اصلی با یکدیگر یکسان نبودند , پس نسبت ابعاد بر اساس مقیاس پایین و بای تصویر محاسبه خواهد شد.

<?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;
    }
}
?>

<?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;

}

جمع بندی

همانطور که دید به راحتی توانستیم یک اسکریپت تغییر سایز عکس با php و jquery را پیاده سازی کنیم .

همچنین در بخش php به صورت کارا از کتابخانه GD برای انجام عملیات تغییر سایز بهره بردیم که در بخش های مختلف بخصوص زمانی که یک سیستم مدیریت محتوای فروشگاهی و یا خبری طراحی می کنید , برای سادگی کاربر مدیریت حتما توجه داشته باشید از این قابلیت در بخش افزودن تصویر استفاده کنید.

برای دانلود سورس کد کامل این مقاله می توانید به بخش باکس دانلود زیر این مقاله آموزشی مراجعه کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید