Crop image using jquery

A simple jQuery image cropping script.

Steps to crop image:

Choose the image by clicking on browse button
Upload the selected image
Perform cropping action
Click on submit button
Cropped image would be generated.

Below is the form for uplaoding image, you can download the full source code and also perform the demonstration of this script.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Upload File and Crop</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/cropimage.css" />
<link type="text/css" href="css/imgareaselect-default.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.js"></script>

<script type="text/javascript" >
$(document).ready(function() {
$('#submitbtn').click(function() {
$("#viewimage").html('');
$("#viewimage").html('<img src="images/loading.gif" />');
$(".uploadform").ajaxForm({
url: 'upload.php',
success: showResponse
}).submit();
});
});

function showResponse(responseText, statusText, xhr, $form){

if(responseText.indexOf('.')>0){
$('#thumbviewimage').html('<img src="<?php echo $upload_path; ?>'+responseText+'" style="position: relative;" alt="Thumbnail Preview" />');
$('#viewimage').html('<img class="preview" alt="" src="<?php echo $upload_path; ?>'+responseText+'" id="thumbnail" />');
$('#filename').val(responseText);
$('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', handles: true , onSelectChange: preview });
}else{
$('#thumbviewimage').html(responseText);
$('#viewimage').html(responseText);
}
}

</script>

<script type="text/javascript">
function preview(img, selection) {
var scaleX = <?php echo $thumb_width;?> / selection.width;
var scaleY = <?php echo $thumb_height;?> / selection.height;

$('#thumbviewimage > img').css({
width: Math.round(scaleX * img.width) + 'px',
height: Math.round(scaleY * img.height) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});

var x1 = Math.round((img.naturalWidth/img.width)*selection.x1);
var y1 = Math.round((img.naturalHeight/img.height)*selection.y1);
var x2 = Math.round(x1+selection.width);
var y2 = Math.round(y1+selection.height);

$('#x1').val(x1);
$('#y1').val(y1);
$('#x2').val(x2);
$('#y2').val(y2);

$('#w').val(Math.round((img.naturalWidth/img.width)*selection.width));
$('#h').val(Math.round((img.naturalHeight/img.height)*selection.height));

}

$(document).ready(function () {
$('#save_thumb').click(function() {
var x1 = $('#x1').val();
var y1 = $('#y1').val();
var x2 = $('#x2').val();
var y2 = $('#y2').val();
var w = $('#w').val();
var h = $('#h').val();
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
alert("Please Make a Selection First");
return false;
}else{
return true;
}
});
});
</script>

</head>
<body>

<!-- content -->
<section>
<div class="container">

<div class="crop_box">
<form class="uploadform" method="post" enctype="multipart/form-data" action='upload.php' name="photo">
<div class="crop_set_upload">
<div class="crop_upload_label">Upload files: </div>
<div class="crop_select_image"><div class="file_browser"><input type="file" name="imagefile" id="imagefile" class="hide_broswe" /></div></div>
<div class="crop_select_image"><input type="submit" value="Upload" class="upload_button" name="submitbtn" id="submitbtn" /></div>
</div>
</form>
<div class="crop_set_preview">
<div class="crop_preview_left">
<div class="crop_preview_box_big" id='viewimage'>

</div>
</div>
<div class="crop_preview_right">
Preview (150x150 px)
<div class="crop_preview_box_small" id='thumbviewimage' style="position:relative; overflow:hidden;"> </div>

<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<input type="hidden" name="wr" value="" id="wr" />

<input type="hidden" name="filename" value="" id="filename" />
<div class="crop_preview_submit"><input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" class="submit_button" /> </div>
</form>

</div>
</div>
</div>

</div>
</section>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!DOCTYPE html>

<head>

<title>Upload File and Crop</title>

$(document).ready(function() {

$('#submitbtn').click(function() {

$("#viewimage").html('');

$("#viewimage").html('<img src="images/loading.gif" />');

$(".uploadform").ajaxForm({

url: 'upload.php',

success: showResponse

}).submit();

});

function showResponse(responseText, statusText, xhr, $form){

if(responseText.indexOf('.')>0){

$('#thumbviewimage').html('<img src="<?php echo $upload_path; ?>'+responseText+'" style="position: relative;" alt="Thumbnail Preview" />');

$('#viewimage').html('<img class="preview" alt="" src="<?php echo $upload_path; ?>'+responseText+'" id="thumbnail" />');

$('#filename').val(responseText);

$('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', handles: true , onSelectChange: preview });

}else{

$('#thumbviewimage').html(responseText);

$('#viewimage').html(responseText);

}

</script>

function preview(img, selection) {

var scaleX = <?php echo $thumb_width;?> / selection.width;

var scaleY = <?php echo $thumb_height;?> / selection.height;

$('#thumbviewimage > img').css({

width: Math.round(scaleX * img.width) + 'px',

height: Math.round(scaleY * img.height) + 'px',

marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',

marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'

});

var x1 = Math.round((img.naturalWidth/img.width)*selection.x1);

var y1 = Math.round((img.naturalHeight/img.height)*selection.y1);

var x2 = Math.round(x1+selection.width);

var y2 = Math.round(y1+selection.height);

$('#x1').val(x1);

$('#y1').val(y1);

$('#x2').val(x2);

$('#y2').val(y2);

$('#w').val(Math.round((img.naturalWidth/img.width)*selection.width));

$('#h').val(Math.round((img.naturalHeight/img.height)*selection.height));

}

$(document).ready(function () {

$('#save_thumb').click(function() {

var x1 = $('#x1').val();

var y1 = $('#y1').val();

var x2 = $('#x2').val();

var y2 = $('#y2').val();

var w = $('#w').val();

var h = $('#h').val();

if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){

alert("Please Make a Selection First");

return false;

}else{

return true;

}

});

</script>

</head>

<body>

<div class="crop_upload_label">Upload files: </div>

</div>

</form>

</div>

Preview (150x150 px)

<form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">

</form>

</div>

</section>

</body>

</html>

[easy_media_download url=”https://www.tangleskills.com/wp-content/uploads/cropimage.zip”]DEMO