Image Upload,Crop and Resize Using PHP, jQuery and Ajax

In this text i can allow you to realize how to do photo uploading, cropping and resizing the use of PHP Ajax.we’ve got in advance submit an editorial picture add and crop using popup container ,I’m going huge response from all of you men,a few oldsters request to share article about picture crop and resize without popup box or modal field.sometimes popup field growing issue on pill and cell.

in this put up we have furnished picture importing and cropping in the same web page in preference to modal field.we are displaying and hiding photograph view div based on consumer movement.i’m the usage of personal home page GD library for resizing photo and AJAX form jquery plugin for picture add using AJAX way.I am additionally using the Imgareaselect plugin to crop photograph and personal home page for resizing the picture with keep cropped picture.

There are following jQuery plugin and CSS Library Used

  • jQuery Library : Base library to support other jquery plugin
  • Boostrap 3 : Used to create awesome HTML layout
  • Imgareaselect : Use to define crop co-ordinate and cropp image,You can download from here.
  • Ajax form : Use to submit form Ajax manner,You can download from here

Also Checkout other tutorial of image crop,

Image Crop Result Using PHP and AJAX

There are Following files will participate in this image crop tutorial

  • index.php : This file is responsible to create HTML layout and show cropped image.
  • profile.php : This file is responsible to all server-side functionality like image cropping and saving
  • dist : This is a folder, which is use to keep all library file.

Image Uploading, Cropping and Resizing with PHP and Ajax

Step 1: First we will include all necessary jquery plugin and library files.We will keep all below files in the head section of theindex.php file.

 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="dist/jquery.imgareaselect.js" type="text/javascript"></script>
<script src="dist/jquery.form.js"></script>
<link rel="stylesheet" href="dist/imgareaselect.css">

Step 2:We will Create div to show image and option to change image.

 


<div class="col-sm-2"><img class="img-circle" id="avatar-edit-img" height="128" data-src="default.jpg" data-holder-rendered="true" style="width: 140px; height: 140px;" src="default.jpg"/></div>
<div class="col-sm-10"><a type="button" class="btn btn-primary" id="change-pic">Change Image</a>
</div>

Here i am showing default.jpg image file for as a default image.

Step 3: Now we will create div to upload and crop image.


<div id="changePic" class="" style="display:none">
<form id="cropimage" method="post" enctype="multipart/form-data" action="profile.php">
<label>Upload your image</label><input type="file" name="photoimg" id="photoimg" />
<input type="hidden" name="hdn-profile-id" id="hdn-profile-id" value="1" />
<input type="hidden" name="hdn-x1-axis" id="hdn-x1-axis" value="" />
<input type="hidden" name="hdn-y1-axis" id="hdn-y1-axis" value="" />
<input type="hidden" name="hdn-x2-axis" value="" id="hdn-x2-axis" />
<input type="hidden" name="hdn-y2-axis" value="" id="hdn-y2-axis" />
<input type="hidden" name="hdn-thumb-width" id="hdn-thumb-width" value="" />
<input type="hidden" name="hdn-thumb-height" id="hdn-thumb-height" value="" />
<input type="hidden" name="action" value="" id="action" />
<input type="hidden" name="image_name" value="" id="image_name" />

<div id='preview-avatar-profile'>
</div>
<div id="thumbs" style="padding:5px; width:600p"></div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-crop" class="btn btn-primary">Crop & Save</button>
</div>
</div>

Step 4: Now will write some jquery code to show the Image Crop div on click of change pic button.

 


jQuery('#change-pic').live('click', function(e){
e.preventDefault();

jQuery('#changePic').show();
jQuery('#change-pic').hide();

});

Above code will show uploaded image container div where you will crop and save image and hide change Pic button.

Step 5: Now we will use jQuery Ajax form plugin for form submitting and show the image for crop process on bootstrap modal box.

 


jQuery('#photoimg').live('change', function()
{
jQuery("#preview-avatar-profile").html('');
jQuery("#preview-avatar-profile").html('Uploading....');
jQuery("#cropimage").ajaxForm(
{
target: '#preview-avatar-profile',
success: function() {
jQuery('img#photo').imgAreaSelect({
aspectRatio: '1:1',
onSelectEnd: getSizes,
});
}
}).submit();
});

You can get image all parameters on 'success' call back function.

Step 6: Now we will cropped image and call save Ajax method to save image on hard disk storage.


//call on crop iamge button
jQuery('#btn-crop').live('click', function(e){
e.preventDefault();
params = {
targetUrl: 'profiles/saveAvatarTmp/',
action: 'profiles_controller_saveAvatarTmp',
x_axis: jQuery('#hdn-x1-axis').val(),
y_axis : jQuery('#hdn-y1-axis').val(),
x2_axis: jQuery('#hdn-x2-axis').val(),
y2_axis : jQuery('#hdn-y2-axis').val(),
thumb_width : jQuery('#hdn-thumb-width').val(),
thumb_height:jQuery('#hdn-thumb-height').val()
};
saveCropImage(params);
});
//make ajax request to PHP for save image
function saveCropImage(params) {
jQuery.ajax({
url: siteurl + params['targetUrl'],
cache: false,
dataType: "html",
data: {
action: params['action'],
id: jQuery('#hdn-profile-id').val(),
t: 'ajax',
w1:params['thumb_width'],
x1:params['x_axis'],
h1:params['thumb_height'],
y1:params['y_axis'],
x2:params['x2_axis'],
y2:params['y2_axis']
},
type: 'Post',
// async:false,
success: function (response) {
jQuery('#changePic').hide();
jQuery('#change-pic').show();
jQuery(".imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-border2,.imgareaselect-outer").css('display', 'none');

jQuery("#avatar-edit-img").attr('src', response);
jQuery("#preview-avatar-profile").html('');
jQuery("#photoimg").val('');
AlertManager.showNotification('Image cropped!', 'Click Save Profile button to save image.', 'success');


},
error: function (xhr, ajaxOptions, thrownError) {
alert('status Code:' + xhr.status + 'Error Message :' + thrownError);
}
});
}

Step 7: We will define controller/action method in profile.php.


public function changeAvatar() {
global $current_user;
$loggedInId = $current_user->ID;
$post = isset($_POST) ? $_POST: array();
$max_width = "500";
$userId = isset($post['hdn-profile-id']) ? intval($post['hdn-profile-id']) : 0;
$path = get_theme_root(). '\images\uploads\tmp';

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024)) // Image size max 1 MB
{
$actual_image_name = 'avatar' .'_'.$userId .'.'.$ext;
$filePath = $path .'/'.$actual_image_name;
$tmp = $_FILES['photoimg']['tmp_name'];

if(move_uploaded_file($tmp, $filePath))
{
$width = $this->getWidth($filePath);
$height = $this->getHeight($filePath);
//Scale the image if it is greater than the width set above
if ($width > $max_width){
$scale = $max_width/$width;
$uploaded = $this->resizeImage($filePath,$width,$height,$scale);
}else{
$scale = 1;
$uploaded = $this->resizeImage($filePath,$width,$height,$scale);
}
$res = $this->Profile->saveAvatar(array(
'userId' => isset($userId) ? intval($userId) : 0,
'avatar' => isset($actual_image_name) ? $actual_image_name : '',
));

//mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img id='photo' class='' src='".getCustomAvatar($userId, true).'?'.time()."' class='preview'/>";
}
else
echo "failed";
}
 else
    echo "Image file size max 1 MB"; 
    }
    else
    echo "Invalid file format.."; 
    }
    else
    echo "Please select image..!";
    exit;
    
    
  }

Step 8: Model method to save image path into database.


function saveAvatar($options){
//update sql

}

 

Please follow and like us:



Leave a Comment

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